JSON Viewer
A tree view of any JSON: click a bracket to collapse it, see the item count before you open it, and stop scrolling forty thousand lines to find one key.
Ctrl / Cmd + Enter formats as well.
Click any { } or [ ] to collapse or expand it. The number beside a bracket is its item count, so an empty array is obvious at a glance. Rendering stops at 5,000 nodes.
Paste JSON into the Format & validate tab first.
Supported: $, .key, ..key (recursive descent), [0] and [*]. That is the subset developers actually use, not the whole JSONPath grammar.
Compared structurally, not as text. Indentation, key order and 1.0 vs 1 are not reported as differences.
The data comes from the input box on the Format & validate tab. Supported: type, required, properties, items, enum, const, numeric bounds, string length and pattern, array length and uniqueness, and additionalProperties. Not supported yet: $ref, allOf/anyOf/oneOf and format.
Formatting a file makes it readable line by line. A tree makes it navigable. Those are different jobs, and the difference shows up on exactly the files that hurt: wide arrays, deep nesting, and anything where you need to answer "how many" or "what is under here" without reading every line.
Every object and array in this view carries its child count on the closing bracket, so an empty array is distinguishable from a populated one at a glance — the single most annoying thing about reading JSON as text. The tree is built from the same parse as the formatted output, so the two can never disagree.
When a tree beats formatted text
Three cases, and they are the reason this page exists separately from the formatter:
- Structure discovery. "Does each item have a
nested.c.e, or only some of them?" Collapsing two levels answers it; searching a 40,000-line file does not. - Empty versus absent.
[]and a missing key look almost identical in formatted text when the array is on its own line. - Depth. Past four or five levels, indentation stops being a usable visual guide and becomes a horizontal scroll bar.
If you want the text — to diff it, paste it into an issue, or read one specific value — use the formatter. It is the same data.
The 5,000 node render cap, and why it is there
The tree stops building DOM after 5,000 nodes and prints a note under it saying so. That is a deliberate limit, not a bug: a tree view is one DOM element per node, and 200,000 of them makes the tab unusable for reasons that have nothing to do with JSON.
What the tool does instead on a big file: the parse itself runs in a Web Worker and is not capped (a 100 MB file parses in about 1.5 s here), and the counts you actually came for — nodes, depth, root type, entries — are reported numerically whether or not the tree drew them all.
For a large file where you need one value rather than the shape, JSONPath query is the right tool: it returns matches, not a picture.
Frequently asked questions
Is the data uploaded?
No. The tree is built in your tab from a parse that happens in a Web Worker. Nothing is sent anywhere, and there is no setting that would change that.
How deep can the nesting be before it breaks?
Up to about 2,000 levels everything works, stats included. Past that it is the browser's own serializer that refuses to build an indented string — in Chrome 152 3,000 levels already fails — so pretty-printing hands back a refusal that says what happened instead of locking the tab, while minify still completes at 20,000 levels. Sorting stops for the same reason and tells you to format without sorting. The tree caps at 5,000 nodes and says so.
Can I search for a key name?
Use the JSONPath tab on the formatter page: $..fieldName collects every occurrence of that key at any depth, which is the search people actually want when reading an unfamiliar document.
Does the tree show the same values as the formatted output?
Same engine and the same number rules, but they are two separate parses: the tree is built on the main thread so it can draw while the worker is busy with the text view. There is no second formatting implementation to drift out of sync, which is the part that matters. Number formatting follows the same rules everywhere on this site, including the precision caveats listed on the formatter page.