svelte-attach-key

A Svelte attachment for binding keyboard shortcuts to elements using the Svelte 5 attachments API.

Triggers the element's .click() when the shortcut is pressed. Listens globally on window by default.

Installation

npm install svelte-attach-key

Example

<script lang="ts">
  import { hotkey } from "svelte-attach-key";
</script>

<!-- Trigger on single key -->
<button {@attach hotkey('k')} onclick={doSomething}>Press K</button>

<!-- With modifier keys -->
<button {@attach hotkey('s', { ctrl: true })} onclick={save}>Save (Ctrl+S)</button>

<!-- Platform-aware modifier (Ctrl on Windows/Linux, Cmd on Mac) -->
<button {@attach hotkey('s', { mod: true })} onclick={save}>Save</button>

<!-- Scoped to element focus only -->
<input {@attach hotkey('Enter', { global: false })} />

<!-- Conditionally enabled -->
<button {@attach enabled && hotkey('k')} onclick={doSomething}>Press K</button>

Demo | npm

API

hotkey(key, options?)

Svelte attachment that triggers the element's .click() on the specified keyboard shortcut.