Data display
JSON Tree View
An expandable, syntax-coloured tree view of any JSON value.
{ id: "Q-1041", title: "Something is eating the bell-r…", hall: "amber", … }
id: "Q-1041"
title: "Something is eating the bell-ropes"
hall: "amber"
region: "Thornmarch"
beast: "grimalkin"
grade: 2
status: "open"
reward: 16
postedDayOffset: -1
dueDayOffset: 31
party: [ ]
length: 0
tags: (2) [ "night-work", "bring-rope" ]
0: "night-work"
1: "bring-rope"
length: 2
sightings: 8
Usage
import { JsonTreeView } from "@kanzo-tech/ui";Pass any JSON-serialisable value to data; the component builds the tree with Ark's
json-tree-view machine — no collection to assemble. Objects and arrays become expandable
branches, primitives become leaves, and each value is coloured by its type (string, number,
boolean, null).
<JsonTreeView data={value} defaultExpandedDepth={2} />Branches lazy-mount and unmount on collapse by default (lazyMount / unmountOnExit), so a
large document stays cheap until the reader opens it.
API Reference
JsonTreeView
| Prop | Type | Default |
|---|---|---|
data | unknown | — |
defaultExpandedDepth | number | — |
renderValue | (details) => ReactNode | — |
lazyMount | boolean | true |
unmountOnExit | boolean | true |
renderValue overrides how a single leaf value is printed. Everything else comes from Ark's
JsonTreeView.Root.