Desktop-style mnemonics & hotkeys for React

Keyboard intent that feels native.

Winforms-esque mnemonics and hotkeys in a single package. Write &Save or E&xport directly in JSX.

Documentation Star on GitHub

i react-keybound

Mobile Engine Controller

0 active registers

Direct registry mirror: tap virtual pads to dispatch actual chords through the Keybound engine.

Cues

⌘K

Log

Awaiting key chord

Dispatches: 0Latency: < 0.5ms

Shortcut overlay

Underline

Active scope

ModifierAlt / Option

Hints anchorcalc(-100% - 6px)

01 / Interactive patterns

First-class Components

annual_report.pdf1.4 MB · Document

v2.4

Click or pressAlt+X

<button>E&xport</button>

PressAlt+Xto trigger without breaking natural word flow.

Cloud Document SyncWorkspace Revisions

Autosave revisionsAutomatic snapshot on change

All changes saved in cloud

hotkey="alt+a"

PressAlt+Ato toggle custom switches or native inputs.

Security Policy DialogIsolated Precedence

Scoped overlayTraps keys within boundary

<KeyboundScope modal>

Scoped precedence:Escdismisses while background chords stay blocked.

02 / Integration

Compile-time setup & JSX annotations

JSX AnnotationsCompile-time transform

// 1. Initial letter mnemonic compiles to Alt+S
<button onClick={save}>&Save</button>

// 2. Mid-word mnemonic compiles to Alt+X
<button onClick={exportDoc}>E&xport</button>

// 3. Hotkey attribute compiles to ⌘K or Ctrl+K focus
<input hotkey="mod+k" aria-label="Search" />

Build SetupNext.js & Vite

import { withKeybound } from "react-keybound/next";

// 1. One-line wrapper for your Next.js config
export default withKeybound({});

// 2. (Optional) Register custom UI components (e.g. shadcn Button)
export default withKeybound({}, { components: ["Button"] });

Ready to build?

Bring desktop-grade keyboard intent to your React apps.

Install via your favorite package manager.

Documentation GitHub