JsonTreeView

A component that displays JSON data in a browsable, hierarchical tree structure.

Usage

Provides a convenient way to visualize complex JSON objects. It supports expanding/collapsing levels, custom rendering for values, and various data types.

import { JsonTreeView, Icon } from "@elemnts-ui/react"

const data = {
  name: "John Doe",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  }
}

export default function () {
  return (
    <JsonTreeView data={data} defaultExpandedDepth={1}>
      <JsonTreeView.Tree arrow={<Icon icon="tabler:chevron-right" width={16} height={16} />} />
    </JsonTreeView>
  );
}

Expanded Depth

Use the defaultExpandedDepth prop to specify how many levels should be expanded by default.

Custom Value Rendering

You can use the renderValue prop to customize how different values are displayed.

API Reference

Root

Prop	Type	Default
arrow	`ReactNode`	-
indentGuide	`boolean \| ReactNode`	`true`
renderValue	`(node: JsonNodeHastElement) => ReactNode`	-
asChild	`boolean`	`false`