bind-keyboard

Q: How do I use bind-keyboard in React, Vue, or Svelte?

Create a BindKeyboard instance when your component mounts (useEffect in React, onMounted in Vue, onMount in Svelte) and call bindKeyboard.destroy() on unmount to remove its listeners. The demo's "Try it in your code" section has a copy-pasteable example for each framework, in both TypeScript and JavaScript.

Q: Does bind-keyboard support non-QWERTY keyboard layouts?

Yes. Setting keyMode: "code" matches by the physical key position (event.code) instead of the character it produces (event.key), so a binding for the key printed "A" fires regardless of the active keyboard layout.

Q: How do I bind a shortcut to Cmd on Mac and Ctrl on Windows/Linux with a single binding?

Use the cmdOrCtrl modifier alias, e.g. bindKeyboard.add("cmdOrCtrl+k", callback) — it resolves to metaKey on Mac and ctrlKey everywhere else, so one binding covers both platforms.

Q: Does bind-keyboard work with server-side rendering (SSR)?

Yes. Constructing a BindKeyboard instance is safe during SSR: with the default autostart: true, it skips attaching listeners instead of throwing when there's no DOM yet.

Q: Does bind-keyboard interfere with typing in input fields?

Not unless you opt in. Setting checkInputElements: true on the constructor suppresses bindings while a text field, textarea, select, or contenteditable element is focused, with a per-binding allowInInputElements: true override for shortcuts like Escape that should still fire.

Press any key combination to see it detected below.

This demo reacts to real keydown/keyup events — best experienced with a physical keyboard.

Detected combination —

keyMode

key matches event.key (layout-aware — e.g. Ctrl+A needs an actual "A" from the active layout); code matches event.code, the physical key position, regardless of layout.

Layout (visual only)

checkInputElements

When checked, shortcuts are suppressed while the input below (or any text field/textarea/select/contenteditable) is focused — except bindings marked allowInInputElements, like Escape.

Test input (for checkInputElements)

Pause shortcuts

stopListeners() / startListeners() — unlike scopes (used by the ? overlay's own "keyboard" scope above), pausing is all-or-nothing: even unscoped bindings like ? itself and Toggle theme stop working too.

Registered shortcuts press ? for full view

Features

Bind callbacks to key combinations, including multiple per callback

Layout-agnostic matching via event.code — no need to switch to a Latin layout

cmdOrCtrl — one binding, the right modifier on every platform

Input-safe by default — shortcuts skip text fields, with a per-binding override

~4.5KB gzipped, zero dependencies

SSR-safe — skips autostart instead of throwing when there's no DOM yet

Scopes — a binding only fires while its scope is active, so one key can mean something else (or nothing) per context

Key sequences (e.g. Vim's g,g) — fires once every step is pressed in order

Pause/resume every binding at once, without removing any of them

FAQ

How do I use bind-keyboard in React, Vue, or Svelte?

Create a BindKeyboard instance when your component mounts (useEffect in React, onMounted in Vue, onMount in Svelte) and call bindKeyboard.destroy() on unmount to remove its listeners. The "Try it in your code" section above has a copy-pasteable example for each framework, in both TypeScript and JavaScript.

Does bind-keyboard support non-QWERTY keyboard layouts?

Yes. Setting keyMode: "code" matches by the physical key position (event.code) instead of the character it produces (event.key), so a binding for the key printed "A" fires regardless of the active keyboard layout.

How do I bind a shortcut to Cmd on Mac and Ctrl on Windows/Linux with a single binding?

Use the cmdOrCtrl modifier alias, e.g. bindKeyboard.add("cmdOrCtrl+k", callback) — it resolves to metaKey on Mac and ctrlKey everywhere else, so one binding covers both platforms.

Does bind-keyboard work with server-side rendering (SSR)?

Yes. Constructing a BindKeyboard instance is safe during SSR: with the default autostart: true, it skips attaching listeners instead of throwing when there's no DOM yet.

Does bind-keyboard interfere with typing in input fields?

Not unless you opt in. Setting checkInputElements: true on the constructor suppresses bindings while a text field, textarea, select, or contenteditable element is focused, with a per-binding allowInInputElements: true override for shortcuts like Escape that should still fire.

How big is bind-keyboard?

About 4.5KB gzipped, with zero runtime dependencies.

Features

Bonus: hold some keys

Install

Try it in your code

FAQ

Keyboard shortcuts

Game bindings