JSON Tree
Collapsible JSON explorer with syntax coloring, like a dev-tools inspector, for API payloads, configuration objects, and structured state.
<arc-json-tree>Overview
JsonTree renders any JSON value as a collapsible tree, the way a browser's dev-tools inspector does. Objects and arrays become expandable branches with a rotating chevron, primitives render inline with per-type syntax coloring, and neutral guide rails trace the nesting depth. The coloring follows the same token mapping as CodeBlock (keys in the secondary accent, strings in the success hue, numbers in the primary accent, booleans and null in the warning hue), so a theme that overrides the base tokens recolors the tree along with everything else. Unlike CodeBlock, JsonTree loads no highlighter and has zero dependencies, so it registers with the rest of the library at no extra cost.
Data arrives one of two ways. Pass the data property for objects and arrays you already hold in JavaScript, or set the json attribute to a JSON string for markup-only use. The string is parsed defensively: invalid input renders a small inline error state with the parser's message instead of throwing. When both are set, the property wins.
The expanded prop controls how many levels open initially. The default of 1 shows the root's immediate children. As a bare boolean attribute it opens every level. Collapsed branches show a muted summary preview of what is inside, such as three keys or twelve items, and long strings truncate in the row with the full value available on hover via the title attribute.
The component follows the WAI-ARIA tree pattern with the same keymap as TreeView: ArrowDown and ArrowUp move between visible rows, ArrowRight expands a collapsed branch, ArrowLeft collapses an expanded one, and Enter or Space toggles the focused node. Objects and arrays with more than 100 children render the first 100 plus a "show N more" expander node rather than flooding the DOM. JsonTree is built for inspection; when the data itself is large-scale, use VirtualList.
Guidelines
When to use
- Use JsonTree to inspect structured data: API responses, configuration objects, event payloads, and application state
- Set `expanded="2"` or deeper when the interesting values live below the first level
- Pass objects and arrays through the `data` property; reserve the `json` attribute for static markup
- Use `keys-quoted` when the output should read as strict JSON rather than devtools-style bare keys
- Reach for VirtualList instead when the data is genuinely large-scale. JsonTree pages children at 100 per branch by design
When not to use
- Do not use JsonTree to display source code. CodeBlock highlights whole files in any language; JsonTree explores one structured value
- Do not use JsonTree for navigation hierarchies like file browsers or menus. TreeView handles selection and custom labels
- Do not feed it multi-megabyte payloads expecting virtualization. The show-more boundary caps the DOM but everything revealed stays rendered
- Do not rely on hover-only title text to communicate essential string content. Truncated values should also be reachable another way
Features
- Renders any JSON value (objects, arrays, strings, numbers, booleans, and null) as a collapsible tree
- House syntax coloring from design tokens: keys in accent-secondary, strings in the success hue, numbers in accent-primary, booleans and null in the warning hue
- Accepts data as a JavaScript property or as a `json` string attribute, with a graceful inline error state for invalid JSON
- Configurable initial depth via `expanded`, from fully collapsed (0) to fully open (bare attribute)
- Collapsed branches show a muted summary preview of their contents, such as key or item counts
- Long string values truncate in the row and expose the full value through the title attribute
- Neutral depth guide rails drawn with the divider token, never tinted by value type or state
- Full WAI-ARIA tree pattern with the TreeView keymap: arrows to navigate and toggle, Enter or Space to activate
- A 100-child page boundary with a "show N more" expander keeps huge payloads from flooding the DOM
- Zero dependencies, no highlighter, no lazy chunks: it ships in the standard register barrel
Preview
-
-
}
-
]
}
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<!-- JSON string via attribute -->
<arc-json-tree expanded="2" json='{
"id": "ord_8134",
"status": "shipped",
"paid": true,
"customer": { "name": "Ada Lovelace", "verified": true }
}'></arc-json-tree>
<!-- Live objects via the data property -->
<arc-json-tree id="inspector" expanded keys-quoted></arc-json-tree>
<script>
const inspector = document.getElementById('inspector');
fetch('/api/orders/8134')
.then((res) => res.json())
.then((payload) => { inspector.data = payload; });
</script>import { JsonTree } from '@arclux/arc-ui-react';
const payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
export default function Example() {
return <JsonTree data={payload} expanded={2} />;
}<script setup>
import { JsonTree } from '@arclux/arc-ui-vue';
const payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
</script>
<template>
<JsonTree :data="payload" :expanded="2" />
</template><script>
import { JsonTree } from '@arclux/arc-ui-svelte';
const payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
</script>
<JsonTree data={payload} expanded={2} />import { Component } from '@angular/core';
import { JsonTree } from '@arclux/arc-ui-angular';
@Component({
imports: [JsonTree],
template: `
<arc-json-tree [data]="payload" expanded="2"></arc-json-tree>
`,
})
export class MyComponent {
payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
}import { JsonTree } from '@arclux/arc-ui-solid';
const payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
<JsonTree data={payload} expanded={2} />import { JsonTree } from '@arclux/arc-ui-preact';
const payload = {
id: 'ord_8134',
status: 'shipped',
paid: true,
customer: { name: 'Ada Lovelace', verified: true },
};
<JsonTree data={payload} expanded={2} />API
dataobjectundefined- The value to render. Set as a property for objects and arrays; takes precedence over the json attribute when both are set.
jsonstring''- JSON string alternative to the data property, for attribute-only use. Parsed with try/catch; invalid input renders a small inline error state instead of throwing.
expandednumber | boolean1- How many levels open initially (default 1). As a bare boolean attribute, every level opens.
keysQuotedbooleanfalse- Render object keys with quotes. Off by default, matching devtools.
Events
arc-toggle- Fired when a node is expanded or collapsed, with the node path and new expanded state
See Also
- Code BlockSyntax-highlighted code with a title, a copy button, line numbers, line emphasis, diff tints, a shell prompt and a collapsed height.
- Tree ViewHierarchical tree structure with expandable/collapsible nodes, selection tracking, keyboard navigation, and indentation guide lines.
- DiffLine-based text diff viewer with inline and side-by-side display modes.
- Virtual ListWindowed list that renders only visible items for efficient scrolling through thousands of rows. Fixed item height with configurable overscan.