JSON 樹檢視器
可收合的 JSON 樹：型別配色、路徑複製、展開動畫。
以等寬字型遞迴渲染任何 JSON 資料：字串綠、數字藍、布林橘、null 紅，物件與陣列可展開收合（高度動畫加箭頭旋轉，並顯示項數摘要），滑過任一列即可一鍵複製該節點的路徑或值，適合 API 除錯面板與開發者工具。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
<JsonTreeViewer />
安裝
npx shadcn@latest add https://webberui.com/r/json-tree-viewer.json或在 components.json 設定 registries 後，改用 @webberui/json-tree-viewer 安裝。
安裝依賴後，從 registry JSON（/r/json-tree-viewer.json 的 files[0].content）複製 json-tree-viewer.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { JsonTreeViewer } from "@/components/ui/json-tree-viewer";
<JsonTreeViewer
data={{ name: "Webber", stars: 1024, tags: ["ui", "react"], beta: false }}
defaultExpandDepth={2}
rootName="$"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
data | JsonValue | — | 要渲染的 JSON 資料（物件、陣列或任何原始值） |
defaultExpandDepth | number | 2 | 預設展開的層數，0 全部收合、Infinity 全部展開 |
rootName | string | "$" | 複製路徑時的根名稱，例如 $ 或 data |
className | string | — | 透傳到最外層容器，與內建樣式合併 |
可及性
- 展開／收合為原生
button，附aria-expanded與含節點路徑的中文aria-label，鍵盤 Enter 與 Space 皆可操作 - 「複製路徑／複製值」按鈕在鍵盤聚焦（focus-visible）時同樣會顯現，不依賴滑鼠 hover
- 複製成功以圖示切換為打勾提供視覺回饋，且按鈕保持可見 1.4 秒
- 使用者系統開啟「減少動態效果」時，展開收合與箭頭旋轉改為即時切換，不播放高度動畫