Json Tree

Tree component designed for showing JSON data.

Examples

Theme

This component uses the following default theme:

root{}(2 keys)

Learn more about how to customize in the Theme documentation.

API

Tree

Name	Type	Default
`data`	`{ [key: string]: any; }` The data to be rendered as a JSON tree.
`showAll`	`boolean` If true, all nodes in the JSON tree will be expanded by default.	`false`
`showAllLimit`	`number` The limit for the number of nodes to show when `showAll` is false.	`10`
`showCount`	`boolean` If true, the count of child nodes will be shown next to each node.	`true`
`showEmpty`	`boolean` If true, empty nodes will be shown in the JSON tree.	`true`
`ellipsisText`	`boolean` If true, long text in nodes will be truncated and replaced with an ellipsis.	`true`
`ellipsisTextLength`	`number` The maximum length of text in a node before it is truncated and replaced with an ellipsis.	`150`
`expandDepth`	`number` The depth at which the JSON tree nodes should be expanded by default.	`2`
`root`	`boolean` If true, the JSON tree will be rendered with a root node.	`true`
`className`	`string` The CSS class name to be applied to the JSON tree.

TreeNode

Name	Type	Default
`data`	`JsonTreeData` The data to be rendered as a JSON tree.
`className`	`string` The CSS class name to be applied to the JSON tree node.
`showCount`	`boolean` If true, the count of child nodes will be shown next to each node.
`showEmpty`	`boolean` If true, empty nodes will be shown in the JSON tree.
`depth`	`number` The depth of the JSON tree node. This is typically used for indentation purposes.
`showAll`	`boolean` If true, all nodes in the JSON tree will be expanded by default.
`showAllLimit`	`number` The limit for the number of nodes to show when `showAll` is false.
`expandDepth`	`number` The depth at which the JSON tree nodes should be expanded by default.
`theme`	`JsonTreeTheme` Theme for the Json Tree
`ellipsisText`	`boolean` If true, long text in nodes will be truncated and replaced with an ellipsis.
`ellipsisTextLength`	`number` The maximum length of text in a node before it is truncated and replaced with an ellipsis.

Last updated on June 4, 2026

Divider Navigation 🆕