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

# Árbol JSON

> Explora valores JSON con nodos expandibles y etiquetas personalizadas.

## Resumen

`JsonTree` muestra un `value` JSON o una matriz de `entries` con nombre. Proporciona todas las etiquetas de valores vacíos y de expansión/contracción para que tu aplicación controle el texto.

**Light**

[Detalles de registro expandibles (light)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Detalles de registro expandibles (dark)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-jsonvisualizer-jsontree--display)

## "Uso"

```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"
  />
);
```

Cada entrada tiene un `id`, una `label` y un `value` JSON. Usa entradas cuando las etiquetas mostradas difieran de las claves almacenadas. De forma predeterminada, se expanden las profundidades 0 y 1. Anula `shouldExpandNodeInitially={({ depth }) => depth === 0}` para expandir solo la raíz; la expansión posterior corresponde a cada nodo.

`getNodeHighlighting(keyPath)` devuelve `blue`, `red`, `partial-blue` o `undefined`. `onNodeValueClick` recibe el texto mostrado: los valores hoja como cadenas y la etiqueta vacía correspondiente para cadenas, matrices y objetos vacíos. El árbol muestra datos y no los edita.

Cuando se proporciona `onNodeValueClick`, los valores son botones nativos nombrados por el texto mostrado. Tab mueve el foco a un valor; Intro, Espacio o un clic con el puntero lo activan. Sin la devolución de llamada, los valores siguen siendo texto no interactivo. Los botones de valor no envían los formularios que los contienen.

## "Props"

**arrowButtonCollapsedLabel** `string` *required*

Accessible label for the expand control on a collapsed node.

**arrowButtonExpandedLabel** `string` *required*

Accessible label for the collapse control on an expanded node.

**emptyArrayLabel** `string` *required*

Display text for an empty array.

**emptyObjectLabel** `string` *required*

Display text for an empty object.

**emptyStringLabel** `string` *required*

Display text for an empty string.

**entries** `JsonTreeEntry[]`

Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.

**getNodeHighlighting** `GetJsonNodeHighlighting`

Returns blue, red, or partial-blue highlighting for a node key path.

**onNodeValueClick** `((valueAsString: string) =\> void)`

Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.

**shouldExpandNodeInitially** `((params: ShouldExpandNodeInitiallyProps) =\> boolean)` (default: (\{ depth }: ShouldExpandNodeInitiallyProps) =>
depth \<= 1)

Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.

**value** `JsonValue`

JSON value to display. Supply value or entries, not both.


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