Skip to content

buildwithdarsh/KeyBoardJS

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 / commandOrControlplatform-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

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors