Installation
Usage
Add Palette component to your root layout to enable shortcut overlay.
Register keyboard shortcuts with Shortcut component:
For focusing elements (like inputs), or clicking buttons, use Focus component:
This focuses the element it attaches to directly, as opposed to the Focus component, which wraps the children in a div and focuses that.
or attach shortcuts directly to an element using:
This focuses the element it attaches to directly, as opposed to the Focus component, which wraps the children in a div and focuses that.
For sequential key combinations (chords), use Chord component. Chords are different
from shortcuts - you press one combination (e.g., Cmd+K), then another (e.g., B) to activate
them. They take priority over shortcuts on conflicts.
Shortcuts appear in the Palette and run their actions, as long as the
component is mounted. That means you ca easily have different shortcuts in different routes of
your site.
Demo
Show Incant Palette
Press ? to open shortcut palette and see all registered shortcuts.
Or click the button it bottom right corner of the screen.
Use with links and buttons
Use with inputs
Press ⌥ (alt) to see the focus shortcut hint. Or press Ctrl+E to focus the input below.
Use with complex components
Press ⌥ (alt) to see the focus shortcut hint. Press ⌘J / Ctrl+J to focus the combobox.
Full combobox code from https://shadcn-svelte.com/docs/components/combobox
Key Chords
Press Ctrl+K, then B to open bookmarks. Press Esc to cancel an in-progress chord. Chords timeout after 1.5 seconds if not completed.
Try pressing: Ctrl+K → B
Or click the button below:
Rebind shortcuts
With showRebinding, every palette row grows a Rebind button. Click it, press the combination you want, and the shortcut re-registers on the spot — Esc cancels, ⌫ restores the declared combo. For chords, press each step and Enter to save. Overrides live in memory only, so a reload brings the declared
combos back.
Then open the palette and rebind, say, Ctrl+B to something else.
Keys derived from text
Call shortcut() with no keys and the first alphanumeric character
of the element's text becomes the shortcut, behind a modifier — Control by
default, set app-wide with deriveModifier. An <input> has no
text of its own, so its <label> is used instead.
Configuration
The Palette component accepts a position prop to control where the
trigger button appears:
Available positions:
- (default)
- (hides the trigger button)
The Palette component also accepts a showToggles prop to control whether
users can enable/disable shortcuts:
When showToggles=true, users can toggle individual shortcuts on/off using
the toggle buttons in the palette. When showToggles=false (default), the toggle
column is hidden and all shortcuts remain active.
Palette also carries the app-wide defaults. They apply to every shortcut,
chord and shortcut() attachment alike — a per-shortcut preventDefault still wins.
Change the chord window and then try Ctrl+K → B again:
Styling the reveal outline
Holding the reveal modifier (⌥ by default, see revealModifier) outlines every element that has a shortcut. That outline is a
class — .incant-revealed — rather than an inline style, so it never overrides
an outline of your own. Four custom properties control it:
There is deliberately no radius variable: outline follows the element's own border-radius, so a project with sharp edges gets sharp outlines for free,
and a rounded one gets rounded corners. The element that carries the outline differs
between the two APIs:
Pick a preset and reveal the outline — the left box is rounded, the right one is square: