Palette Store

The palette store is a standard Svelte store that holds all command palette state. Subscribe to it, update it, and extend it with your own properties.

Store Structure

The store contains the following properties:

Property	Type	Description
`isVisible`	`boolean`	Whether the palette is currently open
`textInput`	`string`	Current search query
`commands`	`action[]`	All registered actions
`results`	`action[]`	Filtered search results
`activeCommandId`	`string \| number \| null`	Currently highlighted action ID
`selectedCommandId`	`string \| number \| null`	Last selected action ID
`calledActions`	`Array<ActionId>`	History of executed action IDs
`actionMap`	`object`	Map of actionId to action object
`storeMethods`	`object`	Methods to control the palette

Subscribing & Updating

Use standard Svelte store patterns to interact with the palette:

  
Store Usage

import { paletteStore } from '$lib';

// Subscribe to store changes
paletteStore.subscribe((state) => {
  console.log('Visibility:', state.isVisible);
  console.log('Search text:', state.textInput);
  console.log('Active command:', state.activeCommandId);
  console.log('Called actions:', state.calledActions);
});

// Update the store
paletteStore.update((state) => ({
  ...state,
  textInput: 'prefilled search',
  isVisible: true
}));

Store Methods

Use createStoreMethods() to get helper functions:

  
Store Methods

import { createStoreMethods } from '$lib';

// Create store methods
const { openPalette, closePalette, togglePalette } = createStoreMethods();

// Open programmatically
<button onclick={() => openPalette()}>
  Open Command Palette
</button>

// Or toggle
document.addEventListener('keydown', (e) => {
  if (e.key === 'p' && e.metaKey) {
    togglePalette();
  }
});

Available Methods

`openPalette()`

Opens the command palette and focuses the search input

`closePalette()`

Closes the palette and clears the search

`togglePalette()`

Toggles the palette visibility

Extending the Store

Add your own properties to track custom state:

  
Custom State

// Add custom state to track user preferences
paletteStore.update((state) => ({
  ...state,
  // Your custom properties
  lastUsedActions: [],
  favoriteActions: ['action-1', 'action-2'],
  settings: {
    showDescriptions: true,
    maxResults: 10
  }
}));

// Access in action callbacks
const actions = defineActions([
  {
    title: 'Toggle Descriptions',
    onRun: ({ storeProps }) => {
      paletteStore.update(s => ({
        ...s,
        settings: {
          ...s.settings,
          showDescriptions: !storeProps.settings.showDescriptions
        }
      }));
    }
  }
]);

💡

Pro tip: The calledActions array persists across palette opens. Use it to implement features like "recently used" or conditional action chains.

Reactive Store in Components

Access the store reactively in Svelte components:

  
+page.svelte

<script>
  import { paletteStore } from '$lib'; // Use 'svelte-command-palette' in your project
  
  // Reactive access
  $: isOpen = $paletteStore.isVisible;
  $: searchQuery = $paletteStore.textInput;
  $: resultCount = $paletteStore.results.length;
</script>

{#if isOpen}
  <div class="status">
    Searching: "{searchQuery}" ({resultCount} results)
  </div>
{/if}