Two direct runtime dependencies

Tokens you can touch.

This page is a plain Vite app. Open the panel, change a color or spacing value, and watch the same CSS custom properties redraw this page.

Loading build provenance…

One small config.

The swatches below use the exact color variables listed in the panel's Theme tab.

Copy this setup

The whole integration.

Install the published package, define a PanelConfig, import the documented stylesheet export, then configure and open the panel.

pnpm add @takazudo/zdtp preact

panel-config.ts

import type { PanelConfig } from '@takazudo/zdtp';

export const panelConfig = {
  storagePrefix: 'my-panel',
  consoleNamespace: 'myPanel',
  modalClassPrefix: 'my-panel-modal',
  schemaId: 'my-tokens/v1',
  exportFilenameBase: 'my-tokens',
  tabs: [{
    id: 'theme',
    label: 'Theme',
    tiers: [{
      id: 'colors',
      label: 'Colors',
      items: [{
        id: 'accent',
        cssVar: '--my-accent',
        label: 'Accent',
        default: '#5b4be7',
        type: { kind: 'color' },
      }],
    }],
  }],
} satisfies PanelConfig;

main.ts

import '@takazudo/zdtp/styles';
import {
  configurePanel,
  showDesignTokenPanel,
} from '@takazudo/zdtp';
import { panelConfig } from './panel-config';
import './tokens.css';

configurePanel(panelConfig);
showDesignTokenPanel();

tokens.css

:root {
  --my-accent: #5b4be7;
}

h1 {
  color: var(--my-accent);
}

Apply is disabled here

This static site has no local sidecar or source files to write, so its config intentionally omits applyEndpoint. Browser edits and JSON export still work. Follow the apply pipeline setup for the local write-back round trip.

Know what you are running

Workspace build, built at an unknown time. To reproduce this exact live build, clone the repository at commit unknown. The copyable snippet above was also checked against npm latest.