An interactive tree to read JSON, with nodes that open and close. Use it to inspect a response, a config or any value you would otherwise print with JSON.stringify.
Click a node, or use the arrow keys, to open it. rootName names the tree.
withControls adds Expand all and Collapse all, and withCopyButton copies the whole JSON.
defaultExpandDepth opens more levels at the start. onValueSelect runs when a value is clicked or chosen with Enter.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | the data to show | unknown | - | - |
| defaultExpandDepth | levels that start open, the root always does | number | - | 1 |
| allExpanded | open every node | boolean | - | false |
| rootName | name of the tree, written before the root value | string | - | - |
| sortKeys | sort the keys of the objects | boolean | - | false |
| maxDisplayLength | children shown before a row says how many are left | number | - | 100 |
| withControls | show Expand all and Collapse all | boolean | - | false |
| withCopyButton | show a button that copies the JSON | boolean | - | false |
| copyLabel | text of the copy button | string | - | Copy JSON |
| copiedLabel | text of the copy button after it copied | string | - | Copied |
| expandAllLabel | text of the expand all button | string | - | Expand all |
| collapseAllLabel | text of the collapse all button | string | - | Collapse all |
| onValueSelect | called when a value, not a container, is chosen | (path: JsonPath, value: unknown) => void | - | - |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type JsonPath = Array<string | number> // keys and indexes, from the root
The ref points at the root div.
The viewer is a tree, named by rootName, aria-label or JSON. Each row is a treeitem with its level, position and, for a container, whether it is open. Only one row is in the tab order.
| Key | Action |
|---|---|
| Arrow Down and Up | Next and previous row |
| Arrow Right | Open the node, or go to its first child |
| Arrow Left | Close the node, or go to its parent |
| Home and End | First and last row |
| Enter and Space | Open or close a container, or choose a value |