Reading a document as a tree
The left pane holds the text; the right pane shows the same document as a tree, one row per key or array item. Objects show how many keys they have and arrays how many items, so you can judge the size of a branch before opening it. Values are coloured by type, matching the legend under the tree: strings, numbers, booleans and null each have their own colour, and objects and arrays are marked with { } and [ ] badges.
Click a row to select it. The input line it came from is highlighted in the editor, which helps when the same key appears in many places, and a container row opens or closes with the same click. The selected node’s path is shown under the tree in your choice of JSONPath, jq, JavaScript or JSON Pointer notation, with Copy path and Copy value buttons. Copied values are re-serialised from the tree with their original digits, so a 20-digit ID is copied exactly.
Statistics at a glance
The bar above the tree counts every object, array, string, number, boolean and null in the document, plus the maximum nesting depth and the size in bytes (UTF-8, as it would be sent over the network). These numbers answer common questions quickly: is a response suspiciously deep, are there nulls where you expected values, did the export include the arrays you wanted? For a deeper breakdown by path, see the JSON Size Analyzer.
Expanding, collapsing and searching
- Expand to depth opens every branch down to the level you pick, which is the quickest way to see the shape of an unfamiliar document. Depth 1 shows only the top-level keys.
- Expand all and Collapse all do what they say, even on documents with hundreds of thousands of nodes.
- Search keys and values filters the tree to the matches and the branches that lead to them, and highlights the matching text. Previous match and Next match step through the results, selecting each one and scrolling it into view.
Everything works from the keyboard. Tab into the tree, move with the arrow keys, Page Up and Page Down, Home and End, open a branch with Right or Enter, and close it or jump to its parent with Left.
Built for large files
A background worker parses the text straight into a compact table of nodes, and only the rows currently on screen exist in the page. A 10 MB API dump with a million nodes scrolls as smoothly as a small one, and opening every branch at once does not freeze the tab. Very large documents start with only the first level open.
Above a million nodes the tree shows the first million and says so, while the statistics still cover the whole document. Nothing is uploaded: the file never leaves your machine, which makes the viewer safe for production data and logs.
When the JSON does not parse
Invalid input shows the parser’s message with its line and column, and the spot is marked in the editor. If the text came from a chat assistant, a log line or a JavaScript file, JSON Repair can usually fix it automatically and lists every change it made. To check a document without browsing it, use the JSON validator; to see arrays as rows and columns, use the JSON Table Viewer.
Examples
A paginated API response
Expand data to compare the three users; plan is an object for two of them and null for the third, which the statistics bar counts.
{
"page": 1,
"per_page": 3,
"total": 214,
"data": [
{ "id": 101, "email": "ada@example.com", "verified": true, "plan": { "name": "pro", "seats": 5 }, "tags": ["admin", "billing"] },
{ "id": 102, "email": "linus@example.com", "verified": false, "plan": null, "tags": [] },
{ "id": 103, "email": "grace@example.com", "verified": true, "plan": { "name": "team", "seats": 25 }, "tags": ["ops"] }
],
"links": { "next": "https://api.example.com/users?page=2", "prev": null }
}A nested service configuration
Use Expand to depth 3 to compare production and staging side by side, then copy the jq path of a rollout value.
{
"service": "checkout",
"env": {
"production": {
"replicas": 6,
"resources": { "cpu": "500m", "memory": "1Gi" },
"features": { "newPricing": { "enabled": true, "rollout": 0.25, "regions": ["eu-west-1", "ap-southeast-1"] } }
},
"staging": {
"replicas": 1,
"resources": { "cpu": "250m", "memory": "512Mi" },
"features": { "newPricing": { "enabled": true, "rollout": 1, "regions": ["eu-west-1"] } }
}
}
}Exact numbers and unusual keys
The 20-digit order ID and the long decimal keep every digit, \u00e9 is shown as é, and the JSON Pointer for the sku escapes the slash and tilde.
{
"orderId": 12345678901234567890,
"amount": 0.1000000000000000055511151231257827,
"currency": "EUR",
"customer": { "name": "Zoë Müller", "note": "caf\u00e9 \"VIP\"" },
"lines": [ { "sku": "A/B~1", "qty": 2 } ]
}Common errors and how to fix them
| Error | Cause | Fix |
|---|---|---|
Missing comma after line 3Explained | Two members of an object are not separated by a comma, often after hand-editing. | Add the comma at the marked position, or paste the text into JSON Repair. |
Strings must use double quotes, not single quotesExplained | The text is a JavaScript or Python literal rather than JSON. | Replace the quotes, or let JSON Repair convert the whole document. |
The tree shows the first 1,000,000 of 1,450,000 nodes | The document has more nodes than the tree keeps in memory at once. | The statistics still cover everything. To look at one part, copy that branch into a new tab, or query it with the JSON Path Finder. |
Frequently asked questions
How large a file can the viewer open?
Files of 10 MB and more open smoothly, because parsing happens in a background worker and only the visible rows are drawn. The tree keeps up to one million nodes; the statistics always cover the whole file.
Does the viewer change my JSON?
No. It only reads the text. Copy value re-creates the selected branch from the tree with its original digits, and the input stays exactly as you pasted it.
Which path notation should I copy?
JSONPath for API tools and test assertions, jq for the command line, JavaScript for code such as data.items[0].name, and JSON Pointer for JSON Patch and JSON Schema references.
Why does a search hide part of the tree?
Search filters the tree down to the matching rows and the branches that lead to them. Clear the search box to see the whole document again with your expanded branches as they were.
Is the data uploaded?
No. Parsing, searching and copying all happen in your browser; the page sends nothing you paste or open to any server.