JsonTree for Mantine UI: A Delightfully Simple Way to Inspect Any Data Structure

A lightweight, flexible tree viewer for strings, numbers, booleans, nulls, arrays, and objects—built for Mantine UI, with zero configuration and rich customization when you need it.

If you build React apps with Mantine UI, you already value clarity, consistency, and speed. JsonTree continues that tradition: it renders any JavaScript value—primitives, arrays, and objects—into an interactive tree with minimal effort. Drop it in, point it to data, and you’re done. When you need more, it offers clean extension points and Mantine-friendly styling.

Why JsonTree

• Works with any value: string, number, boolean, null, array, object.

• Instant visibility: expand/collapse nodes to navigate complex payloads.

• Mantine-first: designed to fit your theme, typography, spacing, and dark mode.

• Zero-config by default; composable when you need control.

Quick start examples

The following snippets demonstrate how JsonTree gracefully renders different data types. Each example uses defaultExpanded for immediate visibility and an optional title for context.

//data.js
export const data = {
  name: ‘John Doe’,
  age: 30,
  isAdmin: false,
  courses: [’html’, ‘css’, ‘js’],
  wife: null,
  address: {
    street: ‘123 Main St’,
    city: ‘Anytown’,
    zip: ‘12345’,
  },
  action: { type: ‘click’, payload: undefined },
  projects: [
    {
      name: ‘Project A’,
      status: ‘completed’,
    },
    {
      name: ‘Project B’,
      status: ‘in progress’,
    },
  ],
};

import { JsonTree } from “@gfazioli/mantine-json-tree”;
import { data } from ‘./data’;

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

Full demo with Mantine layout

Wrap JsonTree with familiar Mantine components like Stack and Paper to get polished spacing, borders, and responsiveness out of the box:

import { JsonTree } from “@gfazioli/mantine-json-tree”;
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>
  );
}

Use cases

• API response debugging: Quickly explore fetched JSON without switching tools.

• Admin interfaces: Render configuration blobs, feature flags, or audit objects.

• Developer tools: Embed a live inspector during development or in internal dashboards.

• Education/demo pages: Show data shapes and changes clearly for tutorials and onboarding.

Design philosophy: simplicity first, customization later
JsonTree’s primary goal is effortless inspection: pass data and get a clean, browsable tree. But it’s built for Mantine, so you can compose it within Paper, Card, Stack, ScrollArea, and more, apply theme tokens, and keep your UX coherent—light/dark included.

Tips for smooth integration

• Combine defaultExpanded with a clear title to provide instant context.

• Use Paper withBorder to visually separate multiple trees in a layout.

• Pair with Mantine’s Code or Text components to annotate nodes or describe payloads.

• Wrap in ScrollArea for very large trees to keep the page layout tidy.

• Keep large payloads collapsed by default and let users progressively explore.

Mantine ecosystem and extensions

JsonTree is written for Mantine UI and plays nicely with its core components and theme system. If you’re exploring additional add-ons, you can find other extensions on Mantine Extensions to round out your toolkit.

---

Closing thoughts

JsonTree embraces what Mantine developers love: speed, clarity, and control. It removes friction from inspecting data while staying 100% Mantine-friendly. Whether you’re debugging, documenting, or shipping a production admin UI, JsonTree gives you a dependable way to present complex structures with an elegant, approachable interface.

You can watch More video

Happy building!