Examples

Start with one of the first-party demos below. Both run the current in-repo build of zudo-design-token-panel, which may be ahead of the published release. Each page shows the exact version it is running. Apply is disabled on these public sites because writing changes back to source requires a local development sidecar.

First-party demos

• Minimal setup — The smallest wiring that works: one HTML file, one entry module, one token stylesheet, and one PanelConfig. Start here. View the source in examples/minimal/.

• Full playground — Explore every control kind, prose pages, and ?manifest=zudo-doc, which runs the real vendored zudo-doc PanelConfig. View the source in playground/.

Framework integration references

The following examples predate the current feature set and are kept as wiring references for their respective stacks. Each wires the panel against a host-supplied tabs: TabConfig[] array, plus the companion bin server for applying tweaks back to source. Every example also ships a /prose page that exercises the full range of markdown-generated HTML elements against the demo's token namespace.

• Astro — pins @takazudo/zdtp 0.2.0-next.2. 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 --astro-* token namespace.

• Vite + React — pins @takazudo/zdtp 0.2.2. 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 --vr-* token namespace.

• Next.js — pins @takazudo/zdtp 0.2.2. 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 --nx-* token namespace.

• zfb — pins @takazudo/zdtp 0.2.2. 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 PROBE-REPORT.md for context. Prose page exercises all prose elements against the --zfb-* token namespace.

• zfb + Tailwind v4 — pins @takazudo/zdtp 0.2.2. 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 --zfbtw-* token namespace, with utility classes applied via @layer components.