HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Shortcut OverlayView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows every control's shortcut and what it does while a key is held.ExperimentalSince 0.216.0NavigationUsageimport'@fusion.dev/helix/shortcut-overlay'import'@fusion.dev/helix-headless/shortcut-overlay'Preview
API ReferenceRoothelix-shortcut-overlayShows every control's shortcut and what it does while a key is held.
PropTypeDescriptiondelaynumberDefault600How long the key is held before the badges show, in milliseconds or as 0.6s.emptyLabelstringDefault"No shortcuts on this screen."What the sheet says when the page has no shortcuts.hold"alt"|"ctrl"|"mod"|"shift"Default"mod"The key a reader holds: mod (Command on an Apple keyboard, Control
elsewhere), alt, ctrl, or shift.labelstringDefault"Keyboard shortcuts"The sheet's name and heading.sheetKeysstringDefault"?"The chord that opens the sheet, ? by default, which a press in a text
field never answers. Empty leaves the key to the page, which wants it
where the page already answers ? itself.
ReadTypeDescriptionshowingbooleanWhether the badges are showing.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
MethodTypeDescriptionhide() => voidTakes the badges away.hideSheet() => voidCloses the sheet.show() => voidDraws a badge beside every control on screen that has a shortcut.showSheet() => voidOpens the sheet listing every shortcut on the page.
PartDescriptionbadgeOne control's badge.badge-keysA badge's keys.badge-nameA badge's name for the control.badgesThe layer the badges are drawn in.emptyWhat the sheet says when the page has no shortcuts.keysA row's keys.listThe sheet's list.nameA row's name for what the shortcut does.rowOne shortcut in the sheet.sheetThe dialog listing every shortcut.sheet-bodyThe dialog's body part.sheet-dismissThe dialog's dismiss part.sheet-dismiss-markThe dialog's dismiss-mark part.sheet-footerThe dialog's footer part.sheet-headerThe dialog's header part.sheet-surfaceThe dialog's surface part.
CSS PropertyDescription--shortcut-overlay-badge-background-colorThe badge's fill. Defaults to surface-inverse.--shortcut-overlay-badge-border-widthThe badge's edge. Defaults to border-floating, which a theme sets to zero where a shadow alone lifts a surface.--shortcut-overlay-badge-colorThe badge's text. Defaults to foreground-inverse.--shortcut-overlay-badge-max-inline-sizeThe widest a badge grows before its name ends in an ellipsis. Defaults to 16rem.--shortcut-overlay-badge-shadowThe badge's lift. Defaults to shadow-floating.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.showingWhile the badges are drawn.
Roothelix-headless-shortcut-overlayShows every control's shortcut and what it does while a key is held.
PropTypeDescriptiondelaynumberDefault600How long the key is held before the badges show, in milliseconds or as 0.6s.emptyLabelstringDefault"No shortcuts on this screen."What the sheet says when the page has no shortcuts.hold"alt"|"ctrl"|"mod"|"shift"Default"mod"The key a reader holds: mod (Command on an Apple keyboard, Control
elsewhere), alt, ctrl, or shift.labelstringDefault"Keyboard shortcuts"The sheet's name and heading.sheetKeysstringDefault"?"The chord that opens the sheet, ? by default, which a press in a text
field never answers. Empty leaves the key to the page, which wants it
where the page already answers ? itself.
ReadTypeDescriptionshowingbooleanWhether the badges are showing.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
MethodTypeDescriptionhide() => voidTakes the badges away.hideSheet() => voidCloses the sheet.show() => voidDraws a badge beside every control on screen that has a shortcut.showSheet() => voidOpens the sheet listing every shortcut on the page.
PartDescriptionbadgeOne control's badge.badge-keysA badge's keys.badge-nameA badge's name for the control.badgesThe layer the badges are drawn in.emptyWhat the sheet says when the page has no shortcuts.keysA row's keys.listThe sheet's list.nameA row's name for what the shortcut does.rowOne shortcut in the sheet.sheetThe dialog listing every shortcut.sheet-bodyThe dialog's body part.sheet-dismissThe dialog's dismiss part.sheet-dismiss-markThe dialog's dismiss-mark part.sheet-footerThe dialog's footer part.sheet-headerThe dialog's header part.sheet-surfaceThe dialog's surface part.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.showingWhile the badges are drawn.
Examples
NameDescriptionPreviewHold Command, or Control, to see each control's shortcut and what it does.PreviewHold Command, or Control, to see each control's shortcut and what it does.