Hotkeys

beta

Great defaults for everyone. Superpowers for your power users.

A type-safe library for keyboard shortcuts in web apps. One framework-agnostic core, plus adapters for React, Vue, Solid, Svelte, Angular, and more.

Docs

launch board

5.9Mtotal downloads 1,519,091weekly downloads 746GitHub stars

What a keydown listener misses

A keydown listener takes five minutes. Then someone types in a text box, opens your app on Windows, or uses a German keyboard, and the patches pile up.

keydown.ts

document.addEventListener('keydown', (e) => {  const el = document.activeElement  if (el?.closest('input, textarea')) return  if (el?.closest('button')) return  if (dialogOpen) return  if (e.isComposing) return  const mod = isMac ? e.metaKey : e.ctrlKey  if (mod && (e.key === 's' || e.code === 'KeyS')) {    e.preventDefault()    save()  }  // TODO: update the cheat sheet})

The same shortcut with HotkeysuseHotkey('Mod+S', save)

Hover a card to find its patch.

⌘S
Browser shortcuts
⌘S saves your doc, not the web page.
Mod+S
Mac and Windows modifiers
Write Mod once. Mac users get ⌘, everyone else gets Ctrl.
J in a textarea
Typing in a field
Letter shortcuts wait while someone types. ⌘S and Esc still work from the field.
Esc
Dialogs over the page
Put the dialog in a scope, and Esc closes it, not the page behind it too.
Enter on a button
Focused buttons and menus
Buttons keep Enter and Space, and menus keep their arrow keys.
Dvorak · AZERTY · Русский
Other keyboard layouts
Shortcuts match the letter people press, and still work on non-Latin layouts.
AltGr+Q → @
AltGr and input methods
Typing @ on a German keyboard won't fire Ctrl+Alt+Q, and composing Japanese won't fire letter shortcuts.
?
Out-of-date cheat sheets
Declare shortcuts once, and the cheat sheet and settings page read the same list.

Typed shortcut strings

Your editor autocompletes every shortcut. Typos and impossible combos fail before you ship them.

Editor.tsx

useHotkeys([

{ hotkey: 'Mod+Alt+K

Mod+Alt+K

Mod+Alt+KanaMode

Mod+Alt+Katakana

Mod+Alt+[KanaMode]

Mod+Alt+[Katakana]

Mod+Alt+[KeyA]

{ hotkey: 'Mod+Control+S' },

Type error: Type '"Mod+Control+S"' is not assignable to type 'RegisterableHotkey'. Did you mean '"Control+S"'?

])

Hotkey scopes

Wrap a dialog in an exclusive scope and it owns the keyboard. ⌘S saves the issue, not the board behind it, and the board's other shortcuts wait until it closes. Nothing else has to know the dialog is open.

hotkey scopes

Hints while a modifier is held

Hold ⌘ or ⌥ and the buttons show their shortcuts. People learn them without opening a help page.

discoverable

Shortcuts users can change

List your shortcuts once and get a cheat sheet and a settings page out of it. Users press the keys they want, and Hotkeys tells them when something else already has them. Labels match each platform and keyboard layout, so ⌘P on a Mac is Ctrl+P on Windows.

shortcut settings