TanStack
Hotkeys v0v0
Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Menu
Getting Started
Guides
API Reference
Hotkeys API Reference
App Hotkeys API Reference
Key hold & held keys API Reference
Hotkey Recorder API Reference
Normalization & format API Reference
Examples
Hotkey Recorder API Reference

createHotkeyRecorder

Call Signature

ts
function createHotkeyRecorder(options): SvelteHotkeyRecorder<HotkeyChord>;
function createHotkeyRecorder(options): SvelteHotkeyRecorder<HotkeyChord>;

Defined in: packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:102

Svelte function for recording keyboard shortcuts. Options may be a getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

HotkeyChordRecorderOptions

Returns

SvelteHotkeyRecorder<HotkeyChord>

Example

svelte
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>

Call Signature

ts
function createHotkeyRecorder(options): SvelteHotkeyRecorder;
function createHotkeyRecorder(options): SvelteHotkeyRecorder;

Defined in: packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:105

Svelte function for recording keyboard shortcuts. Options may be a getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

HotkeySequenceRecorderOptions

Returns

SvelteHotkeyRecorder

Example

svelte
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>

Call Signature

ts
function createHotkeyRecorder(options): SvelteHotkeyRecorder;
function createHotkeyRecorder(options): SvelteHotkeyRecorder;

Defined in: packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:110

Svelte function for recording keyboard shortcuts. Options may be a getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

() => HotkeySequenceRecorderOptions

Returns

SvelteHotkeyRecorder

Example

svelte
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>

Call Signature

ts
function createHotkeyRecorder(options): SvelteHotkeyRecorder<HotkeyChord>;
function createHotkeyRecorder(options): SvelteHotkeyRecorder<HotkeyChord>;

Defined in: packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:113

Svelte function for recording keyboard shortcuts. Options may be a getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

() => HotkeyChordRecorderOptions

Returns

SvelteHotkeyRecorder<HotkeyChord>

Example

svelte
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>

Call Signature

ts
function createHotkeyRecorder(options): SvelteHotkeyRecorder;
function createHotkeyRecorder(options): SvelteHotkeyRecorder;

Defined in: packages/svelte-hotkeys/src/createHotkeyRecorder.svelte.ts:116

Svelte function for recording keyboard shortcuts. Options may be a getter.

With the default maxSteps: 1, the first valid chord is recorded. With a larger maxSteps, each chord adds a step; the recording commits on Enter (unless commitKeys: 'none'), after idleTimeoutMs, or at maxSteps, and onRecord receives a chord (one step) or a sequence.

Parameters

options

() => HotkeyRecorderOptions

Returns

SvelteHotkeyRecorder

Example

svelte
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
<script lang="ts">
  const recorder = createHotkeyRecorder({ onRecord: (hotkey) => (shortcut = hotkey) })
  const sequenceRecorder = createHotkeyRecorder({ maxSteps: Infinity, onRecord: save })
</script>

<button onclick={recorder.startRecording}>
  {recorder.isRecording ? 'Press keys…' : formatForDisplay(shortcut)}
</button>
Edit on GitHub
HotkeyConflictOptions
SvelteHotkeyRecorder
© 2026 TanStack LLC