Panda Studio in v2

A CLI-generated token viewer is coming to v2 — panda studio, plus getTokenJson, getTokenHtml, and getTokenCss. Not in the beta yet.

⚠️

Coming soon. panda studio isn't in the v2 beta yet — it's still in progress. This page previews the shape so you can plan around it. For the shipped version, see Panda Studio.

What's coming

The v1 Panda Studio is a separate Astro app — install a framework, boot a server, self-host to share. The Rust migration removed that pipeline, so v2 has no built-in way to look at your tokens today.

panda studio brings token visualization back without the Astro weight. It writes styled-system/studio into your project and boots a live viewer:

panda studio                     # emit styled-system/studio + boot the viewer
panda studio --port 4137
panda studio --css ./studio.css  # render the viewer with your own stylesheet

styled-system/studio exports three framework-agnostic functions, modeled on Tiptap (opens in a new tab)'s getHTML / getJSON — small functions that each hand you one thing:

getTokenJson({ category, query }) — your tokens as data. Filter by category, search by query, or omit both for everything. Each token is { category, path, name, value, conditions? }, values fully resolved, with semantic tokens carrying their per-condition and per-theme values.
getTokenHtml({ tokens }) — semantic, style-free HTML. Names and values as text, everything else on data- attributes, all escaped. Drop it into any framework (dangerouslySetInnerHTML, v-html, innerHTML) or write it to a file.
getTokenCss(yourStylesheet) — takes your CSS and wires it up. It exposes each token's value as a --pds-value variable on the matching [data-value] element, then appends your stylesheet, so var(--pds-value) resolves to real token values.

Panda ships the content and the wiring, not the design. There's no default theme and no bundled stylesheet — the grid, swatches, and type are yours. A bare panda studio is plain until you pass --css.

import { getTokenJson, getTokenHtml, getTokenCss } from '../styled-system/studio'
import myCss from './studio.css?raw'
 
function Colors() {
  const [tokens, setTokens] = useState(getTokenJson({ category: 'colors' }))
  return (
    <div>
      <style>{getTokenCss(myCss)}</style>
      <input onChange={(e) => setTokens(getTokenJson({ category: 'colors', query: e.target.value }))} />
      <div dangerouslySetInnerHTML={{ __html: getTokenHtml({ tokens }) }} />
    </div>
  )
}

The generated module is self-contained — the runtime is inlined with your tokens baked in, so it imports nothing at runtime.

Panda Studio in v2

What's coming

See also