Design Token KitGet Started

CLI

Generate a showcase

Create a static HTML preview from token documents or existing CSS.

Generate a showcase

Use dtokens showcase to generate a static HTML preview of your design tokens.

dtokens showcase tokens.json --out ./showcase.html

Supported sources

The showcase command accepts:

  • DTCG JSON;
  • HRDT YAML;
  • DESIGN.md;
  • existing CSS.

CSS input can contain:

  • classic :root custom properties;
  • Tailwind CSS v4 @theme variables;
  • theme override selectors.

Generate from tokens

DTCG JSON

dtokens showcase tokens.json --out ./showcase.html

HRDT YAML

dtokens showcase tokens.yaml --out ./showcase.html

DESIGN.md

dtokens showcase DESIGN.md --out ./showcase.html

Generate from CSS

dtokens showcase tokens.css --out ./showcase.html

A single CSS source can be rendered directly without passing through token validation.

Open the result

Use --open together with --out:

dtokens showcase tokens.json \
  --out ./showcase.html \
  --open

--open requires an output file because the browser needs a generated HTML document to open.

Read from standard input

cat tokens.yaml | dtokens showcase - --out ./showcase.html

Options

  • -o, --out <file> — output HTML file name or path;
  • --open — open the generated file in the default browser.

When --out is only a file name, the CLI writes the showcase to the system temp directory. Pass a path with a directory segment, such as ./dist/showcase.html, to control the output location.

Typical package script

{
  "scripts": {
    "tokens:showcase": "dtokens showcase tokens.json --out ./showcase.html"
  }
}