Hotter Keys

A correct, cross-browser, layout-aware keyboard shortcut library.

---

Packages

Package	npm	JSR	Description
@hotter-keys/core			Core library — zero dependencies
@hotter-keys/solid		—	Solid.js primitives
@hotter-keys/devtools		—	Devtools for Vite, Astro & @vitejs/devtools

Quick start

npm install @hotter-keys/core

import { createHotkeys, displayShortcut } from "@hotter-keys/core";

const hk = createHotkeys();

// Single shortcut
hk.add("mod+s", () => save());

// Multi-chord sequence
hk.add("mod+k mod+c", () => toggleComment());

// Layers for priority override
hk.add("mod+z", () => undo(), { layer: "editor" });
hk.pushLayer("editor");

// Scopes for context switching
hk.add("mod+z", () => undoText(), { scope: "text" });
hk.add("mod+z", () => undoStroke(), { scope: "draw" });
hk.setScope("text");

// Platform-aware display
displayShortcut("mod+s"); // "⌘S" on Mac, "Ctrl+S" elsewhere

Features

• Correct key matching — uses key, not code/keyCode
• Layout-aware — only safe keys (a-z, 0-9) to avoid cross-layout issues
• Cross-platform modifiers — mod (Cmd/Ctrl), mod2 (Ctrl/Alt)
• Key sequences — multi-chord shortcuts like Ctrl+K Ctrl+C
• Layers — priority stack for shortcut override
• Scopes — context-based filtering
• Held keys tracking — reactive key state with hold detection
• Shortcut recording — "press a key to rebind" UI support
• Zero dependencies — core has no runtime deps
• DevTools — real-time binding inspector for Vite, Astro & @vitejs/devtools

Solid.js

npm install @hotter-keys/solid

import { createHotkeys, createShortcut, createLayer, Hotkey } from "@hotter-keys/solid";

function App() {
  const hk = createHotkeys(); // auto-destroys on cleanup
  const editor = createLayer(hk, "editor", { active: true });

  createShortcut(hk, "mod+s", () => save());

  return (
    <>
      <Hotkey hk={hk} combo="mod+z" onFire={() => undo()} options={{ layer: "editor" }} />
      <p>Editor: {editor.isActive() ? "active" : "inactive"}</p>
      <p>Layers: {hk.layers().join(" → ")}</p>
    </>
  );
}

DevTools

npm install -D @hotter-keys/devtools

// Astro
import { hotterKeysDevtoolsIntegration } from "@hotter-keys/devtools";
// → adds a Dev Toolbar app with bindings, events, and settings tabs

// @vitejs/devtools
import { hotterKeysViteDevtools } from "@hotter-keys/devtools/vite";
// → registers a browsable panel with binding inspector

Try it

Documentation

Full docs at oddcelot.github.io/hotter-keys

• Getting Started
• Layers
• Scopes
• DevTools
• API Reference

License

GPL-3.0-only