---
id: json-tree-view
title: JSON Tree View
description: A component that displays JSON data in an interactive, collapsible tree structure.
status: preview
---

<ComponentPreview id="JsonTreeView" />

## Anatomy

To set up the JSON tree view correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="tree-view" />

## Examples

Learn how to use the `JsonTreeView` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Different Data Types

The JSON tree view can display various JavaScript data types including objects, arrays, primitives, and special values:

<Example id="array-data" />

### Functions and Methods

Display JavaScript functions, async functions, and generators in your JSON tree:

<Example id="functions" />

### Regular Expressions

Regular expressions are displayed with their pattern and flags:

<Example id="regex" />

### Error Objects

Error objects and their stack traces can be visualized:

<Example id="errors" />

### Map and Set Objects

Native JavaScript Map and Set objects are supported:

<Example id="map-and-set" />

### Controlling Expand Level

Use the `defaultExpandedDepth` prop to control how many levels are expanded by default:

<Example id="expand-level" />

### Custom Value Rendering

You can customize how specific values are rendered using the `renderValue` prop. This example shows how to make email
addresses clickable:

<Example id="render-value" />

### Configuration Options

The JSON tree view supports several configuration options to customize the display:

```tsx
<JsonTreeView.Root
  data={data}
  defaultExpandedDepth={2}
  quotesOnKeys={true}
  showNonenumerable={true}
  maxPreviewItems={5}
  collapseStringsAfterLength={50}
  groupArraysAfterLength={100}
>
  <JsonTreeView.Tree arrow={<ChevronRightIcon />} />
</JsonTreeView.Root>
```

**Configuration Options:**

- **`quotesOnKeys`**: Whether to show quotes around object keys
- **`showNonenumerable`**: Whether to show non-enumerable properties
- **`maxPreviewItems`**: Maximum number of items to show in object/array previews
- **`collapseStringsAfterLength`**: Collapse strings longer than this length
- **`groupArraysAfterLength`**: Group array items when array is longer than this length

### Using the Root Provider

The `RootProvider` component provides a context for the JSON tree view. It accepts the value of the `useJsonTreeView`
hook. You can leverage it to access the component state and methods from outside the JSON tree view.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

<ComponentTypes id="json-tree-view" />

## Accessibility

The JSON tree view is built on top of the Tree View component and complies with the
[Tree View WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

### Keyboard Support

<KeyBindingsTable id="tree-view" />
