docs/utilities/json-tree-view
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Display JSON data in an interactive, expandable tree.
PreviewCode
{ name: "John Doe", age: 30, email: "[email protected]", … }
name: "John Doe"
age: 30
email: "[email protected]"
address: { street: "123 Main St", city: "Anytown", state: "CA", … }
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/json-tree-view
import { JsonTreeView } from "@/registry/react/components/json-tree-view";
const data = { name: "John", age: 30, address: { city: "NYC" } };
<JsonTreeView data={data} defaultExpandedDepth={1} />
Display various JavaScript data types including objects, arrays, primitives, dates, and special values.
PreviewCode
{ name: "John Doe", email: "[email protected]", age: 30, … }
name: "John Doe"
email: "[email protected]"
age: 30
balance: 1234.56
score: -42
isActive: true
isVerified: false
avatar: null
createdAt: 2024-01-15T14:22:00.000Z
lastLogin: 2024-01-12T00:00:00.000Z
tags: (3) ["user", "premium", "verified"]
0: "user"
1: "premium"
2: "verified"
length: 3
scores: (5) [95, 87, 92, …]
0: 95
1: 87
2: 92
3: 78
4: 100
length: 5
address: { street: "123 Main St", city: "Anytown", state: "CA", … }
street: "123 Main St"
city: "Anytown"
state: "CA"
zip: 12345
coordinates: { lat: 37.7749, lng: -122.4194 }
Use the defaultExpandedDepth prop to control how many levels are expanded by default.
PreviewCode
defaultExpandedDepth=0 (all collapsed)
{ user: Object }
defaultExpandedDepth=2
{ user: Object }
user: { profile: Object }
profile: { name: "Jane", settings: Object }
Native JavaScript Map and Set objects are supported.
PreviewCode
{ preferences: Map(3), visitedPages: Set(3) }
preferences: Map(3) { "theme" => "dark", "language" => "en", "notifications" => "enabled" }
visitedPages: Set(3) { "/home", "/profile", "/settings" }
| Prop | Type | Default |
|---|---|---|
data | object | - |
defaultExpandedDepth | number | - |
renderValue | (node) => ReactNode | - |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Hitbox ](/docs/utilities/hitbox)[
Next page
Presence ](/docs/utilities/presence)
On This Page
InstallationUsageExamplesDifferent data typesControlling expand levelMap and SetAPI ReferenceJsonTreeView