Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

JSON Tree View for React

Show JSON as a tree people open level by level, from a starting depth you set, Maps and Sets included. For React, when a raw dump is too long to read.

Base UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { JsonTreeView } from "@/components/ui/json-tree-view";
const data = {
  name: "John Doe",
  age: 30,
  email: "[email protected]",
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const Example = () => (
  <div className="w-full max-w-md">
    <JsonTreeView data={data} defaultExpandedDepth={1} />
  </div>
);

Demos

Data Types

Expand Depth

Map Set

FAQ

How do I choose how much of the tree is open?

Set defaultExpandedDepth. With 1, the top level's children are open and deeper levels stay closed. The Expand Depth demo shows the values side by side.

Which values can it show?

Strings, numbers, booleans, null, arrays and objects, and also Maps and Sets, as the Map Set demo shows. Strings, numbers, booleans and null each get their own color from your theme's tokens.

How do I render a value my own way?

Pass renderValue. It is handed to the tree and receives each value's node, so you can return your own output, such as a link or a swatch, in place of the raw text.

Is it fast with a large JSON document?

It mounts lazily: branches are rendered when opened, and unmounted again when closed (lazyMount and unmountOnExit default to true). A closed branch of thousands of rows costs nothing until the user opens it.

What is it built on?

Ark UI's JSON tree view, on every UI library of the React catalog, with Tailwind classes for the colors, the indent guides and the chevron. In Vue, Svelte and Solid it is Ark UI's too.

How do I install JSON Tree View in React?

Run the command in the Installation section on this page. It adds the json-tree-view file and its dependencies: Ark UI and lucide-react for the chevron.

API Reference

JsonTreeView

data-slot="json-tree-view-tree"

PropType
dataunknown

The data to display in the tree.

arrow?React.ReactElement

The icon to use for the arrow.

canRename?(node: T, indexPath: IndexPath) → boolean

Function to determine if a node can be renamed.

Type
(node: T, indexPath: IndexPath) → boolean
Parameters

node – T

indexPath – IndexPath

Returns
boolean
checkedValue?string[]

The controlled checked node value.

collapseStringsAfterLength?number

How long a string can get before it's shortened, in characters.

defaultCheckedValue?string[]

The initial checked node value when rendered. Use when you don't need to control the checked node value.

defaultExpandedDepth?number

The default expand level.

defaultExpandedValue?string[]

The initial expanded node ids when rendered. Use when you don't need to control the expanded node value.

defaultFocusedValue?string | null

The initial focused node value when rendered. Use when you don't need to control the focused node value.

Type
string | null
defaultSelectedValue?string[]

The initial selected node value when rendered. Use when you don't need to control the selected node value.

expandedValue?string[]

The controlled expanded node ids.

expandOnClick?boolean

Whether clicking on a branch should open it or not.

Default
true
focusedValue?string | null

The value of the focused node.

Type
string | null
groupArraysAfterLength?number

How long an array can get before its items are shown in groups.

hideMode?"display-none" | "activity"

How to hide content when mounted but not present. - display-none: HTML hidden attribute. Effects stay alive. - activity: React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.

Type
"display-none" | "activity"
Default
"display-none"
id?string

The unique identifier of the machine.

ids?object

The ids of the tree elements. Useful for composition.

Type
{ root?: string; tree?: string; label?: string; node?: (value: string) → string }
indentGuide?boolean | React.ReactElement

The indent guide to use for the tree.

Type
boolean | React.ReactElement
lazyMount?boolean

Whether to enable lazy mounting. Ark default: false.

Default
true
loadChildren?(details: LoadChildrenDetails<T>) → Promise<T[]>

Function to load children for a node asynchronously. When provided, branches will wait for this promise to resolve before expanding.

Type
(details: LoadChildrenDetails<T>) → Promise<T[]>
Parameters

details – LoadChildrenDetails<T>

Returns
Promise<T[]>
maxPreviewItems?number

How many items a collapsed object or array previews.

onBeforeRename?(details: RenameCompleteDetails) → boolean

Called before a rename is completed. Return false to prevent the rename.

Type
(details: RenameCompleteDetails) → boolean
Parameters

details – { value: string; label: string; indexPath: IndexPath }

Returns
boolean
onCheckedChange?(details: CheckedChangeDetails) → void

Called when the checked value changes.

Type
(details: CheckedChangeDetails) → void
Parameters

details – { checkedValue: string[] }

Returns
void
onExpandedChange?(details: ExpandedChangeDetails<T>) → void

Called when the tree is opened or closed.

Type
(details: ExpandedChangeDetails<T>) → void
Parameters

details – ExpandedChangeDetails<T>

Returns
void
onFocusChange?(details: FocusChangeDetails<T>) → void

Called when the focused node changes.

Type
(details: FocusChangeDetails<T>) → void
Parameters

details – FocusChangeDetails<T>

Returns
void
onLoadChildrenComplete?(details: LoadChildrenCompleteDetails<T>) → void

Called when a node finishes loading children.

Type
(details: LoadChildrenCompleteDetails<T>) → void
Parameters

details – LoadChildrenCompleteDetails<T>

Returns
void
onLoadChildrenError?(details: LoadChildrenErrorDetails<T>) → void

Called when loading children fails for one or more nodes.

Type
(details: LoadChildrenErrorDetails<T>) → void
Parameters

details – LoadChildrenErrorDetails<T>

Returns
void
onRenameComplete?(details: RenameCompleteDetails) → void

Called when a node label rename is completed.

Type
(details: RenameCompleteDetails) → void
Parameters

details – { value: string; label: string; indexPath: IndexPath }

Returns
void
onRenameStart?(details: RenameStartDetails<T>) → void

Called when a node starts being renamed.

Type
(details: RenameStartDetails<T>) → void
Parameters

details – RenameStartDetails<T>

Returns
void
onSelectionChange?(details: SelectionChangeDetails<T>) → void

Called when the selection changes.

Type
(details: SelectionChangeDetails<T>) → void
Parameters

details – SelectionChangeDetails<T>

Returns
void
quotesOnKeys?boolean

Whether to show quotes on the keys.

renderValue?(node: JsonNodeHastElement) → React.ReactNode

The function to render the value of the node.

Type
(node: JsonNodeHastElement) → React.ReactNode
Parameters

node – JsonNodeHastElement

Returns
React.ReactNode
scrollToIndexFn?(details: ScrollToIndexDetails<T>) → void

Function to scroll to a specific index. Useful for virtualized tree views.

Type
(details: ScrollToIndexDetails<T>) → void
Parameters

details – ScrollToIndexDetails<T>

Returns
void
selectedValue?string[]

The controlled selected node value.

selectionMode?"single" | "multiple"

Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected

Type
"single" | "multiple"
Default
"single"
showNonenumerable?boolean

Whether non-enumerable properties show.

translations?object

Specifies the localized strings that identifies the accessibility elements and their states.

Type
{ treeLabel?: string; renameInputLabel?: string }
typeahead?boolean

Whether the tree supports typeahead search.

Default
true
unmountOnExit?boolean

Whether to unmount on exit. Ark default: false.

Default
true
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

CSS variableType
--depthstring