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, copy individual values or the whole document, search keys and values, and read the full JSON path on hover. It hydrates into 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. By default the first couple of levels auto-expand:

{% 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 %}

Controlling expansion depth

maxDepth sets how many levels auto-expand: 0 collapses everything, a positive number expands that many levels, and -1 expands the whole tree. withExpandAll adds an expand/collapse-all control:

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

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, class, 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: