Paste a document and read it as a collapsible tree instead of a wall of braces. Expand what you care about, collapse what you don't, search it, and edit values in place — all in your browser, with nothing uploaded.
Tree mode is one of the five views each editor panel can switch between (text, tree, types, table, graph), chosen from the mode buttons at the top of the panel. It is not a read-only pretty-printer: the tree is a full editing surface backed by the same document text, so anything you change in the tree is the same document you'd see back in Text mode a moment later.
[3 items] or {2 keys} summary so a collapsed node still tells you how big it
is. Ctrl-click (Cmd-click) a row expands or collapses that whole subtree in one step, and
Expand all / Collapse all do the document. On first load, a container
more than two levels below the root starts collapsed — its own row is there, its children are folded
away — so a deep document opens legible rather than exploded.
.endpoints[0].method; the root shows as .). It is an input, not a
label: type a path into it, press Enter, and the tree expands whatever it needs to and jumps there.
The tree is virtualized: only the rows inside the current scroll window ever become real DOM elements, so row count stops driving render cost. Search follows the same principle — below roughly 256 KB it runs inline, and above that it moves into a worker that keeps its own parsed copy of the document, so per-keystroke searching on a multi-megabyte file doesn't block the page.
A handful of real limits, worth knowing before you rely on it. Drag reorders within one parent only. Dragging a row onto a target under a different parent is refused rather than attempted — the browser shows its own not-allowed cursor, and on release the tree explains once. Moving a node to a different parent is Cut and Paste, not drag.
Paste inserts under a fixed name. Pasting into an object creates a sibling keyed
pasted (then pasted (2), and so on) rather than restoring the key the node had
where you cut it; Insert value / object / array likewise start out as newKey. Renaming it
afterwards is a double-click, but it is a second step.
Array positions aren't renameable — only object keys accept a key edit, because an
array index isn't a name. Search doesn't match container summaries: a query matches
keys and primitive values, so an object row is found by its key but never by the
{2 keys} text printed beside it. The colour swatch is deliberately strict —
only #RGB, #RRGGBB and #RRGGBBAA get one, never
rebeccapurple or rgb(…), and once you edit through the picker the value is
written back as 6-digit hex, so a 3-digit or alpha-carrying original does not survive that edit.
Left-arrow doesn't collapse. Up and Down move between rows, Right selects the insertion gap after a row, and Left is currently unbound — collapse a node with Enter or its chevron. Finally, the tree has no undo history of its own: every edit routes through the editor's text, which is the undo stack. That is what makes each tree action exactly one Ctrl+Z, but it also means undo is shared with everything else you do to the document, not a tree-local timeline. The Settings font-size field only resizes the text editor, not tree rows.
Example — this JSON:
{
"service": "checkout-api",
"enabled": true,
"theme": {
"accent": "#2563eb",
"surface": "#f8fafc"
},
"retries": {
"max": 3,
"backoff": {
"strategy": "exponential",
"initialMs": 250
}
},
"endpoints": [
{
"path": "/orders",
"method": "GET",
"authRequired": true
},
{
"path": "/orders",
"method": "POST",
"authRequired": true
},
{
"path": "/health",
"method": "GET",
"authRequired": false
}
],
"deprecatedAt": null
}
opened in the tree gives you a checkbox on enabled and each
authRequired, a colour picker on accent and surface, a grid
toggle on endpoints, and a [3 items] summary on that array when it's collapsed.
Open this example in the tree →
This link loads the document above and opens the left panel in tree mode directly — no
mode switch needed once you land.
No. The tree is built in your browser from text you paste, drop, or open from disk — there is no server, no account, and no upload step. The page is precached by a service worker on first visit, so it keeps working offline afterwards.
You can edit. Double-click a value to change it in place, double-click an object key to rename it, tick a boolean's checkbox to flip it, and use the picker on a hex colour string to change the colour. Each edit is written back through the editor's text as a single undo step, so Ctrl+Z reverses it exactly once.
Drag reorders within one parent only. A drop onto a row under a different parent is refused rather than attempted, and the tree says so once on release: Can't move an item to a different parent — drag reorders within the same list or object only. To move a node across parents, use Cut and Paste from the right-click menu instead.
A case-insensitive substring, matched against both keys and primitive values. Object and array rows match on their own key only — the [3 items] or {2 keys} summary the tree prints beside them is display text and is never searched. Above roughly 256 KB the search runs in a worker so typing stays responsive.
Want a node's path as jq, JSONPath, JavaScript, or JSON Pointer rather than a view of the whole document? See JSON Path Finder.