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.

Getting Started / GitHub / Features

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, or Next.js — 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, or Next.js. 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, and Next.js. The example apps live alongside the panel package on GitHub.

GitHub

Source code, issues, and release notes for zudo-design-token-panel.

Example Apps

Reference integrations across three popular stacks. The links point at the examples/ directory in the GitHub repo. The example apps are coming soon — these links may 404 until the examples land.