Skip to content

About

Tiny keyboard shortcut and key-binding library for the browser (~4KB gzip)

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

This project is made with the help of Claude (1M context).


version gzip deps license



KeyBoardJS

The tiny keyboard library.

Hotkeys, sequences, chords, scopes, layouts, and a recorder — all in one script tag. Zero dependencies, TypeScript first.


Why KeyBoardJS?

hotkeys-js Mousetrap KeyBoardJS
Hotkeys Yes Yes Yes
Key sequences (g g) No Yes Yes
Chords (hold j+k) No No Yes
Named scopes Partial No Yes (stackable)
Layout remap (Dvorak/Colemak) No No Yes
Record + replay No No Yes
TypeScript-first No No Yes
Gzip size ~3KB ~3KB ~4KB (everything)

Quick Start

<script src="https://keyboardjs.work.withdarsh.com/dist/keyboard.umd.js"></script>
<script>
  Keyboard.init();

  Keyboard.on('ctrl+k', () => openPalette());
  Keyboard.on(['g', 'g'], () => window.scrollTo(0, 0));
  Keyboard.chord(['j', 'k'], () => exitInsertMode());
</script>

Or with a bundler:

import Kb from 'KeyBoardJS';

Kb.init();
Kb.on('shift+?', () => showHelp());

API

Kb.init(opts?)

Attach listeners to window (or a custom EventTarget).

Kb.on(combo, handler, opts?)

Register a hotkey. Accepts 'ctrl+k' style strings.

Kb.on('ctrl+shift+p', (e) => { ... }, {
  scope: 'editor',      // only fire in this scope
  allowInInput: false,  // ignore when typing in inputs
  preventDefault: true, // stop default browser behaviour
});

Kb.on([k1, k2, ...], handler, opts?)

Register a sequence. Fires when keys are pressed in order within timeout ms.

Kb.on(['g', 'g'], gotoTop, { timeout: 800 });

Kb.chord([k1, k2, ...], handler, opts?)

Register a chord — keys pressed simultaneously within window ms.

Kb.chord(['j', 'k'], exitInsertMode, { window: 200 });

Scopes

Kb.scope('editor');          // activate
Kb.scope();                  // read current
const pop = Kb.pushScope('modal');
pop();                       // restore previous

Bindings with scope: 'global' always fire. Others only fire in the active scope.

Layouts

Kb.layout('dvorak'); // or 'colemak' | 'qwerty'

Recorder

Kb.record();
// ... user types ...
const frames = Kb.stop();
await Kb.replay(frames, 2); // 2x speed

Misc

Kb.off('ctrl+k');    // remove
Kb.clear();          // remove all
Kb.list();           // [{ combo, scope }, ...] — good for help dialogs
Kb.format('ctrl+k'); // "Ctrl + K"

Platform support (Mac / Windows / Linux)

Use mod (a.k.a. cmdOrCtrl) for bindings that should work the same on every OS:

Kb.on('mod+k', openPalette);   // ⌘K on Mac, Ctrl+K on Windows/Linux
Kb.on('mod+shift+p', command); // ⇧⌘P / Ctrl+Shift+P

Inspect the detected platform:

Kb.platform   // 'mac' | 'windows' | 'linux' | 'other'
Kb.isMac      // true on macOS / iPadOS / iOS
Kb.modKey     // 'meta' (Mac) or 'control' (PC)
Kb.format('mod+shift+k')  // "⇧⌘K" on Mac, "Ctrl + Shift + K" on PC

Kb.format() returns Mac glyphs (⌘ ⌥ ⇧ ⌃ ↵ ⌫ ⇥) on Apple platforms and word labels (Ctrl + Shift + K) elsewhere — drop straight into tooltips and help dialogs.

Key names

Case-insensitive. Aliases supported:

  • mod / cmdOrCtrl / commandOrControl — platform-aware (Cmd on Mac, Ctrl elsewhere)
  • ctrl / control
  • cmd / meta / command / win
  • alt / option / opt
  • esc / escape
  • return / enter
  • space / spacebar
  • up / down / left / right (arrow keys)
  • pgup / pgdn, del, ins

License

MIT © Darsh Gupta

About

Tiny keyboard shortcut and key-binding library for the browser (~4KB gzip)

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages