JSON Tree View

Examples

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

Different Data Types

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

Functions and Methods

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

Regular Expressions

Regular expressions are displayed with their pattern and flags:

Error Objects

Error objects and their stack traces can be visualized:

Map and Set Objects

Native JavaScript Map and Set objects are supported:

Controlling Expand Level

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

Custom Value Rendering

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

Configuration Options

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

<JsonTreeView.Root
  data={data}
  defaultExpandedDepth={2}
  quotesOnKeys={true}
  showNonenumerable={true}
  maxPreviewItems={5}
  collapseStringsAfterLength={50}
  groupArraysAfterLength={100}
>
  <JsonTreeView.Tree arrow={<ChevronRight />} />
</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.

'use client'
 
import { JsonTreeView, useJsonTreeView } from '@cerberus/react'
import { ChevronRight } from '@carbon/icons-react'
 
export const RootProvider = () => {
  const jsonTreeView = useJsonTreeView({
    data: {
      name: 'John Doe',
      age: 30,
      email: 'john.doe@example.com',
      tags: ['tag1', 'tag2', 'tag3'],
      address: {
        street: '123 Main St',
        city: 'Anytown',
        state: 'CA',
        zip: '12345',
      },
    },
  })
 
  return (
    <JsonTreeView.RootProvider value={jsonTreeView}>
      <JsonTreeView.Tree arrow={<ChevronRight />} />
    </JsonTreeView.RootProvider>
  )
}

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

API Reference

Root

Props

JsonTreeViewRootProvider

Props

JsonTreeViewTree

Props

Accessibility

The JSON tree view is built on top of the Tree View component and complies with the Tree View WAI-ARIA design pattern.

Keyboard Support