Install

このページはまだ翻訳されていません。原文のまま表示しています。

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

@takazudo/zdtp is a regular npm package. It works in any project that can render a Preact island — Astro, Vite + React, Next.js, or a plain Vite SPA — because the public surface is just a configurePanel({...}) call plus a Preact-rendered shell.

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. Each command installs the panel package and its single peer dependency, Preact.

pnpm

pnpm add @takazudo/zdtp preact

npm

npm install @takazudo/zdtp preact

yarn

yarn add @takazudo/zdtp preact

bun

bun add @takazudo/zdtp preact

📝 Preact is a peer dependency

The panel UI is rendered with Preact and declares it as a peerDependency at ^10.29.1. You bring your own copy so the panel and any other Preact islands in your app share one runtime — installing it twice would split the runtime and break event delegation across roots.

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 CLI reference lives on its own page once the reference section is in place. The short version:

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

Peer-dependency compatibility

The package’s package.json declares the following peer:

| Peer | Range | Why | | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | | preact | ^10.29.1 | The panel UI is Preact-rendered. Sharing one Preact runtime with the rest of your app is mandatory — see the note above. |

ℹ️ 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 Three Frameworks for a side-by-side comparison of Astro / Vite + React / Next.js setups.