shadcn.io is not affiliated with official shadcn/ui

Components

Free

JSON Tree View for Svelte

Display JSON data in an interactive, expandable tree.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

<script 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

PreviewCode

Expand Depth

PreviewCode

Map Set

PreviewCode

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) → Snippet

The function to render the value of the node.

Type: (node: JsonNodeHastElement) → Snippet
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?Snippet<[PropsFn]>

Render your own element: a snippet that gets the part's props to spread on it.

Type: Snippet<[PropsFn]>

class?string

Merged with the part's classes.

CSS variableType

--depthstring