JSON Tree Viewer

How the JSON Tree Viewer works

API responses, config files and log entries are often a single line of JSON thousands of characters long. A formatter makes them readable, but a deeply nested document is still a long scroll. A tree lets you fold away the parts you do not care about and walk down to the field you need.

How the JSON tree viewer reads your data

The input is parsed with the browser's own JSON.parse, so it follows RFC 8259 strictly. Trailing commas, comments, single quotes and unquoted keys are errors, and the message tells you roughly where parsing stopped. If you are working with JSON5 or a JavaScript object literal, convert it to strict JSON first.

Each object or array becomes a node with a summary line: the key, a { } or [ ] marker and a count of keys or items. Click the summary to open or close it. Scalar values sit on their own rows and are coloured by type:

• Strings in green, shown with their quotes so you can spot "42" versus 42.
• Numbers in blue.
• true and false in amber.
• null in grey italics.

That colouring is the fastest way to catch a classic API bug: a number or boolean that arrived as a string, which compares and sorts differently in most languages.

Choosing how much opens on load

Open on load sets how many levels start expanded. One level shows only the top-level keys, which suits a large response where you want an overview first. Two or three levels show the usual shape of an API record. All levels expands everything, which is fine for small documents but can be a lot to scroll through on a big one.

You can still open or close any node by hand afterwards. The setting only controls the starting state.

Reading the paths

The code panel lists one line per node in document order. Containers show their type and size, and scalar values show their value, for example $.items[1].price = 18. The notation is the dot and bracket style used by JSONPath and by JavaScript itself:

• $ is the root of the document.
• .name follows a key that is a plain identifier.
• ['first name'] follows a key with spaces, hyphens or other characters.
• [0] follows an array position, counting from zero.

Paste a path into a JSONPath tester to build a query around it, or drop the $ and use the rest in JavaScript to reach the same value. The first line also reports the total node count and the deepest nesting level, which is a quick measure of how complicated a payload is.

Large documents

The viewer stops after 4,000 nodes so the page stays responsive, and says so in the code panel. Each value, object and array counts as one node, so a response with 500 records of eight fields reaches the limit. For bigger files, cut out the part you need first or use a command-line tool such as jq, which streams data rather than drawing it.

Common things a tree reveals

Seeing the structure laid out tends to expose problems that are easy to miss in raw text:

• Arrays that mix types, such as numbers and strings, which break typed parsers.
• Keys that appear in some records but not others, a sign that a field is optional.
• Duplicate-looking keys with different case or trailing spaces.
• Unexpected nesting, such as a list wrapped in an extra object by an API gateway.
• Empty objects and arrays where you expected data.

When a key appears twice in the same object, JSON.parse keeps the last value, as most parsers do. The tree therefore shows what your code will actually receive, not every line of the source.

Privacy

The JSON is parsed and drawn entirely in your browser. Nothing is uploaded, which matters when the payload holds customer records, tokens or internal configuration.

Related tools