JSON Tree Viewer
Visualize JSON as a collapsible, expandable tree, with keys in their original order, numbers as written, and a copyable path to every value.
JSON tree viewer — explore nested JSON visually
Paste any JSON object or array and explore its structure in a collapsible tree. Click the arrow next to any object or array to expand or collapse it, and use the copy button on a row to get its path, such as $.address.city, which reads as both JSONPath and JavaScript. The tree is read from your text rather than from a parsed object, so keys stay in their original order, a repeated key shows twice, and numbers appear exactly as written, with a note where JavaScript would round one. Typing in the filter opens every branch that holds a match. Types are color-coded: strings in green, numbers in blue, booleans in yellow. To format raw JSON first, try JSON Formatter. To generate a JSON Schema from your JSON, use JSON Schema Generator.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Finding one field inside a deeply nested response by collapsing everything you do not need.
- Exploring an unfamiliar API payload to understand its structure before writing code against it.
- Checking the type of a value that looks like a number but might be a string.
- Working out how deep a structure actually goes before choosing how to traverse it.
- Reading a large response without scrolling through hundreds of formatted lines.
How it works in practice
A worked example
A developer is writing the handler for a payment provider's order.paid webhook and pastes a sample payload in to see its shape and the type of each field.
{
"event": "order.paid",
"attempt": 1,
"order": {
"id": "ord_8812",
"total": 59.90,
"currency": "EUR",
"items": [
{ "sku": "MUG-01", "qty": 2, "price": 19.90 },
{ "sku": "TEE-L", "qty": 1, "price": 20.10 }
],
"customer": { "email": "dana@example.com", "vip": false },
"note": "Leave at the door\nRing twice"
}
}▾ {3}
"event": "order.paid" string
"attempt": 1 number
▾ "order": {6}
"id": "ord_8812" string
"total": 59.90 number
"currency": "EUR" string
▸ "items": [ 2 items ]
▸ "customer": { 2 items }
"note": "Leave at the door\nRing twice" stringThe viewer opens the first two levels and folds everything deeper, which is why items and customer arrive as one-line summaries, [ 2 items ] and { 2 items }, while an open container shows a bare count instead, as order's {6} does. Values appear as the sender wrote them rather than as JSON.parse returns them. The total keeps the trailing zero of 59.90, which a handler receives as 59.9 because a JavaScript number keeps no record of trailing zeros, and the note shows its \n as an escape, so the line break inside the string is plain to see.
The edge case that catches people
Typing sku into the filter opens items and both of its objects, which start folded, and tints the two sku rows, with 2 matches counted beside the box. The filter only ever opens branches: rows that do not match stay on screen, and a branch you fold by hand stays folded while you type. So before deciding a key is missing from a payload, check the match count, which counts every matching row, whether it is showing or not.
When not to use this tool
Configuration files that only look like JSON are the case to watch. VS Code's settings.json, tasks.json and launch.json are JSON with Comments, a mode that allows // and /* */ comments and accepts trailing commas, but this viewer passes your text straight to the browser's strict JSON.parse, which rejects both. Paste one in and you get the parser's error under the input and the tree panel falls back to its placeholder. Strip the comments and trailing commas first, or read the file in an editor that understands JSONC.
Frequently Asked Questions
- Why view JSON as a tree rather than formatted text?
- Because a formatter only adds whitespace — you still scroll a 5,000-line document. A tree lets you COLLAPSE branches and see structure at a glance, which is the difference between reading a document and navigating one.
- What does the viewer show that a formatter does not?
- Types per node, array lengths and object key counts, and a path to each value you can copy — so you can see that a field is the string "42" rather than the number 42, which formatted text renders almost identically.
- How do I find one value in a large document?
- Type its key or value into the filter, which opens every branch holding a match. Each row's copy button gives its path in dot or bracket notation, such as
$.order.items[0].sku, ready to paste into code or a JSONPath query. For querying rather than locating, JSONPath itself returns sets, not one position. - Are key order and duplicates preserved?
- Yes, both. The tree is read from your text, not from JSON.parse's object, so keys keep their source order, where a JavaScript object moves integer-like keys such as "10" to the front, and a repeated key shows twice, the earlier row marked as the one JSON.parse drops.
- Does it handle very large files?
- Rendering is the limit rather than parsing. Documents in the tens of megabytes will freeze a browser tab regardless of the viewer, because every node becomes DOM. Stream-based tooling is the answer at that scale.
Common errors and gotchas
- Assuming a value shown without quotes is a number. Confirm the type rather than reading the rendering.
- Expecting key order to survive in code. JSON objects are unordered, and once parsed, JavaScript lists integer-like keys first, whatever order the text has.
- Reading a collapsed node's summary count as a total. It usually counts direct children only.
- Missing a duplicate key. JSON.parse keeps the last one without a word; this viewer shows both rows and marks the one that is dropped.
- Trusting a large integer once code has parsed it. Above 2^53, JSON.parse rounds it, which this viewer flags beside the value as written.