npm package: @gfazioli/mantine-json-tree
Description: A Mantine extension component that renders interactive JSON trees with syntax highlighting, collapsible nodes, copy-to-clipboard, and configurable expansion depth.
Author: Giovambattista Fazioli
Latest version: 3.0.0

# Mantine Json Tree Component

<img alt="Mantine Json Tree" src="https://github.com/gfazioli/mantine-json-tree/blob/master/logo.jpeg" />

<div align="center">
  
  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-json-tree?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-json-tree)
  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-json-tree?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-json-tree)
  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-json-tree?style=for-the-badge&label=%20&color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-json-tree)
  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-json-tree?style=for-the-badge)

---

[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)  

</div>

## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.
It requires **Mantine 9.x** and **React 19**.

[Mantine JsonTree](https://gfazioli.github.io/mantine-json-tree) 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.

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
- Syntax highlighting with customizable colors for 16+ data types (strings, numbers, booleans, null, Date, RegExp, Map, Set, BigInt, Symbol, React elements, etc.)
- Dark mode support with automatic color adaptation
- Copy-to-clipboard on individual nodes
- 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 13 style selectors and 25+ CSS variables
- Custom icons for expand/collapse and copy controls
- Item count badges for objects and arrays
- `onExpand`, `onCollapse`, `onNodeClick`, and `onCopy` callbacks

> [!note]
>
> → [Demo and Documentation](https://gfazioli.github.io/mantine-json-tree/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)

## Installation

```sh
npm install @gfazioli/mantine-json-tree
```
or 

```sh
yarn add @gfazioli/mantine-json-tree
```

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

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

## Usage

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

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

## Sponsor

<div align="center">

[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)

</div>

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](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.

---
https://github.com/user-attachments/assets/ce2b1ba2-51f7-43d5-8477-6d8fee103fa3

---
[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-json-tree&type=Timeline)](https://www.star-history.com/#gfazioli/mantine-json-tree&Timeline)