Sections

Utilities

JSON Tree View

Display JSON data in an interactive, expandable tree.

Docs API

{ name: "John Doe", age: 30, email: "john.doe@example.com", … }

name: "John Doe"

age: 30

email: "john.doe@example.com"

tags: (3) [ "tag1", "tag2", "tag3" ]

address: { street: "123 Main St", city: "Anytown", state: "CA", … }

Installation


pnpm add @ark-ui/react lucide-react.json

Usage


import { JsonTreeView } from "@/components/ui/json-tree-view";
 
const data = { name: "John", age: 30, address: { city: "NYC" } };
 
<JsonTreeView data={data} defaultExpandedDepth={1} />

Examples

Different data types

Display various JavaScript data types including objects, arrays, primitives, dates, and special values.

{ name: "John Doe", email: "john.doe@example.com", age: 30, … }

name: "John Doe"

email: "john.doe@example.com"

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 }

Controlling expand level

Use the defaultExpandedDepth prop to control how many levels are expanded by default.

defaultExpandedDepth=0 (all collapsed)

{ user: Object }

defaultExpandedDepth=2

{ user: Object }

user: { profile: Object }

profile: { name: "Jane", settings: Object }

Map and Set

Native JavaScript Map and Set objects are supported.

{ preferences: Map(3), visitedPages: Set(3) }

preferences: Map(3) { "theme" => "dark", "language" => "en", "notifications" => "enabled" }

visitedPages: Set(3) { "/home", "/profile", "/settings" }

API Reference

JsonTreeView

Prop	Type	Default
`data`	`object`	-
`defaultExpandedDepth`	`number`	-
`renderValue`	`(node) => ReactNode`	-

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Different data types Controlling expand level Map and Set API Reference JsonTreeView