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:

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;