JsonViewer

Usage

JsonViewer is an interactive component for viewing JSON structures.

JsonViewer displays values the way JSON.stringify serializes them: values that implement toJSON() (for example, Date) are displayed as the result of toJSON(), and Map / Set are displayed as empty objects.

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} />;
}

Default expand depth

Use defaultExpandDepth prop to control how many levels are expanded by default. The root node is always expanded. With 1 (default), nested objects and arrays of the root node are collapsed:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} defaultExpandDepth={3} />;
}

defaultExpandDepth is applied only when the component mounts. If value is loaded later, change the key together with the data to apply it again, or control the expanded state with expandedPaths and onExpandedPathsChange props:

import { JsonViewer } from '@mantine/code-highlight';

function Demo({ data }: { data: unknown }) {
  return <JsonViewer key={JSON.stringify(data)} value={data} defaultExpandDepth={2} />;
}

Long arrays and objects

Use maxDisplayLength prop (100 by default) to limit the number of entries displayed for a single object or array. The rest of the entries are replaced with a "... N more items" row.

Set groupArraysAfterLength prop to a number to split longer arrays into collapsible [start...end] groups instead. maxDisplayLength does not apply to grouped arrays.

Root name

Use rootName prop to display a label for the root node. Set it to false (default) to hide it:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} rootName="response" />;
}

Expand all / collapse all controls

Set withControls prop to display expand all and collapse all buttons. The controls are not displayed when allExpanded is set:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return (
    <JsonViewer value={data} withControls />
  );
}

Type badges and size

Set withTypes prop to display type badges next to values and withSize prop to display the number of items in arrays and objects:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} withTypes withSize />;
}

Copy button

Set withCopy prop to display a copy button when a row is hovered or focused:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} withCopy />;
}

Collapse long strings

Use collapseStringsAfterLength prop to truncate long strings. Truncated strings display a "show more" button that reveals the full value.

String values longer than 20 characters wrap onto multiple lines. These values have data-wrap attribute, use it to change the wrapping behavior with Styles API.

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} collapseStringsAfterLength={30} />;
}

Sort keys

Set sortKeys prop to sort object keys alphabetically. You can also pass a custom comparator function:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} sortKeys />;
}

Highlight items

Use highlightItems prop to highlight properties with diff-style colors. It is an object: keys are property paths created with serializeJsonViewerPath function, values are added or removed:

import {
  JsonViewer,
  JsonViewerHighlightType,
  serializeJsonViewerPath,
} from '@mantine/code-highlight';
import { data } from './data';

const highlightItems: Record<string, JsonViewerHighlightType> = {
  [serializeJsonViewerPath(['version'])]: 'added',
  [serializeJsonViewerPath(['deprecated'])]: 'removed',
  [serializeJsonViewerPath(['author', 'url'])]: 'added',
};

function Demo() {
  return (
    <JsonViewer
      value={data}
      highlightItems={highlightItems}
      defaultExpandDepth={3}
    />
  );
}

All expanded

Set allExpanded prop to expand all nodes and disable collapse interactions:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} allExpanded />;
}

Line numbers

Set withLineNumbers prop to display line numbers alongside the JSON content:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} withLineNumbers />;
}

Chevrons

Set withChevrons prop to display expand/collapse chevrons next to collapsible nodes:

import { JsonViewer } from '@mantine/code-highlight';
import { data } from './data';

function Demo() {
  return <JsonViewer value={data} withChevrons />;
}

Keyboard navigation

JsonViewer supports keyboard navigation similar to the Tree component:

• ↑ / ↓ – move focus between visible nodes
• → – expand a collapsed node, or move focus to its first child
• ← – collapse an expanded node, or move focus to its parent
• Enter / Space – toggle expand/collapse on collapsible nodes, trigger onValueSelect on primitive nodes
• Ctrl + C / ⌘ + C – copy the focused node value when withCopy prop is set

Accessibility

JsonViewer renders its content as an ARIA tree. rootName prop is used as the accessible name of the tree, when it is not set, the tree is labelled JSON.

The component is always rendered left-to-right, regardless of the direction of the application.