Getting Started
@takazudo/zdtp is a browser-side design-token editor that mounts as a collapsible side panel in your app. Developers open it from the browser devtools console, tweak CSS custom properties live via sliders and colour pickers, and optionally push the edits back to source files through the companion bin server — no browser extensions, no build-step round-trips.
The panel is framework-agnostic. Its public surface is a single configurePanel({...}) call that runs once at app boot. Host adapters exist for Astro, Vite + React, and Next.js; the zfb and zfb + Tailwind v4 example apps show how the same wiring works in other Preact-capable hosts.
Every token family — spacing, typography, size, colour, easing, or any custom domain — is declared once as a tabs: readonly TabConfig[] array. The panel iterates that array at mount time to build the tab strip and all editor rows. No package change is needed to add a new token family; only a host-config update is required.
Where to start
- Install — add the package and peer dependency to your project.
- Quickstart — declare a minimal
tabsmanifest and toggle the panel from the devtools console. - Architecture — the three-layer overview and the abstract token-tier model that unifies all tab types.