HelpDialog

function HelpDialog<S>(__namedParameters): Element;

Full-screen help dialog that displays keybinds from a KeybindRegistry.

The dialog auto-registers a toggle keybind (default ?) so users can open it without any extra wiring. Keybinds are grouped by scope, filtered in real-time, and displayed inside a scrollable overlay.

Type Parameters

Type Parameter
S extends string

Parameters

Parameter	Type
__namedParameters	HelpDialogProps<S>

Returns

Element

Examples

import { HelpDialog, createKeybindRegistry } from "@semos-labs/glyph";

const registry = createKeybindRegistry({
  global: [
    { key: "?", display: "?", description: "Show help", action: "help", command: "help" },
    { key: "q", display: "q", description: "Quit", action: "quit", command: "quit" },
  ],
  list: [
    { key: "j", display: "j / ↓", description: "Next item", action: "next" },
  ],
});

function App() {
  const [showHelp, setShowHelp] = useState(false);

  return (
    <Box style={{ flexDirection: "column", flexGrow: 1 }}>
      <MyContent />
      <HelpDialog
        registry={registry}
        context="list"
        helpOptions={{ scopeTitles: { global: "Global", list: "List" } }}
        open={showHelp}
        onClose={() => setShowHelp(false)}
        toggleKey="?"
      />
    </Box>
  );
}

// Disable the built-in toggle keybind and manage it yourself
<HelpDialog
  registry={registry}
  context="editor"
  open={helpVisible}
  onClose={() => setHelpVisible(false)}
  toggleKey={null}
/>

---

Type Parameters

Type Parameter	Default type
S extends string	string

Properties

Property	Type	Description
backdropStyle?	Style	Optional style overrides for the backdrop overlay.
children?	ReactNode	Optional additional content rendered below the keybind list.
context	S	The currently active scope (determines which keybinds are shown first). Additional scopes (including global) are appended automatically.
filterPlaceholder?	string	Placeholder text for the filter input. Default: "Filter shortcuts…".
height?	number | `${number}%`	Height of the dialog card. Default: "80%".
helpOptions?	HelpOptions<S>	Options forwarded to KeybindRegistry.getKeybindsForHelp, including scope titles and related scopes.
keyColumnWidth?	number	Width of the shortcut key column (columns). Default: 12.
onClose	() => void	Called when the dialog should close (e.g. Escape pressed).
open	boolean	Whether the help dialog is currently visible. When false, nothing is rendered.
registry	KeybindRegistry<S>	The keybind registry to display help from.
style?	Style	Optional style overrides for the dialog card.
title?	string	Title shown at the top of the dialog. Default: "Keyboard Shortcuts".
toggleKey?	string | null	Key combo that toggles the dialog open / closed. Default: "?". Set to "" or null to disable the built-in keybind (you’ll manage toggling yourself).
width?	number	Width of the dialog card (columns). Default: 48.