Studio

Studio shows your design system in the browser: every token, which ones your code uses, and every place a raw value was written instead of a token. Run it in your project:

pnpm panda studio

It opens studio.panda-css.com (opens in a new tab) connected to a local server, and updates as you save your code or your config. Nothing from your project is uploaded.

Browsing your tokens

Tokens shows every category with a layout that fits it: color swatches, type specimens, spacing and size scales, shadows, and motion that animates. Click a token to copy its name.

• Semantic colors split into one band per condition, so light and dark sit side by side. Hover a band to see which condition it is.
• Type categories render a preview line at every step. Edit it to see your own copy.
• Filter a category by name with the box above the tokens.

Press ⌘K (Ctrl K on Windows and Linux) to search the whole system: tokens, values, references, recipes, patterns, conditions, and themes. Picking a token opens it. Picking anything else copies its name.

If you have more than one theme, pick one from the Theme menu to see only the tokens it overrides.

Checking token usage

Usage has two views.

Project scan shows how many tokens your code uses in each category. Open a category to see the tokens nothing uses. Below that, every value that isn't a token is grouped by value, with the files and lines it's on and the token that matches it when there is one. Click a file to see its code next to its issues.

Playground checks one style object at a time, with the Panda compiler running in your browser. It flags values as you type:

css({
  color: 'bleu.500', // Not in your system → blue.500
  p: '16px', // Hard-coded → 4
  bg: '#3b82f6' // Hard-coded
})

Click a suggestion to apply it, or Fix all to apply every one.

Usage is counted the same way as panda analyze.

Changing the port or browser behavior

pnpm panda studio --port 3001  # default 6420
pnpm panda studio --no-open    # print the link instead of opening a browser

See panda studio for every flag.

Opening Studio without the CLI

Run panda codegen --spec, then drop styled-system/specs/design-system.json on studio.panda-css.com (opens in a new tab). You can also paste the JSON, or an https link to the file, like a GitHub URL. Studio keeps a link in the address as #url=, so if the file is public, the page is a link you can share.

To see usage without the CLI watching, run:

pnpm panda analyze --outfile panda-usage.json

Then open the report on the Usage page. If you can't run the CLI, Scan a folder reads your source in the browser instead. It's less precise than a report.