Awesome

Svelte Command Palette

Increase your productivity exponentially. 🚀🚀

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

Demo

svelte-command-palette

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;