JsonViewer

A collapsible JSON tree with type-coloured values, search that opens matching branches, paging for long arrays, and copy value or path on every row.

When to use

• Inspecting API responses, webhook payloads, logs or config in developer and admin tools.
• When the data is large or nested and people need to find a key or copy a path.
• Use CodeBlock to show a short, fixed JSON sample, and TreeView for non-JSON hierarchies such as files.

Usage

import { JsonViewer } from "@/components/iris/json-viewer/json-viewer";

h(JsonViewer, {
  data: session,
  rootName: "session",
  label: "OpsisID session payload",
  defaultExpanded: ["session", "session.checks"],
  maxHeight: 320,
  onCopy: ({ kind, path }) => toast(`Copied ${kind} of ${path}`),
});

Props

Prop	Type	Default	Description
data	unknown	— (required)	Any JSON-compatible value.
rootName	string	"root"	Name of the root in paths, e.g. session.checks[0].type.
defaultExpandDepth	number	1	Levels open on first render when defaultExpanded is not set.
expanded / defaultExpanded / onExpandedChange	string[] / string[] / (paths) => void	—	Open branches by path, controlled or uncontrolled.
searchable	boolean	true	Show the search field.
query / defaultQuery / onQueryChange	string / string / (q) => void	—	Search text, controlled or uncontrolled.
pageSize	number	50	Children shown per page in long arrays or objects.
copyable / onCopy	boolean / (detail) => void	true / —	Copy value and copy path actions; detail is { kind: "value" | "path"; path; text }.
onSelect	({ path, value, type }) => void	—	Called when a row becomes current.
showPath	boolean	true	Show the current row's path under the tree.
maxHeight	number | string	420	Height of the scrolling tree area.
label	string	"JSON"	Accessible name of the tree.

Notes

• Follows the WAI-ARIA tree pattern: arrows move and open, Home/End jump, Enter toggles, and Cmd/Ctrl+C copies the focused value.
• Search highlights every match and opens the branches that hold them; expand-all and collapse-all buttons sit beside the field.
• Value colours are tuned separately for light and dark themes; rows unfold one by one, instant under reduced motion.
• Forwards a ref to the root div.