JSON Tree Viewer

Why a tree beats a long document

JSON is a tree by definition. Objects and arrays contain other objects and arrays, and values sit at the leaves. When that tree is printed as text, a path three levels deep takes up the same screen space as everything around it. A tree view folds branches you do not care about and lets you open only the path that leads to your value, so you can get from the root to a single leaf in a few clicks.

Reading paths

Every value in a JSON document has a path: the keys and array indexes you pass through to reach it, like order.items[1].sku. Knowing the path is what you need when you write code against the data. Object members are reached by key and array elements by position, starting from zero. When you find a value in the tree, note which levels you opened. That sequence is the path you will write in code, a query or a config reference.

Remember also that the order of members in an object is not meaningful in JSON, while the order of items in an array is. A tree may show keys in the order they appear in the text, but your code should not rely on that.

Spotting problems in the shape

Seeing the shape tells you things that reading values does not. An array that is supposed to hold objects but holds a mix of objects and strings will show it immediately. A field that is an object for one record and an array for another stands out when you open both. Very deep nesting, ten or more levels, is often a sign that a response is wrapping the same data repeatedly, which is worth raising with the team that owns the API.

A good workflow for big documents

Collapse everything, then open the first level to see the top-level keys. Pick the key that matches your question and open only that one. If the document is large, avoid expanding every node at once, since that recreates the wall of text you were trying to avoid. When you have the value or the path you wanted, switch to Table if the branch is a list of records. Tree view is free, and parsing stays in your browser.

Strings that contain JSON

Sometimes a value in the tree is itself a long string that starts with a brace and is full of backslash-escaped quotes. That is JSON stored as text inside JSON, which happens with logging systems and message queues. The tree shows it as a string because that is what it is. Copy the string value, unescape it by parsing it, and open the result as its own document to explore the inner structure.