@gfazioli/mantine-json-tree

A Mantine extension component that renders interactive JSON trees with syntax highlighting, collapsible nodes, copy-to-clipboard, and configurable expansion depth.

Version

v2.1.0

Changelog

View the Changelog

Source

View source code

Package

@gfazioli/mantine-json-tree

Mantine Extensions

Docs

Edit this page

Built by

Giovambattista Fazioli (@gfazioli)

License

MIT

Support

Become a sponsor

What's new

Dark mode support with automatic color adaptation
Line numbers display (showLineNumbers)
Path tooltip on hover (showPathOnHover)
Max height with scrollable container (maxHeight)
Controlled expand/collapse state (expanded, onExpandedChange)
onExpand and onCollapse callbacks for individual node toggling
Keyboard copy: Ctrl+C / Cmd+C copies the focused node when withCopyToClipboard is enabled
Responsive size prop via Mantine breakpoint objects (CSS-native, no re-renders)
New lineNumber style selector with --json-tree-color-line-number CSS variable

Installation

yarn add @gfazioli/mantine-json-tree

After installation import package styles at the root of your application:

import '@gfazioli/mantine-json-tree/styles.css';

You can import styles within a layer @layer mantine-json-tree by importing @gfazioli/mantine-json-tree/styles.layer.css file.

import '@gfazioli/mantine-json-tree/styles.layer.css';

The JsonTree is interactive JSON tree viewer component built with Mantine's Tree component. Features collapsible nodes, syntax highlighting with type-specific colors, copy-to-clipboard functionality, item count badges, configurable expansion depth, and smooth animations. Perfect for debugging API responses, exploring complex data structures, and developer tools.

{
name:"John Doe"
age:30
isAdmin:false
courses:[...]3
wife:null
onClick:[Function: onClick]
address:{...}3
action:{...}2
projects:[...]2

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return <JsonTree size="sm" withCopyToClipboard showIndentGuides showItemsCount showLineNumbers showPathOnHover data={data} maxDepth={1} defaultExpanded/>;
}

Syntax Highlighting values

Below is an example of syntax highlighting for different JSON value types: strings, numbers, booleans, nulls, objects, and arrays. Each type is displayed in a distinct color for better readability.

Simple string
"Hello, World!"

Number value
42

Boolean value (true)
true

Boolean value (false)
false

Null value
null

Object value
{
key1:"value1"
key2:123
key3:false
key4:null

Array value
[
0:"string"
1:456
2:true
3:null
4:{
nestedKey:"nestedValue"

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { Paper, Stack } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <Stack>
      <Paper withBorder>
        <JsonTree data="Hello, World!" defaultExpanded title="Simple string" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={42} defaultExpanded title="Number value" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={true} defaultExpanded title="Boolean value (true)" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={false} defaultExpanded title="Boolean value (false)" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={null} defaultExpanded title="Null value" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={{ key1: 'value1', key2: 123, key3: false, key4: null }} defaultExpanded title="Object value" />
      </Paper>
      <Paper withBorder>
        <JsonTree data={['string', 456, true, null, { nestedKey: 'nestedValue' }]} defaultExpanded title="Array value" />
      </Paper>
    </Stack>
  );
}

Special Value Types

JsonTree supports modern JavaScript types beyond standard JSON primitives. These include Date objects, special numeric values (NaN, Infinity), BigInt for large integers, Symbols, RegExp patterns, and ES6 collections like Map and Set. Each type is displayed with distinct syntax highlighting and formatting:

Date: Displayed in ISO 8601 format (e.g., 2024-01-15T10:30:00.000Z)
NaN / Infinity: Special numeric values shown with their standard JavaScript representation
BigInt: Large integers displayed with the n suffix (e.g., 9007199254740991n)
Symbol: Unique identifiers shown with their description (e.g., Symbol(unique))
RegExp: Regular expressions displayed with their pattern and flags (e.g., /pattern/gi)
Map: Key-value collections that are expandable to show their entries
Set: Unique value collections that are expandable to show their elements
React Elements: React components displayed with their component name (e.g., <Loader />)

All colors can be customized using CSS variables for each type.

special-types.json
{
reactLoader:<@mantine/core/Loader />
reactButton:<button />
htmlDiv:<div />
createdAt:2024-01-15T10:30:00.000Z
lastModified:2024-06-20T14:45:30.000Z
notANumber:NaN
positiveInfinity:Infinity
negativeInfinity:-Infinity
bigInteger:9007199254740991n
userId:123456789n
globalSymbol:Symbol(app.config)
registryKey:Symbol(app.registry)
emailPattern:/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g
phonePattern:/\d{3}-\d{3}-\d{4}/
userMap:{
[0] user1:{...}2
[1] user2:{...}2
[2] 123:"numeric key example"
tags:{
0:"javascript"
1:"typescript"
2:"react"
uniqueNumbers:{
0:1
1:2
2:3
3:4
4:5
metadata:{
timestamp:2024-12-25T00:00:00.000Z
categories:{...}2
config:{...}2

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { Loader, Paper } from '@mantine/core';

function Demo() {
  const specialTypes = {
    // React components
    reactLoader: <Loader size="xs" />,
    reactButton: <button type="button">Click me</button>,
    htmlDiv: <div>Hello World</div>,
    // Date objects - displayed in ISO format
    createdAt: new Date('2024-01-15T10:30:00Z'),
    lastModified: new Date('2024-06-20T14:45:30Z'),

    // Special numeric values
    notANumber: NaN,
    positiveInfinity: Infinity,
    negativeInfinity: -Infinity,

    // BigInt for large integers
    bigInteger: BigInt('9007199254740991'),
    userId: BigInt(123456789),

    // Symbols for unique identifiers
    globalSymbol: Symbol.for('app.config'),
    registryKey: Symbol.for('app.registry'),

    // Regular expressions
    emailPattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g,
    phonePattern: new RegExp('\\d{3}-\\d{3}-\\d{4}'),

    // Map collections (key-value pairs)
    userMap: new Map([
      ['user1', { name: 'Alice', role: 'admin' }],
      ['user2', { name: 'Bob', role: 'user' }],
      [123, 'numeric key example'],
    ]),

    // Set collections (unique values)
    tags: new Set(['javascript', 'typescript', 'react']),
    uniqueNumbers: new Set([1, 2, 3, 4, 5]),

    // Nested combinations
    metadata: {
      timestamp: new Date('2024-12-25T00:00:00Z'),
      categories: new Set(['frontend', 'backend']),
      config: new Map([
        ['version', '1.0.0'],
        ['environment', 'production'],
      ]),
    },
  };

  return (
    <Paper withBorder>
      <JsonTree
        data={specialTypes}
        title="special-types.json"
        defaultExpanded
        withExpandAll
        showItemsCount
      />
    </Paper>
  );
}

Indent Guides

Display vertical lines to visualize nesting levels, similar to Visual Studio Code. The guides use 5 distinct colors that cycle for deeper nesting levels.

JSON with Indent Guides
{
name:"John Doe"
age:30
isAdmin:false
courses:[
0:"html"
1:"css"
2:"js"
wife:null
onClick:[Function: onClick]
address:{
street:"123 Main St"
city:"Anytown"
zip:"12345"
action:{
type:"click"
payload:undefined
projects:[
0:{
name:"Project A"
status:"completed"
1:{
name:"Project B"
status:"in progress"

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return (
    <JsonTree 
      data={data} 
      defaultExpanded 
      maxDepth={-1}
      showIndentGuides
      title="JSON with Indent Guides"
    />
  );
}

Line Numbers

Display line numbers alongside each node, similar to code editors. This is useful for referencing specific parts of the JSON structure.

JSON with Line Numbers
{
name:"John Doe"
age:30
isAdmin:false
courses:[
0:"html"
1:"css"
2:"js"
wife:null
onClick:[Function: onClick]
address:{
street:"123 Main St"
city:"Anytown"
zip:"12345"
action:{
type:"click"
payload:undefined
projects:[
0:{
name:"Project A"
status:"completed"
1:{
name:"Project B"
status:"in progress"

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return (
    <JsonTree
      data={data}
      defaultExpanded
      maxDepth={-1}
      showLineNumbers
      title="JSON with Line Numbers"
    />
  );
}

Sticky Header

You may enable sticky headers for better context when scrolling through large JSON structures. When enabled, the header of each expanded node remains visible at the top of the scrollable area as you navigate through its child elements. You can also set an offset to accommodate fixed headers in your layout.

data.json
{
name:"John Doe"
age:30
isAdmin:false
courses:[
0:"html"
1:"css"
2:"js"
wife:null
onClick:[Function: onClick]
address:{
street:"123 Main St"
city:"Anytown"
zip:"12345"
action:{
type:"click"
payload:undefined
projects:[
0:{...}
1:{...}

Sticky header

Sticky header offset

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return (
    <JsonTree stickyHeader
      data={data}
      title="data.json"
      defaultExpanded
      withExpandAll
      maxHeight={300}
      styles={{
        header: { backgroundColor: 'var(--mantine-color-default)' },
      }}
    />
  );
}

Icons

You can customize the expand/collapse icons used in the JsonTree component by providing your own icons via the expandControlIcon and collapseControlIcon props. The default icons are simple chevrons, but you can replace them with any React component or icon of your choice.

Note: If only the expandControlIcon is provided, the component will automatically use it for both expand and collapse states, by rotating (90deg) it accordingly. If only the collapseControlIcon is provided, the default expand icon will be used. Of course, you can provide both icons for complete customization.

Only Expand Icons

demo.json
{...}

Only Collapse Icons

demo.json
{...}

Both Expand and Collapse Icons

demo.json
{...}

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { Paper, SimpleGrid, Text, Title } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <SimpleGrid cols={3}>
      <Paper withBorder p="md">
        <Title order={4}>Only Expand Icons</Title>
        <JsonTree
          title="demo.json"
          showIndentGuides
          data={data}
          expandControlIcon={<span>👉</span>}
        />
      </Paper>
      <Paper withBorder p="md">
        <Title order={4}>Only Collapse Icons</Title>
        <JsonTree
          title="demo.json"
          showIndentGuides
          data={data}
          collapseControlIcon={<span>👇</span>}
        />
      </Paper>
      <Paper withBorder p="md">
        <Title order={4}>Both Expand and Collapse Icons</Title>
        <JsonTree
          title="demo.json"
          showIndentGuides
          data={data}
          expandControlIcon={
            <Text fz={24} c="red">
              ⊕
            </Text>
          }
          collapseControlIcon={<Text fz={24}>⊖</Text>}
        />
      </Paper>
    </SimpleGrid>
  );
}

Function Display

By default, functions in JSON data are displayed as strings (e.g., [Function: name]). You can control how functions are handled using the displayFunctions prop:

as-string (default): Display functions as formatted strings showing their name
hide: Completely omit functions from the tree
as-object: Treat functions as objects and display their properties

as-string

{
name:"UserProfile"
age:25
onClick:[Function: onClick]
calculate:[Function: calculate]
methods:{
fetchData:[Function: fetchData]
process:[Function: process]
data:[
0:1
1:2
2:3
isActive:true

hide

{
name:"UserProfile"
age:25
methods:[object Object]
data:[
0:1
1:2
2:3
isActive:true

as-object

{
name:"UserProfile"
age:25
onClick:{
length:0
name:"onClick"
prototype:[object Object]
calculate:{
length:2
name:"calculate"
methods:{
fetchData:{...}
process:{...}
data:[
0:1
1:2
2:3
isActive:true

import { JsonTree } from '@gfazioli/mantine-json-tree';
import { Code, Paper, Stack } from '@mantine/core';

const dataWithFunctions = {
  name: 'UserProfile',
  age: 25,
  onClick: function handleClick() {
    console.log('clicked');
  },
  calculate: (a: number, b: number) => a + b,
  methods: {
    async fetchData() {
      return 'data';
    },
    process: function process(value: string) {
      return value.toUpperCase();
    },
  },
  data: [1, 2, 3],
  isActive: true,
};

function Demo() {
  return (
    <Stack>
      <Paper withBorder p="sm">
        <Code>as-string</Code>
        <JsonTree data={dataWithFunctions} defaultExpanded displayFunctions="as-string" mb="md" />
      </Paper>
      <Paper withBorder p="sm">
        <Code>hide</Code>
        <JsonTree data={dataWithFunctions} defaultExpanded displayFunctions="hide" mb="md" />
      </Paper>
      <Paper withBorder p="sm">
        <Code>as-object</Code>
        <JsonTree data={dataWithFunctions} defaultExpanded displayFunctions="as-object" />
      </Paper>
    </Stack>
  );
}

Callbacks

Use the onNodeClick callback to handle clicks on any node in the tree, and the onCopy callback to react when a value is copied to clipboard. Both callbacks provide the relevant data for integration with your application logic.

Click a node or copy a value
{
name:"John Doe"
age:30
isAdmin:false
courses:[...]
wife:null
onClick:[Function: onClick]
address:{...}
action:{...}
projects:[...]

import { useState } from 'react';
import { JsonTree } from "@gfazioli/mantine-json-tree";
import { Code, Stack, Text } from "@mantine/core";
import { data } from './data';

function Demo() {
  const [clicked, setClicked] = useState<{ path: string; value: unknown } | null>(null);
  const [copied, setCopied] = useState<string | null>(null);

  return (
    <Stack>
      <JsonTree
        data={data}
        defaultExpanded
        maxDepth={1}
        withCopyToClipboard
        title="Click a node or copy a value"
        onNodeClick={(path, value) => setClicked({ path, value })}
        onCopy={(copy) => setCopied(copy)}
      />

      {clicked && (
        <Text size="sm">
          Clicked: <Code>{clicked.path}</Code>
        </Text>
      )}

      {copied && (
        <Text size="sm">
          Copied: <Code>{copied.length > 50 ? `${copied.slice(0, 50)}…` : copied}</Code>
        </Text>
      )}
    </Stack>
  );
}

Keyboard Navigation

JsonTree inherits full keyboard navigation from Mantine's Tree component:

Arrow Up/Down: Navigate between nodes
Arrow Right: Expand a collapsed node or move to first child
Arrow Left: Collapse an expanded node or move to parent
Space: Toggle node expansion
Ctrl+C / Cmd+C: Copy the focused node's value to clipboard (when withCopyToClipboard is enabled)

Path Tooltip

Set showPathOnHover to display the full JSON path in a tooltip when hovering over any node. This is useful for identifying the exact path to a value in deeply nested structures. You can customize the tooltip behavior with the tooltipProps prop, which accepts all Tooltip props except label and children.

Hover over any node to see its path
{
name:"John Doe"
age:30
isAdmin:false
courses:[
0:"html"
1:"css"
2:"js"
wife:null
onClick:[Function: onClick]
address:{
street:"123 Main St"
city:"Anytown"
zip:"12345"
action:{
type:"click"
payload:undefined
projects:[
0:{
name:"Project A"
status:"completed"
1:{
name:"Project B"
status:"in progress"

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return (
    <JsonTree
      data={data}
      defaultExpanded
      maxDepth={-1}
      showPathOnHover
      title="Hover over any node to see its path"
    />
  );
}

Max Height

Use the maxHeight prop to limit the tree height and enable scrolling. This is useful for embedding the tree in layouts with limited vertical space.

{
name:"John Doe"
age:30
isAdmin:false
courses:[
0:"html"
1:"css"
2:"js"
wife:null
onClick:[Function: onClick]
address:{
street:"123 Main St"
city:"Anytown"
zip:"12345"
action:{
type:"click"
payload:undefined
projects:[
0:{
name:"Project A"
status:"completed"
1:{
name:"Project B"
status:"in progress"

Max height

Show indent guides

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';

function Demo() {
  return <JsonTree maxHeight={300} showIndentGuides data={data} defaultExpanded maxDepth={-1} />;
}

Controlled Expand State

Use the expanded and onExpandedChange props for controlled expand/collapse state. The onExpand and onCollapse callbacks fire for individual node toggling:

const [expanded, setExpanded] = useState<string[]>([
  'root',
  'root.settings',
]);

<JsonTree
  data={data}
  expanded={expanded}
  onExpandedChange={setExpanded}
  onExpand={(path) => console.log('Expanded:', path)}
  onCollapse={(path) => console.log('Collapsed:', path)}
/>;

Responsive size

The size prop supports responsive values using Mantine breakpoint objects. This allows you to set different font sizes based on the viewport width, using CSS media queries (no JavaScript re-renders):

<JsonTree data={data} size={{ base: 'xs', sm: 'sm', lg: 'md' }} />

Style the component with classNames

You can style the JsonTree component using the classNames prop to target specific inner elements. This allows for granular customization of the component's appearance.

demo.json
{
name:"John Doe"
age:30
isAdmin:false
courses:[...]3
wife:null
onClick:[Function: onClick]
address:{...}3
action:{...}2
projects:[...]2

import { JsonTree } from "@gfazioli/mantine-json-tree";
import { data } from './data';
import classes from './JsonTree.module.css';

function Demo() {
  return (
    <JsonTree
      classNames={classes}
      title="demo.json"
      showIndentGuides
      defaultExpanded
      showItemsCount
      maxDepth={1}
      data={data}
    />
  );
}

Styles API

JsonTree supports Styles API, you can add styles to any inner element of the component with classNames prop. Follow Styles API documentation to learn more.

You can customize the appearance of the JsonTree component using the Styles API. This allows you to modify styles for various parts of the component, such as keys, values, brackets, and more.

demo.json
{
name:"John Doe"
age:30
isAdmin:false
courses:[...]3
wife:null
onClick:[Function: onClick]
address:{...}3
action:{...}2
projects:[...]2

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Mantine Json Tree

@gfazioli/mantine-json-tree

What's new

Installation

Usage

Syntax Highlighting values

Special Value Types

Indent Guides

Line Numbers

Sticky Header

Icons

Only Expand Icons

Only Collapse Icons

Both Expand and Collapse Icons

Function Display

Callbacks

Keyboard Navigation

Path Tooltip

Max Height

Controlled Expand State

Responsive size

Style the component with classNames

Styles API

HIGHLIGHTS

RESOURCES

ECOSYSTEM