Svelte Incant

A keyboard shortcut management library for Svelte.
Press ? to see it in action. Or hold ⌥ to see the shortcut hints.

GitHub

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

Link

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 to focus the combobox.

Key Chords

Press Win 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: Win K → B

Or click the button below:

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.