- Fuzzy search powered by fuse.js
- Run actions conditionally
- Super simple API, just define your actions and it just works!
- Advanced conditional actions - decide whether to run your action based on the current state of your command palette
- Access to
paletteStore, update your update palette store from anywhere to make updates to your command-palette. - Keyboard shortcuts - define keyboard shortcuts for your actions!
and more
Install svelte-command-palette with npm
npm install svelte-command-palette<script> import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette' // define actions using the defineActions API const paletteMethods = createStoreMethods(); const actions = defineActions([ { title: "Open Svelte Command Palette on github", subTitle: "This opens github in a new tab!", onRun: ({ action, storeProps, storeMethods }) => { window.open("https://github.com/rohitpotato/svelte-command-palette") }, shortcut: "Space k" } ]) </script> // render your command palette at the root of your application, say _layout.svelte <button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button> <CommandPalette commands={actions}> The <CommandPalette /> component accepts the following optional properties for styling:
| Property | Type | Default | Description |
|---|---|---|---|
| unstyled | boolean | false | When true, the default styles are not applied to the modal elements. |
| placeholder | string | "Search for actions" | Placeholder for the command palette input |
| overlayClass | string | null | null | Class name for the palette overlay. |
| paletteWrapperInnerClass | string | null | null | Class name for the cmd palette wrapper element. |
| inputClass | string | null | null | Class name for the cmd palette input. |
| resultsContainerClass | string | null | null | Class name for the results container. |
| resultContainerClass | string | null | null | Class name for the result item container. |
| optionSelectedClass | string | null | null | Class name for the currently selected result item. |
| titleClass | string | null | null | Class name for the result title. |
| subtitleClass | string | null | null | Class name for the result subtitle. |
| descriptionClass | string | null | null | Class name for the result description. |
| keyboardButtonClass | string | null | null | Class name for the keyboard shortcuts. |
| overlayStyle | Record<string, string | number> | {} | Style properties of the overlay. |
| paletteWrapperInnerStyle | Record<string, string | number> | {} | Style properties of the command palette wrapper element. |
| inputStyle | Record<string, string | number> | {} | Style properties of cmd palette input. |
| resultsContainerStyle | Record<string, string | number> | {} | Style properties of results container. |
| resultContainerStyle | Record<string, string | number> | {} | Style properties result item container. |
| titleStyle | Record<string, string | number> | {} | Style properties for result item title. |
| subtitleStyle | Record<string, string | number> | {} | Style properties for result item subtitle. |
| descriptionStyle | Record<string, string | number> | {} | Style properties for result item description. |
| optionSelectedStyle | Record<string, string | number> | {} | Style properties selected result item. |
| keyboardButtonStyle | Record<string, string | number> | {} | Style properties for the keyboard shortcut. |
actionId?: ActionId; canActionRun?: (args: onRunParams) => boolean; title: string; description?: string; subTitle?: string; onRun?: (args: onRunParams) => void; keywords?: Array<string>; shortcut?: string; Get palette methods from createStoreMethods.
import { createStoreMethods } from 'svelte-command-palette` const methods = createStoreMethods(); method.openPalette(); togglePalette: () => void; getAllCalledActions: () => ActionId[]; storeCalledAction: (id: ActionId) => void; revertLastAction: (id: ActionId) => void; resetActionLog: () => void; openPalette: () => void; closePalette: () => void; resetPaletteStore: () => void;