Mantine Json Tree Component

---

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Overview

This component is created on top of the Mantine library. It requires Mantine 9.x and React 19.

Mantine JsonTree provides a structured, interactive view of heterogeneous data—strings, numbers, booleans, nulls, objects, arrays, and even functions—organized as a collapsible tree. Developers can control initial expansion, show visual indent guides, and customize expand/collapse controls with arbitrary React nodes (e.g., emojis or styled icons) to match their design system. For function values, the component offers flexible rendering modes: show the function signature as text, hide functions entirely, or inspect them as objects when needed.

Set editable and the same tree becomes an editor: click a string or a number to change it in place, click a boolean to toggle it. Updates are immutable and rebuild only the path down to the edited node, so every Date, Map, Set, RegExp, BigInt, function and React element elsewhere in the tree keeps its identity.

Wrapped with Mantine layout primitives like Paper, Stack, and SimpleGrid, JsonTree integrates cleanly into dashboards, developer tools, and documentation pages where readable, navigable data visualization is essential.

Features

• Interactive collapsible tree view for any JSON-serializable data
• In-place editing of strings, numbers and booleans (editable, onChange) — immutable updates that leave every Date, Map, Set, RegExp, BigInt, function and React element in the tree untouched
• Search with text highlight, filtered tree view, and auto-expand matching branches
• Redesigned toolbar with key count badge, global copy, search toggle, and modern icons
• Paper wrapper with withBorder for bordered container look
• Custom root name via rootName prop
• Syntax highlighting with customizable colors for 16+ data types (strings, numbers, booleans, null, Date, RegExp, Map, Set, BigInt, Symbol, React elements, etc.)
• Safe on object graphs: circular references are marked [Circular] instead of crashing, while shared non-circular references still expand everywhere they appear
• Dark mode support with automatic color adaptation
• Copy-to-clipboard on individual nodes + global copy all JSON
• Keyboard navigation (arrow keys, Space to expand, Ctrl+C to copy)
• Configurable expansion depth with expand/collapse all controls
• Controlled expand/collapse state with expanded and onExpandedChange props
• Line numbers display
• Visual indent guides with rotating color palette
• Path tooltip on hover showing full JSON path
• Max height with scrollable container
• Sticky header support with configurable offset
• Function display modes: as-string, hide, or as-object introspection
• Responsive font size via Mantine breakpoint objects (CSS-native, no re-renders)
• Full Mantine Styles API support with 21 style selectors and 25+ CSS variables
• Custom icons for expand/collapse and copy controls
• Item count badges for objects and arrays
• onExpand, onCollapse, onNodeClick, onCopy, and onCopyAll callbacks

Note

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-json-tree

or

yarn add @gfazioli/mantine-json-tree

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

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

Usage

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

function Demo() {
  return <JsonTree data={{ key: "value" }} />;
}

To let a reader change values, add editable and feed onChange back through data — JsonTree keeps no copy of your data:

import { useState } from 'react';
import { JsonTree } from '@gfazioli/mantine-json-tree';

function Demo() {
  const [data, setData] = useState({ key: 'value', count: 1, enabled: false });

  return <JsonTree data={data} editable onChange={setData} />;
}

Sponsor

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.

---

studio.mp4