JsonTree

The built-in jsontree tag — an interactive, collapsible JSON tree viewer with syntax highlighting, copy-to-clipboard, search, and configurable expansion depth. A Community Component wrapping @gfazioli/mantine-json-tree.

jsontree renders any JSON-serializable value — an object, array, or scalar — as an interactive, collapsible tree with syntax highlighting. Readers can expand and collapse nodes; switch on the toggles below and they can also copy individual values or the whole document, filter keys and values, and read the full JSON path on hover. It becomes a fully interactive island in the browser, with no JavaScript to write.

You pass the value to display as a JSON string through data; the tag parses it at build time and hands the parsed value to the viewer. Use it as {% jsontree %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'jsontree', …).

A Community Component — wraps JsonTree by gfazioli, MIT licensed, npm @gfazioli/mantine-json-tree.

Demonstrations

Basic tree

Pass a JSON object string through data. The tree starts collapsed at the root — click a node to open it:

{% jsontree data='{"name":"Aardvark","version":"1.0","tags":["docs","static"],"meta":{"stars":42,"active":true}}' %}

Line numbers, indent guides, and item counts

Turn on showLineNumbers, showIndentGuides, and showItemsCount for a denser, more inspectable layout — handy for larger payloads:

{% jsontree data='{"id":7,"items":[{"sku":"A1","qty":2},{"sku":"B2","qty":5}],"shipped":false}' showLineNumbers=true showIndentGuides=true showItemsCount=true %}

Search, copy, and a bordered container

withSearch adds a filter box that highlights and auto-expands matches; withCopyAll adds a global copy button; withBorder wraps the tree in a bordered Paper. rootName labels the root node:

{% jsontree data='{"user":{"name":"Ada","roles":["admin","editor"]},"flags":{"beta":true,"darkMode":false}}' rootName="config" withSearch=true withCopyAll=true withCopyToClipboard=true withBorder=true %}

Opening the tree on load

defaultExpanded opens the tree when the page loads, and maxDepth says how far: a positive number opens that many levels, -1 opens the whole tree. withExpandAll adds an expand/collapse-all control readers can use afterwards:

{% jsontree data='{"a":{"b":{"c":{"d":"deep"}}},"list":[1,2,3]}' defaultExpanded=true maxDepth=1 withExpandAll=true %}

Raising maxDepth opens more of it — here the whole document:

{% jsontree data='{"a":{"b":{"c":{"d":"deep"}}},"list":[1,2,3]}' defaultExpanded=true maxDepth=-1 %}

With other components

A JSON tree sits naturally inside a card alongside other content — here a short text lead-in above an API-response viewer:

{% card %}
{% text size='sm' c='dimmed' %}Example API response{% endText %}

{% jsontree data='{"status":200,"data":{"id":"u_123","email":"ada@example.com"},"cached":false}' rootName="response" withCopyAll=true %}
{% endCard %}

Attributes

Every attribute is optional; omit one to take its upstream default. The body is ignored — jsontree is a viewer, not a container.

CSS Selector

The viewer is an island wrapper carrying data-aardvark-island="JsonTree"; the upstream component owns the inner tree chrome. Style or target it from your own CSS through the island attribute or any attr-supplied id/class:

/* The JsonTree island wrapper */
[data-aardvark-island="JsonTree"] {
  margin-block: var(--mantine-spacing-md);
}

The upstream package also exposes a rich set of CSS variables (e.g. --json-tree-color-string, --json-tree-color-number, --json-tree-color-key, --json-tree-indent-guide-color-0) and Styles API selectors — see the upstream documentation for the full list.

Injecting Attributes

Pass attr={…} to forward raw HTML attributes (an id, data-*, ARIA attributes, inline event handlers) straight onto the rendered element — exactly like component('aardvark', 'jsontree', attr={…}). These ride the data-aardvark-attr channel, not React props, so they don’t collide with the component’s own props. Leave class, className and style out of it: those are managed by the component, and the page logs a console warning if you send them.