How to read JSON with a tree viewer
JSON Viewer & Formatter
View, format, validate, edit and beautify JSON with an interactive tree view.
A formatted JSON document is readable, but a large one is still a wall of brackets you have to scroll through. A tree viewer turns that same data into a structure you can expand, collapse, search and copy paths from.
Text view vs tree view
Formatted (text) view is best when you want to read the JSON top to bottom, copy the whole thing, or paste it somewhere. Tree view is best when you know roughly what you're looking for and want to get to it without scrolling — a specific field, one item in a long array, the shape of a nested object.
Both show the same data. Switching between them doesn't change your JSON.
Expanding and collapsing
Each object and array is a branch with a caret. Click it to open or close that branch. "Collapse all" gives you the top-level shape at a glance; "expand all" opens everything — a good viewer disables that for very large documents so it doesn't freeze the page. Start collapsed, then drill into the part you care about.
Searching keys, values and paths
Type a term and the viewer highlights every matching node and lets you step through the matches. You can usually scope the search to keys only, values only, or the path text. Searching email across values, for example, finds every email address no matter how deeply it's nested.
Copying a JSONPath
Click a node and you can copy its path — something like $.data.items[0].price. That's the expression you'd use in code, a test assertion, or a JSONPath query to pull that value out programmatically. Copying the path by hand from formatted text is error-prone; the tree gives it to you exactly.
When to use graph view instead
Graph view lays the structure out as a node diagram you can pan and zoom. It's useful for explaining a data shape to someone or spotting unexpected nesting, but it gets slow with thousands of nodes — the tree is the better default for working with data.
Try it
Paste JSON into the JSON Viewer & Formatter and switch the output to Tree. If your JSON won't parse yet, the JSON Validator points at the exact line and column first — see JSON parse errors explained.
Frequently asked questions
- What is a JSON tree viewer?
- A tool that shows JSON as a collapsible hierarchy instead of text. Objects and arrays are branches you expand and collapse; primitive values are leaves. It's faster than scrolling formatted text when you only need one value.
- How do I copy the path to a value in JSON?
- In a tree viewer, click the node and choose 'Copy path'. You get a JSONPath like $.user.address.city that you can paste into code, a test assertion, or a query.
- Is tree view or graph view better?
- Tree view for working with data — it's fast and searchable. Graph view for visualising or explaining a structure, but it slows down on very large documents.
- Does viewing JSON as a tree change it?
- No. Tree, Formatted and Raw are three views of the same parsed data. Nothing is modified until you explicitly format, minify, sort or repair.
Related guides
- JSON parse errors explained: 'Unexpected token', 'Expected comma or brace', and the rest
What each common JSON error message actually means, the usual cause, and how to find the spot fast using line and column.
- How to format JSON (and actually understand the errors)
JSON looks like a JavaScript object but follows stricter rules. Here's what those rules are and how to read the errors when they're broken.
JSON Viewer & Formatter
View, format, validate, edit and beautify JSON with an interactive tree view.