Zudo Token Panel
A Preact-based live design-token tweak panel and companion Node bin server. Adjust CSS custom properties in the browser and persist the changes back to your source files through the apply pipeline.
zudo-design-token-panel is a standalone OSS port of the design-token-panel originally built inside zmodular. It is host-config-driven, so the same panel works in Astro, Vite + React, Next.js, or zfb — your app supplies a TokenManifest and ColorClusterConfig, and the panel handles the rest. MIT licensed.
What it does
Live token tweaking
Drag sliders and color pickers in a docked panel to tune CSS custom properties — colors, spacing, typography — and watch your running app update in real time.
Apply to source
When a tweak feels right, the companion Node bin server rewrites the underlying token files atomically so your changes land in source control instead of vanishing on reload.
Framework-agnostic
Drop the panel into Astro, Vite + React, Next.js, or zfb. The runtime is plain Preact and the apply pipeline is a small Node binary, so it slots into whatever stack your product team already uses.
Host-config-driven
Consumers supply their own TokenManifest and ColorClusterConfig. The panel infers the right controls from your tokens — no hard-coded assumptions about your design system baked into the tool.
Explore
Getting Started
Install the panel, wire up your TokenManifest, and start tweaking tokens against your local dev server.
Example Apps
Reference integrations across Astro, Vite + React, Next.js, zfb, and zfb + Tailwind v4. The example apps live alongside the panel package on GitHub, with live demos deployed.
GitHub
Source code, issues, and release notes for zudo-design-token-panel.
Example Apps
Reference integrations across five popular stacks. Each card links to the
live demo; source code lives in the examples/ directory on GitHub.
Astro
Drop the panel into an Astro site. Demonstrates host-config wiring
with an Astro dev server and the bin apply pipeline.
GitHub source
Vite + React
Use the panel from a Vite + React app. Shows how the Preact runtime
coexists with React via the compat shim.
GitHub source
Next.js
Wire the panel into a Next.js app router project, including the bin
server side-by-side with the Next dev server.
GitHub source
zfb
Integrate the panel into a zfb project. Uses the plugin
devMiddleware hook for the apply proxy and a
base-prefixed apply-endpoint URL.
GitHub source
zfb + Tailwind v4
Extends the zfb example with Tailwind v4. Tokens are registered via
an @theme block so utility classes resolve to panel
custom properties at build time.
GitHub source