JSON Viewer

Why view JSON as a tree

Formatted text shows you everything at once, which is the problem with a large response. A list of fifty orders, each with a customer, line items and addresses, runs to thousands of indented lines, and the field you want is somewhere in the middle of one of them. A tree lets you ignore the forty-nine you do not care about. Each object and array collapses to a single line with a count — {7 keys}, [50 items] — so the shape of the document is visible before any of its contents are.

That count is often the answer on its own. “How many results came back?”, “is this array empty?” and “does the second record have the same fields as the first?” are all answered by the collapsed view. When you need the full text instead, for example to paste into a bug report, the JSON formatter pretty-prints or minifies the same document.

How the tree is drawn

Very long strings are cut off after 400 characters with a note of their real length, so one embedded document or Base64 blob does not push everything else off the screen.

Finding a value and getting its path

Type in the filter box and the tree is redrawn with only the branches that contain a match, already opened. The filter looks at key names and at string, number, boolean and null values, without regard to case. Searching for email finds every email field at any depth; searching for null shows every field that came back empty, which is a quick way to see what an API left out.

Click any node and the bar above the tree shows its path, the route from the top of the document to that value:

$.data[0].customer.email
$.data[1].items[0].sku
$["request id"]

$ is the root. A dot introduces a key, square brackets hold an array position, and a key that is not a plain identifier — one with a space or a hyphen — is written in brackets and quotes. This is the common subset of JSONPath, and with the $ removed it is also what you would type in JavaScript or after jq's leading dot. Copy it straight into a test assertion or a line of code instead of counting brackets by eye.

Practical notes

Large documents

Branches are built the first time you open them, and an array or object with more than 500 children shows them 500 at a time, so a response with a hundred thousand records loads as quickly as a small one. Expand all is refused above 20,000 nodes, because drawing that many rows at once would freeze the tab; use the filter to reach what you need. The practical ceiling is your browser's memory, usually some tens of megabytes of JSON.

Numbers are shown as JavaScript reads them

The viewer parses with the browser's own JSON parser. Integers beyond 9,007,199,254,740,991 cannot be held exactly in a JavaScript number, so a 19-digit ID appears rounded here, exactly as it would in any front-end code that reads the same response. If digits matter, check the document in the JSON validator, which reads the original text and warns about every number that will lose precision.

When the input will not load

A tree can only be drawn from valid JSON. If the viewer reports an error, the validator will point at the line and column and name the usual cause, such as a trailing comma or single quotes. If what you pasted is a JavaScript object from a console, a Python dictionary, or a log line with a prefix in front of the JSON, it needs converting or trimming first. The guide to JSON lists the rules.

Where the JSON comes from

Send the request in the API tester, copy the response body, and paste it here. For two responses that ought to match and do not, JSON compare lists exactly which paths differ. For a list of records headed for a spreadsheet, JSON to CSV flattens them into columns.

Frequently asked questions

Related tools and reference