TechCompare LogoTechCompare

JSON tree viewer: explore nested JSON, copy paths and keep every value exact

Use a tree view to explore and a text view to edit. The tree shows the shape at a glance, gives every value a path like $.data.items[2].id, and lets you copy one branch instead of the whole file.

Formatted JSON is readable until it isn't. A 40 level deep API response or a 10 MB export turns into thousands of lines of brackets. A tree view folds that into one line per value, so you open only the branches you care about, see how many keys or items each one holds, and copy the path of whatever you land on.

By TechCompare · Updated

Topic
JSON tree viewer
json-tree
Category
Reading
JSON knowledge base
Try the live JSON Formatter. Paste your payload and get validation, formatting, and error help.
Edit in the full tool

How this is calculated

A good JSON tree does more than fold brackets. It should keep keys in the order they were written, since that's how the producer sent them, and it should show every copy of a repeated key instead of silently keeping the last one the way JSON.parse does. It should show numbers by their written digits, because a tree built on JavaScript values turns an ID like 9007199254740993 into 9007199254740992 without warning. It also has to stay quick. Drawing only the rows on screen keeps a document with a million values scrollable, and the keyboard should work the way it does in any file tree: arrows to move and open, Home and End to jump. The path of the selected value matters as much as the value. Paste $.users[0].address.city into a JSONPath query, a test assertion or a log filter and you're pointing at exactly the same place.

Verdict

Reach for the tree when you're reading, not writing. Collapse everything, open the branch you need, copy its path, and use that path in your code or query. When the tree flags a repeated key or a number JavaScript can't hold, fix it at the source, since every consumer of that JSON may read it differently.

More JSON scenarios

JSON vs YAML
JSON and YAML are the two dominant human-readable data serialization formats, but they serve different philosophies.
View details ➜
JSON prettify guide
Minified JSON is a single line of dense text that saves a few kilobytes at the cost of being completely unreadable to humans.
View details ➜
JSON Schema validation
JSON Schema is a vocabulary that lets you annotate and validate JSON documents.
View details ➜

Related guides

JSONPath queries
Turn a copied path into a query that finds every match.
View guide ➜
JSON prettify guide
When a formatted text view is the better choice.
View guide ➜
JSON parse errors
Fix the syntax error before the tree can open.
View guide ➜

Frequently asked questions

What's the difference between a JSON viewer and a formatter?
A formatter lays out the text with indents and line breaks, which is best for copying and editing. A viewer shows the same data as a tree you can fold, which is best for reading large or deeply nested documents. The TechCompare JSON tool does both from the same input with a Text and Tree switch.
Can a JSON tree show duplicate keys?
Only if it reads the text itself. Tools built on JSON.parse keep the last copy and drop the rest, so the duplicate is invisible. A source-reading tree shows each copy in place and marks them as copy 1 of 2 and copy 2 of 2.
How do I copy the path of a value in a JSON tree?
Select the value with a click or the arrow keys and copy the path shown under the tree. The path uses JSONPath syntax, like $.users[0].email, so it works as a query in the Query mode and in most JSONPath libraries.

Related tools

Unix Timestamp

Convert between Unix timestamps and human-readable dates.

Use tool ➜

CHMOD Configurator

Calculate Linux file permissions using checkboxes or octal numbers, then view the matching symbolic notation.

Use tool ➜

Text Encoding Converter

Convert between Text, Base64, Binary, Hexadecimal, and Decimal formats.

Use tool ➜