Playground

Playground Guide

The playground is a production-oriented workspace for shaping command UX before wiring everything in your app.

Use it to define command architecture, test keyboard/navigation behavior live, and export starter code for React, Vue, Preact, Astro, and Core (Vanilla).

What you can do in the playground

• model command structure before writing integration code
• preview nested navigation and active-item flow in real time
• configure light/dark tokens and check visual parity quickly
• validate copy, search placeholder, empty state, and close label
• export framework-specific starter snippets from one source of truth

Workspace map

• Live preview: embedded palette that updates from configurator state
• Configurator: accordion-based control surface with progressive disclosure
• Code panel: adapter tabs with syntax-highlighted export and copy action
• Open preview action: keeps modal palette flow available for real interaction checks

Controls map: Basics

• Language: switches configurator labels and default generated copy
• Palette title: top heading in the command dialog
• Search placeholder: input placeholder text
• Shortcut: keyboard trigger string used in generated config
• Recent items: toggle + title + limit for recents section
• Data mode: static sections or async source scaffold
• Open on load: exported default-open state

Controls map: Appearance

• Theme target (Light / Dark): choose which mode to edit
• Accent / Surface / Text: main semantic tokens
• Title / Description / Muted: typography hierarchy tokens
• Section title / Item title / Item subtitle / Shortcut: list-level token granularity
• Border / Overlay: container + backdrop behavior
• Radius: rounded corners with live visual preview
• Shadow presets: quick depth presets plus optional advanced shadow value

The generated code now includes both modes under one theme object (theme.light + theme.dark) so exports remain complete and consistent.

Controls map: Sections and commands

• Add / move / remove section: high-level information architecture
• Section title: visible command group label
• Add / move / remove item: command-level ordering and maintenance
• Item fields: title, icon, subtitle, shortcut, href, keywords, disabled
• Nested commands: drill-down groups under an item for multi-step flows
• Nested section controls: add/move/remove nested sections and nested items

Controls map: Code and export panel

• Adapter tabs: React, Vue, Preact, Astro, Core (Vanilla)
• Copy action: copies current snippet with success/error feedback
• Expand snippet: partial-collapse editor view with animated expand/collapse
• Live sync: snippets update automatically from configurator state

Export examples

import { CommandPalette } from "@cmd-kit/react";

const sections = [
  {
    id: "commands",
    title: "Commands",
    items: [{ id: "toggle-theme", title: "Toggle theme", shortcut: "mod+t" }]
  }
];

const theme = {
  light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
  dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
};

export function Demo() {
  return (
    <CommandPalette
      sections={sections}
      shortcut="mod+k"
      title="Command menu"
      messages={{
        searchPlaceholder: "Search commands...",
        noResults: "No results found.",
        closeLabel: "Close command palette"
      }}
      recents={false}
      theme={theme}
    />
  );
}

<script setup lang="ts">
import { CommandPalette } from "@cmd-kit/vue";

const sections = [{ id: "commands", title: "Commands", items: [] }];
const theme = {
  light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
  dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
};
</script>

<template>
  <CommandPalette
    :sections="sections"
    :theme="theme"
    shortcut="mod+k"
    title="Command menu"
  />
</template>

import { createCommandPalette } from "@cmd-kit/core";

const palette = createCommandPalette({
  sections: [{ id: "commands", title: "Commands", items: [] }],
  theme: {
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
  },
  shortcut: "mod+k",
  title: "Command menu"
});

window.addEventListener("beforeunload", () => palette.destroy());

Guided flow #1: Quick start (10 minutes)

1. Set language and title in Basics.
2. Create your top-level sections and 3-5 core commands.
3. Wire item subtitles + shortcuts to improve command scanning.
4. Tune placeholder/no-results/close copy to match product tone.
5. Open preview and validate keyboard flow end-to-end.
6. Export your target adapter and integrate into app code.

Guided flow #2: Dual-theme setup

1. Switch Theme target to Light and set all core tokens.
2. Switch to Dark and mirror the same semantic token intent.
3. Check preview in both modes from the preview mode switch.
4. Verify item title/subtitle/shortcut contrast and focus readability.
5. Export code and confirm both theme.light and theme.dark are present.

Guided flow #3: Information architecture and nested flows

1. Define high-level sections by user intent (navigation, actions, settings).
2. Place frequent commands at the top of each section.
3. Use nested sections only for true drill-down flows.
4. Add keywords for commands that users might search with alternative terms.
5. Use disabled state only for intentional, contextual commands.

Guided flow #4: Async source preparation

1. Switch data mode to Async source.
2. Set realistic delay to simulate your backend latency envelope.
3. Validate loading transitions and no-results behavior.
4. Export snippet and replace mock source with real API client.
5. Keep payload shape aligned with section/item schema.

Pre-production checklist

• keyboard open/close and arrow navigation validated
• nested back-navigation and breadcrumbs validated
• light/dark parity validated across dialog, items, and shortcuts
• copy/messages localized by app i18n layer
• generated snippet normalized to project lint/style rules
• real async/error states validated in app runtime

FAQ