Command Palette

Try It

Press ⌘K (Mac) or CtrlK to open the palette, or use the button below. Type to filter, use arrow keys to navigate, and press Enter to select. Try "Pick DOM elements" for a drill-down demo.

Select a command to see events here...

Usage

Define commands as JSON in a script tag, then drop in the component.

<!-- 1. Define your commands -->
<script type="application/json" data-palette>
[
  { "name": "save", "description": "Save document" },
  { "name": "pick-thing", "description": "Pick a thing", "keepOpen": true }
]
</script>

<!-- 2. Add the component -->
<command-palette></command-palette>
<script src="command-palette.js"></script>

<!-- 3. Listen for events -->
<script>
const palette = document.querySelector('command-palette');
palette.addEventListener('save', () => {
  console.log('Save triggered!');
});
</script>

Dynamic Data & Drill-down

Use keepOpen to prevent closing on selection, then setCommands() to swap in new items. Press Backspace on an empty input to go back.

// Command with keepOpen stays open on select
{ "name": "pick-dom", "description": "Pick DOM elements", "keepOpen": true }

// Handle the event: swap in dynamic data
palette.addEventListener('pick-dom', () => {
  const elements = [...document.querySelectorAll('[class]')].map(el => ({
    name: 'element-picked',
    description: `<${el.tagName.toLowerCase()}> .${[...el.classList].join('.')}`
  }));
  palette.setCommands(elements, {
    placeholder: 'Pick an element...'
  });
});

// The palette auto-resets to the original
// commands when closed or dismissed

API

Methods, events, and keyboard shortcuts.

// Open / close programmatically
palette.open();
palette.close();

// Replace commands dynamically (resets on close)
palette.setCommands(commands, {
  placeholder: 'Pick something...',  // optional
  label: 'Elements'               // optional aria-label
});

// Each selected command fires a CustomEvent
// where event.type === command.name
palette.addEventListener('theme-toggle', (e) => {
  console.log(e.detail.command);
  // { name: "theme-toggle", description: "Toggle theme" }
});