Svelte Command Palette

Increase your productivity exponentially. 🚀🚀

Get started with command-palette with 2.1Kb Minified and ~700B Gzipped + Minified

Demo

Features

• 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

Installation

Install svelte-command-palette with npm

  npm install svelte-command-palette

Usage/Examples

<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}>

API

Component Styling API

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.

Action API

	actionId?: ActionId;
	canActionRun?: (args: onRunParams) => boolean;
	title: string;
	description?: string;
	subTitle?: string;
	onRun?: (args: onRunParams) => void;
	keywords?: Array<string>;
	shortcut?: string;

Store Methods

Get palette methods from createStoreMethods.

import { createStoreMethods } from 'svelte-command-palette`

const methods = createStoreMethods();

method.openPalette();

API

    togglePalette: () => void;
    getAllCalledActions: () => ActionId[];
    storeCalledAction: (id: ActionId) => void;
    revertLastAction: (id: ActionId) => void;
    resetActionLog: () => void;
    openPalette: () => void;
    closePalette: () => void;
    resetPaletteStore: () => void;