This component is created on top of the Mantine library.

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

👉 You can find more components on the Mantine Extensions Hub library.

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';

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

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