How to Explore Nested JSON Without Getting Lost

JSON Viewer is a tree for that job. You expand one branch and leave the rest collapsed. The text stays in the browser. There is no account. If the payload might hold a token or a customer record, do not treat a random website as a scratch pad - browser-local is the safer default.

Why a wall of keys is the wrong view

Pretty-print is the right first step for a 20-line config. It is the wrong working view for an 80 KB webhook. Your eyes track indentation until they do not. You lose the parent. You search for "id" and get twelve hits. You scroll past the array you needed.

A tree changes the interaction. Collapse meta, debug, and links. Open data. Open items. Open index 4. That is the difference between “I printed it” and “I found the field.”

The formatter is still required when you are not sure the paste is JSON. A viewer on invalid text is a waste of a minute. Validate, then view. The how-to for that first step is How to Format and Validate JSON.

Tree, graph, and pretty-print are different jobs

Pretty-print answers “what does this look like as text?” Use it to copy a snippet into a ticket or to confirm a small object by eye.

Tree answers “what is the value at this path?” Use JSON Viewer when you know, or almost know, the path. Arrays become indexes. Objects become keys you can open one at a time.

Graph answers “how is this nested?” Use JSON to Graph Visualizer when you do not know the path yet, or when two collections share a child shape and you need the map. The graph article covers that mode. Do not graph a document just to read status.

If the source is still XML, CSV, or YAML, convert first. A tree of CSV cells you pasted as a string is not a table. XML to JSON, CSV to JSON, and YAML to JSON exist so the viewer sees objects.

Walking one path without losing the rest

A useful habit: name the path before you click. errors[2].code. included[0].attributes.title. data.user.addresses[1].postalCode. Then expand only those nodes.

If you are comparing two items in an array, expand those two indexes and keep the siblings closed. If you are checking whether a key exists, collapse everything else so a missing node is obvious.

Copy the smallest object that answers the question, not the whole document. The whole document is how tokens travel into Slack. Redact Authorization, emails, and account numbers before the snippet leaves the tab.

A webhook with nested arrays

A billing webhook arrives as a single line. It parses. The interesting part is payload.orders[].payments.

Beautify gives you a wall of keys: id, sku, qty, payments, refunds, customer, meta. On DevOkk you confirm validity in the formatter if you have not already, then use the viewer to expand payload → orders → the order you care about → payments. You read method and last4 on one object. You do not need the graph unless you are explaining the shape to someone who has never seen the webhook.

If you are writing a test fixture from this, copy the one order, strip live tokens, and minify last. You never needed a second domain for that sequence.

A second example is a JSON:API-style body: data plus included. The tree is how you check that included[3].type matches the relationship you expected. Searching a pretty-print for "type" is how you pick the wrong resource.

What a viewer will not do

It will not validate schema. It will not edit and write back to your API. It will not follow JSON Pointer or JSONPath as a query language beyond what you can click. It will not stream a 500 MB dump. Sample the file or use jq locally for that.

It will not make unsafe data safe. A collapsed tree still holds the string you pasted. Close the tab when you are done. Do not leave a production export sitting in a background window on a shared machine.

Concatenated JSON and NDJSON are not one tree. Split them. A viewer that “sort of” renders two documents is worse than a hard fail.

Format first, then open the viewer or the graph

If the paste is not valid yet, format it first. If it is valid and you know the path, open JSON Viewer. If you do not know the path and nesting is the question, use the graph visualizer and read How to Visualize JSON as a Graph. The rest of the set lives under JSON tools.