JSON Tree Viewer

Why a tree beats a wall of text

A formatter pretty-prints JSON with indentation, which helps — until the file is a few hundred lines deep and you're scrolling endlessly to find one value. A tree viewer treats JSON as what it actually is: a nested structure of objects and arrays. Each branch can be folded shut, so you can collapse the parts you don't care about and drill straight into the part you do. Instead of reading every line to understand the shape of the data, you expand it one level at a time, like browsing folders. That's the core advantage this tool offers over plain reformatting.

How type coloring helps you read data faster

JSON has exactly seven value kinds, and the viewer color-codes them so the data type is obvious at a glance rather than something you infer from quotes and brackets:

• Strings in green, shown with their surrounding quotes
• Numbers in blue (integers and floats alike)
• Booleans (true/false) in orange
• null in gray
• Arrays in purple, with an item count
• Objects in the default text color, with a key count
• Keys highlighted distinctly from their values

This matters more than it sounds. The classic bug of a number arriving as a string — "42" instead of 42 — is instantly visible because one is green and the other blue. The count labels (3 items, 5 keys) on every array and object let you confirm at a glance that a list has the length you expect without expanding it.

A worked example

Click Load Sample and you get an object with two top-level keys, user and meta. The user branch shows 7 keys next to its {. Expand it and you see a green "Alice" for the name, a blue 42 for the id, an orange true for active, a purple tags array labeled 2 items, a nested address object, and a gray null for notes. Hover over the city value and the path bar at the bottom reads user.address.city. That is the exact dot-and-bracket path you'd write in code to reach that value — copy it straight into data.user.address.city and you've got a working accessor.

The path breadcrumb is the killer feature

When you hover any node, the bar beneath the tree shows its full path from the root in JavaScript notation — objects joined with dots, array elements with bracket indices, e.g. data.users[2].email. Working with an unfamiliar API response, this turns "where does this value live?" from a counting exercise into a hover. You can also click any primitive value (string, number, boolean, or null) to copy it to your clipboard, which is handy for grabbing a token or an id out of a deeply nested payload without selecting text by hand.

Practical use cases

• Inspecting API responses — paste a payload from your network tab and navigate it structurally instead of squinting at minified text.
• Writing accessor code — hover to read the exact path, then paste it into your JavaScript, Python, or jq expression.
• Auditing config files — collapse everything, then expand only the section you're changing to avoid distraction.
• Spotting type bugs — the color coding makes string-vs-number and accidental nulls jump out.

Tips and limitations

• Use Collapse All on big files first. For large payloads, collapse everything and expand top-down — rendering tens of thousands of nodes fully expanded can briefly hang the browser.
• The input must be strict JSON. Trailing commas, single quotes, comments, or unquoted keys are JavaScript object literals, not JSON, and will trigger the parse error shown beneath the input. The error message names the problem so you can fix it.
• It views, it doesn't edit. This is a read-only inspector; to reshape data, copy the values you need and edit them in a formatter or your editor.
• Your data stays private. Parsing and rendering happen entirely in your browser using the native JSON.parse — nothing is uploaded, logged, or stored, so it's safe for sensitive payloads.

Common mistakes

• Pasting a JS object instead of JSON. If it came from your source code rather than a network response, it probably has trailing commas or unquoted keys — wrap keys in double quotes and remove trailing commas.
• Expecting comments to survive. JSON has no comment syntax; a // or /* */ will fail to parse. Strip them first.
• Confusing an empty array with an empty object. [] and {} render their own brackets — check the bracket style, not just the emptiness, when a structure looks bare.