What this does
Paste a JSON blob, get a tree. Every object and array becomes a foldable branch, every key shows its type, and arrays tell you how many items they hold before you even open them. It’s the difference between squinting at 400 lines of minified API output and clicking straight to the field you care about.
The view stays in sync with the textarea. Edit the JSON, the tree updates. Break the JSON, you get a parse error with the line and column instead of a tree that silently shows nothing.
Why a tree beats a wall of text
Ever pulled a webhook payload and had to count brackets to figure out where user.address.geo.lat actually lives? A flat formatter pretty-prints it, sure, but you’re still scrolling. A tree collapses everything you don’t need.
Say a response has 12 top-level keys and one of them is a 50-element array. Collapsed, that’s one line: data: array[50]. You expand only the branch you’re chasing. Nested config files, GraphQL responses, Firebase exports, package.json dependency trees: all of them get readable fast.
How to use it
- Drop your JSON into the left box (or hit Sample to load a starter object).
- The tree renders on the right. Click any ▸ arrow to expand or ▾ to collapse a branch.
- Hover a row. Two small buttons appear: Path copies a JSONPath-style accessor like
$.projects[0].title, and Value copies that node serialized as JSON. - Expand all / Collapse all flip the whole tree at once.
Need the cleaned-up source? Format input reflows your JSON with two-space indentation, and Download .json saves it as a file.
What the labels mean
Each leaf node prints its value plus a tiny type tag, so you can tell a real number from a numeric string at a glance:
- Strings render in green, wrapped in quotes, tagged
string - Numbers render in blue, tagged
number - Booleans render in purple, tagged
boolean nullshows up dimmed and taggednull- Arrays read as
array[3], objects asobject{5}so the count travels with the collapsed node
That count is genuinely useful. When an API claims it returned “all” your records and the node says array[100], you’ve just spotted a pagination cap without writing a single line of code.
Good to know
Everything runs in the browser. Your JSON never gets uploaded, so pasting a token-laden auth response or a customer record is fine. Nothing leaves the tab.
Paths use dot notation for normal keys ($.address.city) and bracket notation when a key has spaces or odd characters ($["weird key"]). That output drops straight into most JSONPath libraries, jq-style traversal, or a quick obj.address.city in your code once you trim the $.
One honest limitation: extremely large documents (think multi-megabyte arrays with tens of thousands of rows) will render slowly because the whole tree mounts at once. For files that big, collapse the top level first or reach for a streaming parser.
Common questions
Does it handle nested arrays and objects of any depth? Yep. The renderer is recursive, so a five-level-deep array of objects of arrays folds and unfolds just like the top level.
What happens with invalid JSON? You get a red error box showing the parser message plus the line and column where it choked. A trailing comma or a single quote is usually the culprit.
Can I copy just one branch instead of the whole document? That’s what the Value button is for. It serializes only the node you hovered, so you can grab one nested object without the rest.
Is the copied path real JSONPath?
It’s the common subset: $ root, .key for children, [n] for array indices. Good enough to paste into most JSONPath tools and to mirror in plain JavaScript property access.
Will it pretty-print my JSON too? Hit Format input and the left box gets reindented at two spaces. Download .json then saves that formatted version.