> ## 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.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`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.

<StoryEmbed storyId="ui-jsonvisualizer-jsontree--display" title="Expandable record details" height={320} />

## Usage

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

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.

When `onNodeValueClick` is provided, values are native buttons named by their displayed text. Tab moves focus to a value; Enter, Space, or a pointer click activates it. Without the callback, values remain non-interactive text. Value buttons do not submit enclosing forms.

## 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.