Examples

Reference integrations for zudo-design-token-panel across five popular stacks. Each example wires the panel against a host-supplied TokenManifest and ColorClusterConfig, plus the companion bin server for applying tweaks back to source. Every example ships a /prose page that exercises the full range of markdown-generated HTML elements against the demo’s token namespace.

Try it

• Astro — Live demo · GitHub source — Drop the panel into an Astro site. Demonstrates host-config wiring with an Astro dev server and the bin apply pipeline. Prose page exercises all prose elements against the --astroexample-* token namespace.
• Vite + React — Live demo · GitHub source — Use the panel from a Vite + React app. Shows how the Preact runtime coexists with React via the compat shim. Prose page exercises all prose elements against the --vitereact-* token namespace.
• Next.js — Live demo · GitHub source — Wire the panel into a Next.js app router project, including the bin server side-by-side with the Next dev server. Prose page exercises all prose elements against the --nextexample-* token namespace.
• zfb — Live demo · GitHub source — Integrate the panel into a zfb project. Uses the devMiddleware plugin hook for the apply proxy (instead of Vite’s built-in proxy mechanism). The apply-endpoint URL is fully base-prefixed — see <code>examples/<wbr/>zfb/<wbr/>PROBE-<wbr/>REPORT.<wbr/>md</code> for context. Prose page exercises all prose elements against the --zfbexample-* token namespace.
• zfb + Tailwind v4 — Live demo · GitHub source — Extends the zfb example with Tailwind v4. Tokens are registered via an @theme block into Tailwind’s design-system namespaces so utility classes like text-body and p-hsp-md resolve to the panel’s custom properties at build time. Prose page exercises all prose elements against the --zfbtailwindexample-* token namespace, with utility classes applied via @layer components.