Org Chart
Charts
Source and install need .
pnpm dlx shadcn@latest add @assembli/json-viewerJSON Viewer
A collapsible JSON inspector for API responses and logs: colored values with color swatches, links and dates, devtools-style previews of collapsed branches, indent guides, a filter that opens exactly the matching branches, and a path bar that copies the selected node's accessor ($.users[0].email). A WAI-ARIA tree: arrows, Enter to toggle, C to copy a value.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
data*
JsonValue
rootName
string
Default
"$"The root's name in paths and the header. Defaults to
$.title
React.ReactNode
A title for the header, such as an endpoint or file name.
defaultExpandDepth
number
Default
1How many levels open on first render. 0 shows only the root;
Infinityopens everything.truncateAt
number
Default
80Strings longer than this collapse behind a "+n chars" button.
searchable
boolean
Default
trueShows the search field.
maxHeight
number | string
Default
420The tree's height cap; it scrolls past this.
onSelect
(path: string, value: JsonValue) => void
Called with a node's path when it's selected.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | JsonValue | – | |
| rootName | string | "$" | The root's name in paths and the header. Defaults to $. |
| title | React.ReactNode | – | A title for the header, such as an endpoint or file name. |
| defaultExpandDepth | number | 1 | How many levels open on first render. 0 shows only the root; Infinity opens everything. |
| truncateAt | number | 80 | Strings longer than this collapse behind a "+n chars" button. |
| searchable | boolean | true | Shows the search field. |
| maxHeight | number | string | 420 | The tree's height cap; it scrolls past this. |
| onSelect | (path: string, value: JsonValue) => void | – | Called with a node's path when it's selected. |
