shadcn.io is not affiliated with official shadcn/ui
Installation
Usage
<script setup lang="ts">
import { JsonTreeView } from "@/components/ui/json-tree-view";
</script>
const data = {
name: "John Doe",
age: 30,
email: "john.doe@example.com",
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
API Reference
JsonTreeView
data-slot="json-tree-view-tree"
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– TindexPath– 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.
quotesOnKeys?boolean
Whether to show quotes on the keys.
renderValue?(node: JsonNodeHastElement) → VNode
The function to render the value of the node.
- Type
(node: JsonNodeHastElement) → VNode- 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.
class?string
Merged with the part's classes.
@before-rename(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
@checked-change(details: CheckedChangeDetails) → void
Called when the checked value changes.
- Type
(details: CheckedChangeDetails) → void- Parameters
details– { checkedValue: string[] }- Returns
void
@expanded-change(details: ExpandedChangeDetails<T>) → void
Called when the tree is opened or closed.
- Type
(details: ExpandedChangeDetails<T>) → void- Parameters
details– ExpandedChangeDetails<T>- Returns
void
@focus-change(details: FocusChangeDetails<T>) → void
Called when the focused node changes.
- Type
(details: FocusChangeDetails<T>) → void- Parameters
details– FocusChangeDetails<T>- Returns
void
@load-children-complete(details: LoadChildrenCompleteDetails<T>) → void
Called when a node finishes loading children.
- Type
(details: LoadChildrenCompleteDetails<T>) → void- Parameters
details– LoadChildrenCompleteDetails<T>- Returns
void
@load-children-error(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
@rename-complete(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
@rename-start(details: RenameStartDetails<T>) → void
Called when a node starts being renamed.
- Type
(details: RenameStartDetails<T>) → void- Parameters
details– RenameStartDetails<T>- Returns
void
@selection-change(details: SelectionChangeDetails<T>) → void
Called when the selection changes.
- Type
(details: SelectionChangeDetails<T>) → void- Parameters
details– SelectionChangeDetails<T>- Returns
void
--depthstring