サンプル

まずは、以下の公式デモで zudo-design-token-panel を試してみてください。どちらも、このリポジトリにある現行ビルドで動作するため、公開済みのリリースより先の機能を含む場合があります。実際に動作しているバージョンは各ページに表示されます。ソースへの書き戻しにはローカル開発用のサイドカーが必要なため、公開サイトでは Apply を無効にしています。

公式デモ

• 最小構成 — HTML、エントリーモジュール、トークンのスタイルシート、PanelConfig を 1 ファイルずつ用意した、動作に必要な最小限の構成です。初めて試す場合はこちらから始めてください。 examples/minimal/ のソースを見る

• フルプレイグラウンド — すべてのコントロール種別と prose ページをまとめて確認できます。?manifest=zudo-doc では、実際の zudo-doc から取り込んだ PanelConfig が動作します。 playground/ のソースを見る

フレームワーク別の組み込み例

以下のサンプルは現在の機能セットより前に作られたもので、各スタックへ組み込む際の配線を確認するためのリファレンスとして残しています。ホストが提供する tabs: TabConfig[] 配列への接続と、変更をソースへ反映する bin サーバーの併用方法を示しています。また、各デモには、そのデモ固有のトークン名前空間で Markdown 由来の HTML 要素を一通り確認できる /prose ページがあります。

• Astro — @takazudo/zdtp 0.2.0-next.2 を使用しています。 ライブデモ · GitHub ソース — Astro サイトへパネルを組み込みます。Astro 開発サーバーでのホスト設定と bin の apply パイプラインを示します。 Prose ページ では、--astro-* トークン名前空間に対してすべての prose 要素を確認できます。

• Vite + React — @takazudo/zdtp 0.2.2 を使用しています。 ライブデモ · GitHub ソース — Vite + React アプリからパネルを使います。compat shim により Preact ランタイムと React が共存する構成を示します。 Prose ページ では、--vr-* トークン名前空間に対してすべての prose 要素を確認できます。

• Next.js — @takazudo/zdtp 0.2.2 を使用しています。 ライブデモ · GitHub ソース — Next.js App Router プロジェクトへパネルを組み込み、Next 開発サーバーと bin サーバーを並行実行します。 Prose ページ では、--nx-* トークン名前空間に対してすべての prose 要素を確認できます。

• zfb — @takazudo/zdtp 0.2.2 を使用しています。 ライブデモ · GitHub ソース — zfb プロジェクトへパネルを組み込みます。Vite 組み込みのプロキシ機構ではなく、devMiddleware プラグインフックを apply プロキシに使います。apply エンドポイント URL には base プレフィックス全体が必要です。経緯は PROBE-REPORT.md を参照してください。 Prose ページ では、--zfb-* トークン名前空間に対してすべての prose 要素を確認できます。

• zfb + Tailwind v4 — @takazudo/zdtp 0.2.2 を使用しています。 ライブデモ · GitHub ソース — zfb サンプルを Tailwind v4 対応に拡張します。@theme ブロックで Tailwind のデザインシステム名前空間にトークンを登録するため、text-body や p-hsp-md のようなユーティリティクラスがビルド時にパネルのカスタムプロパティへ解決されます。 Prose ページ では、@layer components 経由でユーティリティクラスを適用し、--zfbtw-* トークン名前空間に対してすべての prose 要素を確認できます。