> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JsonTree

> Explore JSON values with expandable nodes and custom labels.

`JsonTree` displays either a JSON `value` or an array of named `entries`. Pass all empty-value and expand/collapse labels so your application controls the text.

```tsx theme={null}
import { JsonTree } from 'twenty-ui/components';

export const RecordDetails = () => (
  <JsonTree
    value={{ name: 'Acme', active: true, contacts: [] }}
    emptyStringLabel="Empty text"
    emptyArrayLabel="No items"
    emptyObjectLabel="No properties"
    arrowButtonCollapsedLabel="Expand node"
    arrowButtonExpandedLabel="Collapse node"
  />
);
```

Each entry has an `id`, `label`, and JSON `value`. Use entries when display labels differ from stored keys. The default expands depths 0 and 1. Override `shouldExpandNodeInitially={({ depth }) => depth === 0}` to expand only the root; later expansion is owned by each node.

`getNodeHighlighting(keyPath)` returns `blue`, `red`, `partial-blue`, or `undefined`. `onNodeValueClick` receives the displayed text: leaf values as strings, and the matching empty label for empty strings, arrays, and objects. The tree displays data and does not edit it.

## Props

<ParamField body="arrowButtonCollapsedLabel" type="string" required>
  Accessible label for the expand control on a collapsed node.
</ParamField>

<ParamField body="arrowButtonExpandedLabel" type="string" required>
  Accessible label for the collapse control on an expanded node.
</ParamField>

<ParamField body="emptyArrayLabel" type="string" required>
  Display text for an empty array.
</ParamField>

<ParamField body="emptyObjectLabel" type="string" required>
  Display text for an empty object.
</ParamField>

<ParamField body="emptyStringLabel" type="string" required>
  Display text for an empty string.
</ParamField>

<ParamField body="entries" type="JsonTreeEntry[]">
  Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.
</ParamField>

<ParamField body="getNodeHighlighting" type="GetJsonNodeHighlighting">
  Returns blue, red, or partial-blue highlighting for a node key path.
</ParamField>

<ParamField body="onNodeValueClick" type="((valueAsString: string) => void)">
  Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.
</ParamField>

<ParamField
  body="shouldExpandNodeInitially"
  type="((params: ShouldExpandNodeInitiallyProps) => boolean)"
  default="({ depth }: ShouldExpandNodeInitiallyProps) =>
depth <= 1"
>
  Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.
</ParamField>

<ParamField body="value" type="JsonValue">
  JSON value to display. Supply value or entries, not both.
</ParamField>