Skip to content
Devix Open Source
Search products /
devix.pk

Reference

Options

createCommandPalette(options)

Option Type Default What it does
items Command[] [] The commands. Add more with register().
hotkey string | false 'mod+k' The key that opens it. false to bind your own.
placeholder string "Type a command or search…"
sections string[] first-seen order Heading order.
recents string | false 'dxk.recents' localStorage key, or false to forget.
maxRecents number 8
limit number — Stop after this many rows.
search (query, { signal }) => Command[] | Promise<Command[]> — Your server's results, merged in.
debounce number 180 Milliseconds after the last keystroke.
minChars number 1 Before search is called.
footer boolean true The hint bar along the bottom.
theme 'light' | 'dark' | 'auto' 'auto' Follows the page.
container HTMLElement document.body Where the <dialog> lives.
classNames Partial<Record<PalettePart, string>> — Your classes on every part.
icons { search, back, enter } built-in SVG
strings Partial<PaletteStrings> English Every word it says.
onOpen / onClose () => void —
onSelect (command) => unknown — Before a command runs; return false to stop it.

A command

Field Type What it does
id string Stable identity: recents, updates and run(id) use it.
title string What people read, and what gets highlighted.
subtitle string Second line.
section string Heading.
keywords string[] Extra words that find it.
searchText string What search looks at instead of the title.
shortcut string 'mod+shift+n', 'g then p' — bound globally, drawn as keys.
icon string Leading markup.
meta string Trailing text.
disabled boolean Listed, greyed, skipped by the keyboard.
when () => boolean Hide it unless this is true.
keepOpen boolean Do not close after running.
children Command[] | (ctx) => Command[] | Promise<Command[]> A nested page.
perform (ctx) => void | Command[] | Promise<…> What it does. Returning commands opens a page.
data unknown Anything of yours.

The context handed to perform and children is { query, close(), push(page), pop() }.

The instance

Call Does
open(query?) / close() / toggle()
isOpen
register(...commands) Adds them; returns a function that removes exactly those again.
unregister(id) / setItems(list) / getItems()
push({ title, items }) / pop() Pages, by hand.
showShortcuts() The cheat sheet.
run(id) Runs a command as if it had been chosen.
destroy() Removes it and unbinds every key.

Shortcut strings

mod is ⌘ on a Mac and Ctrl everywhere else. Combine with +, sequence with then:

mod+k            mod+shift+p        alt+1
g then p         ctrl+alt+delete    ?

They are drawn with the platform's own symbols — ⌘⇧P on a Mac, Ctrl⇧P elsewhere. A bare letter never fires while the focus is in an input, a textarea or a contenteditable; a shortcut with a modifier still does.

Events

dx:paletteopen and dx:paletteclose bubble from the dialog element.

The core, without a DOM

import { rank, parseShortcut, shortcutKeys, isApple } from '@devix-labs/command-palette/core';

const rows = rank(commands, query, { recents, recentsLabel: 'Recent', sections });

rows are the headings and commands in the order they should be drawn, each with the ranges that matched — the same data the palette's own list renders.

Updated 15 Sep 2026