JSON Viewer Tree

ProNew

A tree built from any JSON value that shows keys with value previews, uses JSONPath-style ids and copies the path of the selected node. Use this when developers inspect API responses or config files.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultExpandedDepth1

Guide and examples

When to use it

Use it for API consoles, log viewers and config editors where people need to find a field and get its path.

Do not use it to edit JSON (it is read-only) or for huge payloads (virtualise with virtual-tree).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`unknown`	-	Any JSON value.
`onCopyPath`	`(path) => void`	`clipboard`	Called with the path.
`defaultExpandedDepth`	`number`	`1`	Levels open at the start.

Accessibility

Each row's name is "key, kind, preview" ("active, boolean, true").
Copying works from the button and from Ctrl or Cmd+C on a row; the result is announced.
If the clipboard is unavailable the path is shown in the message instead.

Testing

The pattern ships with a Testing Library test (json-viewer-tree.test.tsx) that covers the conversion to paths, the spoken row and copying.

Guide and examples

When to use it

Use it for API consoles, log viewers and config editors where people need to find a field and get its path.

Do not use it to edit JSON (it is read-only) or for huge payloads (virtualise with virtual-tree).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`unknown`	-	Any JSON value.
`onCopyPath`	`(path) => void`	`clipboard`	Called with the path.
`defaultExpandedDepth`	`number`	`1`	Levels open at the start.

Accessibility

Each row's name is "key, kind, preview" ("active, boolean, true").
Copying works from the button and from Ctrl or Cmd+C on a row; the result is announced.
If the clipboard is unavailable the path is shown in the message instead.

Testing

The pattern ships with a Testing Library test (json-viewer-tree.test.tsx) that covers the conversion to paths, the spoken row and copying.