Kitchen Sink

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text. The quick brown fox jumps over the lazy dog. This is a paragraph demonstrating the base typographic style — Lilex Variable throughout, with lighter weight for headings and display numbers.

Bold text and italic text and strikethrough text and inline code and a link to somewhere.

Blockquote. Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

---

Lists

Unordered

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

Definition-style

key : The value returned by KeyboardEvent.key. This is what hotter-keys matches on.

code : The physical key position. Layout-dependent — do not use.

---

Code

Inline: createHotkeys({ target: document.body })

basic-usage.ts

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

const hk = createHotkeys({ target: document.body });

// Single shortcut
hk.add("ctrl+k", () => {
  console.log("Command palette opened");
});

// Key sequence (chord)
hk.add("ctrl+k ctrl+c", () => {
  console.log("Comment block");
});

// Held-keys tracking
hk.onHeldKeysChange((keys) => {
  console.log("Currently held:", keys);
});

theme-tokens.css

:root {
  --hk-card-bg: #e4e4da;
  --hk-card-border: rgba(26, 26, 23, 0.1);
  --hk-rule: rgba(26, 26, 23, 0.07);
  --hk-danger: #c45040;
}

keymap.json

{
  "entries": [
    { "name": "save", "shortcut": "ctrl+s" },
    { "name": "undo", "shortcut": "ctrl+z" }
  ]
}

---

Tables

Property	Type	Default	Description
target	HTMLElement	—	The element to listen on
timeout	number	1000	Sequence timeout in ms
suppress	boolean	true	Prevent default on match

A wider table:

Key	Code	keyCode	Deprecated	Layout-aware	Safe
a	KeyA	65	No	Yes	Yes
ArrowUp	ArrowUp	38	No	N/A	Yes
Alt	AltLeft	18	No	N/A	No

---

Asides

Note

This is a note aside. Use it for supplementary information.

Tip

This is a tip aside. Use it to highlight best practices.

Caution

This is a caution aside. Use it to warn about potential issues.

Danger

This is a danger aside. Matching on event.code instead of event.key will break on non-QWERTY layouts.

---

Badges

Inline badges: New Deprecated Beta Note Default Tip

Sizes: Small Medium Large

---

Cards

Safe by default

Matches on event.key, not event.code — works across all keyboard layouts.

Key sequences

Multi-chord shortcuts like Ctrl+K Ctrl+C with configurable timeout.

Held-keys tracking

Real-time tracking of which keys are currently pressed.

Shortcut recording

Built-in recordShortcut() utility with safety validation.

---

Link Cards

Getting Started Install and configure hotter-keys in your project.

Keymap Creator Visual keymap editor with persistence.

---

---

---

Standard HTML Elements

Images

Horizontal rule

---

Details / Summary

Expand to see raw keymap JSON

{
  "entries": [
    { "id": "1", "name": "save", "description": "Save file", "shortcut": "ctrl+s" },
    { "id": "2", "name": "undo", "description": "Undo last action", "shortcut": "ctrl+z" },
    { "id": "3", "name": "comment", "description": "Toggle comment", "shortcut": "ctrl+k ctrl+c" }
  ]
}

Keyboard input

Press Ctrl + K then Ctrl + C to comment a block.

Abbreviations

The API uses HTML keyboard events.

Small text

This is small text, useful for footnotes or fine print.

Superscript and subscript

E = mc² and H₂O.

---

Custom Components

Gauge

A standalone gauge at different values:

0 keys

2 keys

4 keys

6 keys

Fire Counter

0fired

7fired

42fired

128total

---

Interactive Demos

Playground

Command Bar (Layers)

Keymap Creator