Interactive Examples & Use Cases

Explore practical implementations of Keybound. Every example is wired with live dispatch handlers, smart inline comments, and interactive feedback widgets.

JSX Mnemonics & Letter Positioning

Use & anywhere in button or label text. The compiler automatically transforms it into an underlined mnemonic with Alt+* keyboard intent.

Press Alt+S, Alt+X, or Alt+C to test live activation.

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

// 2. Mid-word mnemonic compiles to Alt+X with underlined 'x'
<button onClick={handleExport}>E&xport</button>

// 3. Double ampersand escapes literal '&' and marks 'C' for Alt+C
<button onClick={handleSaveAndClose}>Save && &Close</button>

Hotkey Attribute on Inputs & Toggles

Attach hotkey='mod+k' to text fields for instant focus, or to switches and buttons for direct toggles.

Quick Search (⌘K / Ctrl+K)

⌘K

Press Esc to exit input focus

Toggle Switch (Alt+A)

Autosave changes

allowInInput enables chord during focus

// 1. Focus search input on Command/Ctrl+K
<input hotkey="mod+k" placeholder="Search..." aria-label="Search" />

// 2. Toggle switch control on Alt+A
<button role="switch" hotkey="alt+a" aria-checked={autosave}>

  <span>Autosave</span>

</button>

// 3. Command palette trigger on Command/Ctrl+Shift+P
<button hotkey="mod+shift+p" onClick={openPalette}>

  Command Palette

</button>

Manual Component Wrappers

Use <Mnemonic> and <Hotkey> wrappers directly in standard React with identical runtime behavior and zero compiler configuration.

// 1. Import zero-compiler manual wrappers from react-keybound
import { Mnemonic, Hotkey } from "react-keybound";

// 2. Wrap button with Mnemonic component to bind Alt+S
<Mnemonic text="&Save">

  <button onClick={handleSave}>Save</button>

</Mnemonic>

// 3. Wrap input with Hotkey component to bind Command/Ctrl+K
<Hotkey keys="mod+k" label="Search">

  <input placeholder="Search..." aria-label="Search" />

</Hotkey>

Rich Content & Dynamic Primitives (useMnemonic)

When buttons contain icons, badges, or localized text, use useMnemonic to generate triggerProps and a clean label without replacing child elements.

// 1. Import useMnemonic hook for rich or dynamic child content
import { useMnemonic } from "react-keybound";

// 2. Configure mnemonic with custom action and styling
export function UploadButton({ onUpload }: { onUpload: () => void }) {

  // Label contains formatted underline; text is clean accessible text
  const { label, text, triggerProps } = useMnemonic<HTMLButtonElement>(

    "&Upload to Cloud",

    {

      action: "click",

      className: "text-ember font-semibold underline",

    }

  );

  return (

    <button {...triggerProps} onClick={onUpload} title={text}>

      <Cloud className="size-4" />

      <span>{label}</span>

    </button>

  );

}

Headless Application Commands (useHotkey)

Headless ⌘S / Ctrl+SDispatches: 0

Press ⌘S or Ctrl+S anywhere on this page to trigger the headless handler.

// 1. Import headless useHotkey hook
import { useHotkey } from "react-keybound";

// 2. Headless application shortcut without a visual DOM target
export function DocumentEditor() {

  // Register global shortcut with automatic preventDefault
  useHotkey("mod+s", (e) => {

    e.preventDefault();

    saveDocument();

  }, { label: "Save document" });

  // Escape key handler scoped to the active component
  useHotkey("escape", () => {

    dismissEditor();

  }, { label: "Dismiss" });

  return <div className="editor">...</div>;

}

Modal Scope Isolation & Collision Resolution

Wrap dialogs in <KeyboundScope modal active={open}> to automatically block background hotkeys and prioritize nested dialog bindings.

Modal Scope Boundary

Open the modal to isolate keyboard dispatch. Background chords will be blocked.

// 1. Import KeyboundScope for keyboard isolation
import { KeyboundScope } from "react-keybound";

// 2. Modal dialog component with isolated keyboard hierarchy
export function ConfirmModal({ isOpen, onClose, onConfirm }) {

  return (

    // Modal scope blocks all background shortcuts while active
    <KeyboundScope active={isOpen} modal name="confirm-dialog">

      <div role="dialog" aria-modal="true">

        <h3>Confirm action</h3>

        {/* Deepest scope wins: Alt+S inside modal triggers onConfirm */}
        <button onClick={onConfirm}>&Save changes</button>

        {/* Alt+C triggers cancel inside modal */}
        <button onClick={onClose}>&Close</button>

      </div>

    </KeyboundScope>

  );

}

Dispatch-Time Eligibility & Input Suppression

Keybound inspects the live DOM at keypress time. Disabled, hidden, or inert elements are bypassed, and typing inside text fields suppresses normal shortcuts.

Disable buttonHide button (display: none)

Input Field Typing Test:Press Esc to exit focus and re-enable global shortcuts

// 1. Disabled controls are automatically skipped at dispatch time
<button disabled onClick={handleDelete}>&Delete</button>

// 2. Hidden or display:none controls are skipped
<button style={{ display: isVisible ? "block" : "none" }}>&Hidden</button>

// 3. Typing in text inputs suppresses letter mnemonics automatically
<input placeholder="Typing 's' will not trigger Alt+S..." />

// 4. Opt-in with allowInInput if you want an in-field shortcut
useHotkey("escape", clearInput, { allowInInput: true });

Visual Overlay Hints & Engine Registry

Render floating badges over all eligible elements using <KeyboundOverlay /> and query live bindings using useKeyboundCommands() or <KeyboundHelp />.

Floating badges position relative to DOM rects.

Live Engine Registry0 active bindings

No active bindings mounted.

// 1. Import provider, visual overlay, and accessible help list
import { KeyboundProvider, KeyboundOverlay, KeyboundHelp } from "react-keybound";

// 2. Root application setup with dynamic hint controls
export function App() {

  const [overlayOpen, setOverlayOpen] = React.useState(false);

  return (

    <KeyboundProvider reveal="modifier" mnemonicModifier="alt">

      {/* Floating badges anchored to eligible buttons */}
      <KeyboundOverlay open={overlayOpen} />

      {/* Accessible reference list of currently eligible shortcuts */}
      <KeyboundHelp className="shortcut-sheet" />

    </KeyboundProvider>

  );

}