Studio

Studio (opens in a new tab) renders your design system: every token, theme and condition, laid out the way each category deserves. Run panda codegen --spec to write styled-system/specs/design-system.json, then drop that file in — or the whole styled-system/ folder — and you're looking at it. Nothing leaves your browser.

View your tokens

Every category paints in a layout that fits it. Colors and gradients as swatches, spacing and sizes as a sorted scale, fonts as specimens, durations and easings as live chips, and everything else as a name/value table. Click any token to copy its name.

Discovered themes and a light/dark switch let semantic tokens show their real values, so colors.fg reads as the color it resolves to rather than a reference you have to chase.

Analyze token usage

Drop your source files, or the whole repo folder, and Studio reports per category which tokens are used, unused, and hot. There are two tiers, and what you drop picks one:

• Include your panda.config.ts and the real Panda compiler runs in your browser through @pandacss/compiler-wasm. Counts are exact, down to bare-numeric tokens like spacing.4.
• Leave it out and a name-match scan runs instead. Accurate for named tokens like red.500, approximate for numeric ones.

A badge on the report says which tier ran. Everything stays in the browser.

Share a link

The Share button saves the current system and gives you a read-only link at /s/<slug> that anyone can open. Share from Analyze and the usage report travels with it, at /a/<slug>.

No account, no ownership: make a spec, get a link, send it. Sharing is the one action that stores anything, so treat the link as public.

Build your own

Studio reads the same file you can. To render tokens in your own docs site or Storybook, see JSON Spec.

Learn more

The Studio announcement walks through all three tracks.