JSON Viewer

Why use a JSON tree viewer?

Pretty-printed JSON is fine for a few dozen lines, but a real API response or export can run to thousands of lines and a dozen levels of nesting. A tree viewer lets you fold everything away and open only the branch you care about, with item counts on every collapsed object and array so you can see the shape of the data at a glance.

This viewer colors values by type — strings, numbers, booleans and null — so a "42" that should have been 42 stands out. The filter box searches keys and values at once, highlights every hit and automatically opens the branches that contain them; tick Hide non-matching to prune everything else away.

Clicking a key copies its path, either as JavaScript (data.items[0].name) ready to paste into code, or as JSONPath ($.items[0].name) for tools like jq-style queries, Postman tests, Kubernetes jsonpath output or database JSON functions. Large documents stay responsive because children are only rendered when you open a node, and huge arrays are shown a few hundred items at a time.

How to use the JSON Viewer

1. Paste JSON into the input box, open a .json file from your computer, or click Sample.
2. Use the arrows to open and close objects and arrays, or use Expand all, Collapse all and the level menu to set the depth for the whole tree.
3. Type in the filter box to highlight matching keys and values; matching branches open automatically.
4. Click any key to select it and copy its path. Switch between JavaScript and JSONPath style, or use Copy value to copy that subtree as formatted JSON.

Example

In the sample data, clicking name inside the first element of items copies one of these paths. Keys that are not valid identifiers use bracket notation:

data.items[0].name
$.items[0].name

data["opening-hours"].sat
$['opening-hours'].sat

JavaScript paths versus JSONPath

A JavaScript path is an expression you can paste straight after the variable that holds the parsed data, for example response.data.items[0].name. JSONPath, standardised in RFC 9535, is a query language that starts at $ and is understood by many API testing tools, log processors and SQL engines (JSON_VALUE(doc, '$.items[0].name')). Both styles use bracket notation for keys containing spaces, dashes or other characters that are not allowed in identifiers.

Tips for large documents

• Start collapsed at level 1 or 2 and drill down, rather than expanding everything.
• Use the filter with Hide non-matching to reduce a huge export to only the records you need.
• Arrays with more than 100 items show a Show more button; the hidden count tells you how many filter matches are still out of view.
• If the tree warns about duplicate keys or large numbers, check the document in the JSON Validator — the tree shows values as JSON.parse sees them.