feat(cli): add panda studio - #3663
Closed
Adebesin-Cell wants to merge 10 commits into
Closed
Conversation
🦋 Changeset detectedLatest commit: d417c88 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@Adebesin-Cell is attempting to deploy a commit to the Chakra UI Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
segunadebayo
changed the title
Adebesin-Cell
changed the title
Adebesin-Cell
force-pushed
the
feat/cli-studio-clean
branch
from
July 17, 2026 19:06
ecced3e to
3a0c1ca
Compare
This was referenced Jul 17, 2026
Add `panda studio` (a live vanilla token viewer) and `panda studio generate` (emit token views as source for React/Solid). Both read a generated tokens.json snapshot and present tokens the way the removed v1 Astro studio did — colors by family, typography samples, spacing/sizes scale — kept light in HTML/CSS/JS.
Emit @Keyframes CSS from config so animation tokens run live in the viewer and generated views, and animate an easing dot with each token as the timing function.
Give the live viewer a sidebar shell (category nav with scroll-spy, theme toggle) matching the old studio layout, add a filter box, and persist the filter query in the URL.
Track the active category from scroll position so short trailing sections (e.g. breakpoints) highlight correctly at the bottom of the page.
Adebesin-Cell
force-pushed
the
feat/cli-studio-clean
branch
from
July 18, 2026 05:09
0adcf2e to
d417c88
Compare
Collaborator
Author
|
Consolidated into #3666 — the full |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Description
panda studiovisualizes your design tokens. It replaces the removed v1 Astro studio with two lighter tracks that share one token snapshot:panda studio— a live viewer built from plain HTML/CSS/JS (no framework, no bundler).panda studio generate— emits the token views into your project as source, shadcn-style, so you render them wherever you document your design system.Both read a generated
tokens.jsonsnapshot. Re-run to refresh after a config change. Design rationale lives indesign-notes/cli-studio-generate.md.⛳️ Current behavior (updates)
The v1 studio (
@pandacss/studio, an Astro app) was removed in the Rust migration. There's no built-in way to look at your resolved tokens.🚀 New behavior
panda studioboots a local viewer with a sidebar shell (category nav + scroll-spy + theme toggle), matching the old studio layout but kept light in vanilla HTML/CSS/JS. Each category is presented the way the old studio did:It follows your system light/dark theme, has a filter box whose query persists in the URL (
?q=), and takes--port.panda studio generatewrites one component per category plus a shared grid intostyled-system/studio(--outdirto change). Views matchconfig.jsxFramework(React or Solid), reuse the same presentation, and don't import the styled-system runtime, so they render anywhere. You own the files and re-run to refresh.💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
Notes:
studioandstudio generateare routed as leaf commands incli-mainrather than a citty subcommand group, so space-separated flags (panda studio --port 4000) parse correctly.Test plan:
pnpm --filter @pandacss/cli test— studio unit + command tests and help snapshots passpanda studio generateinsandbox/storybook— generated React views typecheck under strict, and a*.stories.tsximporting them compiles against the sandbox tsconfigpanda studioagainst the sandbox — the viewer serves the snapshot and renders the sandbox tokens in light and dark; search filters and round-trips through?q=; animations and easings run🧬 Stack
panda studio(base)