Install

Install @takazudo/zdtp into any pnpm, npm, yarn, or bun project.

@takazudo/zdtp is a regular npm package. It works in browser hosts such as Astro, Vite + React, Next.js, plain Vite and ZFB 3/4. The configurePanel({...}) call mounts a separate Preact-rendered shell; the host keeps its own renderer.

This page covers installing the package itself. For wiring it into your layout, see Quickstart.

Install the package

Pick the invocation that matches your project's package manager. ZDTP owns Preact as a regular dependency. Imperative hosts need only the panel package; their JSX runtime can remain React or zudo-react.

pnpm

pnpm add @takazudo/zdtp

npm

npm install @takazudo/zdtp

yarn

yarn add @takazudo/zdtp

bun

bun add @takazudo/zdtp

ZDTP owns Preact

Since 0.8.6, Preact ^10.29.1 is a regular dependency rather than a peer. Public declarations still use Preact types, resolved through that dependency. Hosts rendering their own Preact JSX or @takazudo/zdtp/dashboard should declare their own Preact and SSR dependencies. ZDTP does not bundle a private runtime; keep the panel tree separate from other renderers.

Verify the install

Once the install completes, the package exposes three things you can sanity-check from your project root:

The library entry — @takazudo/zdtp (calls configurePanel, renders the panel).
The Astro entries — @takazudo/zdtp/astro/DesignTokenPanelHost.astro (the <DesignTokenPanelHost> component, imported directly so Astro compiles it) and @takazudo/zdtp/astro (config types plus helpers). The host adapter is the side-effect import @takazudo/zdtp/astro/host-adapter.
The CLI bin — zdtp-server, used by the apply pipeline (see below).

You can confirm the bin is on the path inside your project with:

pnpm exec zdtp-server --help
# or
npx zdtp-server --help

If the help text prints, the package is installed correctly.

The apply-pipeline bin

The package ships an executable named zdtp-server. It runs alongside your dev server, listens on a loopback port, and rewrites your token CSS files when the user clicks Apply in the panel.

You can ignore this for now

The bin is optional — the panel is fully functional in export/import mode without it. Wire it in once you want users (or you yourself in dev) to push panel tweaks back to disk.

The full command and security contract is in the zdtp-server CLI reference. The short version:

npx zdtp-server \
  --routing ./panel-routing.json \
  --write-root ./tokens \
  --allow-origin http://localhost:5173

Runtime dependency boundary

ZDTP installs Preact, @tailwindcss/browser, tailwind-merge and culori as regular dependencies. The Tailwind compiler is behind the DOM Tweaker's lazy activation boundary: ordinary panel opening does not load or execute it. This is not a Tailwind-free installation; a companion package or optional entry would be a separate compatibility decision. Moving dependencies to optionalDependencies would still install them by default.

For ZFB 3/4, import the panel in getScope().onActivate() and cancel a pending import when the island is disposed. Configure and destroy the returned handle inside that lifecycle. Do not pass Preact VNodes to the host's zudo-react renderer.

Info

The panel's CSS is self-contained. It ships its own bundled stylesheet under the panel-private --tokentweak-* namespace. Tailwind is not required in your project to consume the panel.

No styles import needed

The panel injects its own stylesheet at runtime — when the panel first opens it appends a <style> element carrying the bundled CSS. You do not need to import the CSS yourself. The @takazudo/zdtp/styles (and /styles.css) export still resolves to the bundled stylesheet and remains available if you prefer to pull the CSS into your own stylesheet pipeline, but it is now optional.

Next step

You're installed. Head to Quickstart for the smallest end-to-end wiring, or to Frameworks Comparison for a side-by-side comparison of Astro / Vite + React / Next.js setups.