shortcuts-wc

Keyboard shortcuts help overlay. Press ? to see all bound shortcuts.

Description

The <shortcuts-wc> component provides a keyboard shortcuts help overlay, similar to GitHub's ? shortcut or Gmail's shortcut reference. Place it once in your layout and press ? to see all currently bound keyboard shortcuts grouped by source.

Basic Usage

Drop <shortcuts-wc> anywhere on the page. It renders nothing visible — it only binds the ? hotkey. Press ? on this page to try it (it's already included in the layout).

<!-- Place once per page, typically in your layout --> <shortcuts-wc></shortcuts-wc>

How It Works

When opened, the overlay reads from the command registry (window.__commandRegistry) to find all registered commands that have a data-shortcut attribute. Shortcuts are displayed grouped by their data-command-group.

<!-- Shortcuts overlay discovers data-shortcut bindings automatically --> <shortcuts-wc></shortcuts-wc> <!-- These shortcuts appear in the overlay --> <button data-command="Toggle Dark Mode" data-shortcut="meta+shift+t"> Dark Mode </button> <button data-command="Save Draft" data-shortcut="meta+s"> Save </button>

Shortcut Sources

Source How it appears
[data-command][data-shortcut] elements Label from data-command, group from data-command-group
? itself "Show keyboard shortcuts" in "General" group (always present)

Keyboard Support

Key Action
?Open/close the shortcuts overlay
EscapeClose the overlay

The ? hotkey does not fire when focus is inside an input, textarea, or content-editable element.

Accessibility

  • Opens as native <dialog> with focus trapping
  • Escape closes (native dialog behavior)
  • Shortcuts displayed using <kbd> elements
  • Platform-aware formatting (⌘ on Mac, Ctrl on others)