Phoundry UI

JsonTree

Inspect-only foldable tree for a JSON object or array. The Consumer owns the value. Not TreeView, not CodeBlock, and not a parser.

import { JsonTree } from 'phoundry-ui';

Object

  • name : "Phials"
  • count : 3
  • ok : true
Show code 
<JsonTree value={{ name: 'Phials', count: 3, nested: { theme: 'dark' } }} />

Array

Show code 
<JsonTree value={[{ id: 1, label: 'alpha' }, { id: 2, label: 'beta' }]} />

Deeper default expand

defaultExpandDepth of 2 opens the first nested object. The default is 1: root keys visible, nested containers collapsed.

  • name : "Phials"
  • count : 3
  • ok : true
    • theme : "dark"
Show code 
<JsonTree
  value={{ nested: { theme: 'dark', tags: ['app', 'files'] } }}
  defaultExpandDepth={2}
/>

Props

PropTypeDefaultDescription
value requiredunknown-Already-parsed JSON. Objects and arrays render as a foldable tree of keys or indices. JsonTree does not parse strings.
defaultExpandDepth number1How many levels start open. `1` lists the value's own keys or indices and leaves nested objects and arrays collapsed.
class string-Additional CSS classes on the root tree.

Usage tips

  • Pass a parsed object or array. Detection and JSON.parse belong in the Consumer.
  • There is no wrapper { / [ row. The tree starts at the value’s own keys or indices.
  • Nested string leaves stay strings. JsonTree does not sniff them again.
  • Empty objects and arrays render as {} / [] leaves, not as blank fold rows.
  • This is inspect-only. There is no selection and no drag.