Code Editor With Command Palette

Command palette

Run anything from one keystroke

Cmd-K opens a fuzzy index of every command, file, and route in the workspace. Drop the block onto your page and it just works — keyboard shortcuts wired in.

workspace.tspalette.config.tstokens.css
// Configure the workspace
import { workspace } from "@beste/workspace";
// Bind palette to ⌘K
const ws = await workspace.create({ name: "acme" });
// Register commands
ws.command("deploy.production");
ws.command("logs.tail");
// Wire fuzzy search index
ws.index("routes", "files");
export default ws;
⌘K

Recently used

Workspace

↑↓ to navigate · ↵ to runOpen palette
About this block

Code Editor With Command PalettePRO

Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase18

Code Editor With Live Logs

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

PRO

showcase20

Code Editor With Environments Panel

Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.

PRO

showcase14

Code Editor With Upload Drawer

Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required.

PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.

PRO

showcase23

Component Preview With Code Editor

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.

PRO

showcase28

Markdown Editor With Live Preview

Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.