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

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.

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.

• 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.

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

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

Enter fullscreen mode Exit fullscreen mode

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.

Video

You can watch More video

Happy building!