Getting Started

1. Install

pnpm add @dev-bench/components

react >= 18 (or preact ^10) must be installed in the host app. Install zod ^3.24 only if you plan to use zodAdapter.

2. Import the styles

Component styles are shipped as CSS files so you can import only what you use:

import "@dev-bench/components/styles/tokens.css";       // CSS custom properties
import "@dev-bench/components/styles/components.css";   // shared primitives
import "@dev-bench/components/console/styles.css";      // ConsolePanel + TraceTree
import "@dev-bench/components/object-inspector/styles.css";

tokens.css defines the design tokens (color, spacing, typography). The component-specific stylesheets reference those tokens, so always load tokens.css first.

3. Render an inspector

import { ObjectInspector, inferredAdapter } from "@dev-bench/components";

const session = {
  user: { id: 42, email: "ada@example.com" },
  flags: { beta: true, paid: false },
  events: ["login", "view-doc", "click"],
};

export function DebugPanel() {
  return (
    <div style={{ width: 360, padding: 16 }}>
      <ObjectInspector adapter={inferredAdapter} value={session} />
    </div>
  );
}

Use inferredAdapter to inspect any plain JS value. Swap in zodAdapter to drive the inspector from a Zod schema (gives you typed editing + validation).

4. Add the console panel

import { ConsolePanel, type ConsoleEntry } from "@dev-bench/components";

const entries: ConsoleEntry[] = [
  { kind: "log",   id: "1", level: "info",  at: Date.now(), parts: ["server up"] },
  { kind: "log",   id: "2", level: "warn",  at: Date.now(), parts: ["slow query: 240ms"] },
  { kind: "error", id: "3", level: "error", at: Date.now(), error: { message: "boom" } },
];

export function Console() {
  return <ConsolePanel entries={entries} />;
}

The panel ships with filter chips, group collapsing, and timestamp formatting toggles — see ConsoleFeatures in the API for what you can opt out of.

5. Wire up Cmd-K

import { CommandPalette, type CommandAction } from "@dev-bench/components";
import { useState } from "react";

const actions: CommandAction[] = [
  { id: "clear-logs", label: "Clear logs",   run: () => {/* ... */} },
  { id: "toggle-net", label: "Toggle network", run: () => {/* ... */} },
];

export function CmdK() {
  const [open, setOpen] = useState(false);
  return (
    <CommandPalette
      open={open}
      onOpenChange={setOpen}
      actions={actions}
    />
  );
}

6. Browse the rest

The full export surface — primitives, hooks, tweak panels, http inspector — is listed in the API reference.