JSON Tree Viewer
Paste any JSON and explore it as a collapsible, color-coded tree — objects, arrays, keys, and values at a glance.
How it works
- Validates with strict
JSON.parse— no trailing commas, comments, or single quotes. - Builds nested
<details>/<summary>elements, so any node can be expanded or collapsed. - Colors keys and values by type and shows a type badge with the child count on every object or array.
- All processing happens in your browser — nothing is uploaded.
About JSON Tree Viewer
Raw JSON is written as one long line, and even pretty-printed JSON forces you to count braces and brackets by eye. A tree viewer turns the document into nested collapsible rows, so you can fold away whole subtrees and jump straight to the field you care about — the indentation does the counting for you, and color-coding makes types recognizable at a glance.
Reach for a tree view when you are debugging API responses, inspecting generated configuration files, or exploring any deeply nested document where a flat text dump is hard to scan. For very large payloads, rendering thousands of nodes in the browser can slow down or freeze a page, so this tool caps input at 2 MB — if your data is bigger, query the API directly or reduce the response size before pasting it in.
Why the whole tree is built before you see it
`buildNode` recurses through the entire parsed document and appends every child element to its parent regardless of whether the node is open, so a collapsed subtree costs exactly as much DOM as an expanded one. Only the root gets `details.open = true`. Expand All and Collapse All then flip the `open` attribute across nodes that already exist — cheap on a small document, and on a large one they touch tens of thousands of elements at once, which is where the pause comes from.
The practical consequence: the ceiling is node count, not file size. An array of a million small objects parses into a million rows even though you only ever look at the first few, and the browser pays for layout on all of them. The 2 MB ceiling is a guard rail rather than a performance model — it counts UTF-16 code units of the pasted text, so multi-byte characters consume the budget twice as fast as the byte count on disk would suggest.
Reading the badges and the colour scheme
Each container's summary carries a count badge that differs by kind — `object · N keys` or `array · N items` — so a two-key object and a two-item array are distinguishable at a glance. Array children are labelled `[0]`, `[1]`; object children get their key wrapped by `JSON.stringify`, which adds quotes and escapes anything unusual in the key. Empty containers get no expandable element at all: they collapse to a literal `{}` or `[]` plus an `empty object` / `empty array` badge.
Scalar values are colour-classed by type, and strings also pass through `JSON.stringify` before display, so embedded quotes, newlines and control characters appear as escapes instead of silently reflowing the layout. Numbers are rendered with `String(value)`, which means anything the JSON parser already rounded shows its rounded form here — the tree is a faithful view of what `JSON.parse` produced, not of what the file said.
Where a tree view stops being honest
Several classes of damage happen before the first row is drawn, and the tree cannot show them to you. A duplicate key is resolved by `JSON.parse` keeping the last occurrence, so a payload with two `id` fields looks perfectly well-formed here. An integer beyond 2^53 has already lost precision, and a value like `0.1 + 0.2` arrives as its float approximation — the viewer is showing you the parse result, not the author's intent.
For those cases a raw byte-level look is the honest next step rather than more structure. Treat the tree as a navigation aid over an already-lossy parse: it is excellent for finding the field you need, and silent about the fields that were mangled on the way in.
Frequently Asked Questions
How do I view JSON in a tree format?
Can I search within the JSON tree?
Is my data sent to a server?
Do I need an account or API key?
Can I use these tools offline?
All processing happens in your browser. No uploads, no tracking, no servers. Your API keys, configs, and private payloads stay private — 100% client-side.