JSON Viewer & Tree Explorer

How to explore JSON in a tree viewer

Nested API responses can contain useful fields several levels below the root. The tree viewer turns each object or array into an expandable branch, so you can inspect one section without reading the entire document at once.

1. Paste JSON or open a local file. The tool validates before showing the tree.
2. Expand the root and the branch you want to inspect. Objects show member counts; arrays show item counts.
3. Use the path button on a row to place its path into the selector and copy it when clipboard access is available.
4. Choose Extract to show the selected value as JSON text in Code view.

The tree always represents the full validated input, even after a path extraction. Code view holds the latest formatted, minified, or extracted output. This distinction makes it possible to keep exploring the original response while exporting one useful part.

Property paths, arrays, and unusual names

The selector supports a deliberately small path syntax. Start with $ for the root, use dots for ordinary names, and brackets for array indexes or names that contain spaces and punctuation.

These paths do not implement the complete JSONPath query language. Wildcards, recursive descent, slices, and filter expressions are not supported. Use a specific path for a predictable selection. If an object contains the same key twice, extraction reports ambiguity rather than choosing an occurrence.

Inspect long arrays one page at a time

Rendering thousands of rows at once can make a page difficult to navigate. The viewer creates children when you expand a branch and loads at most 100 child rows at a time. Choose Show next to inspect more items. Collapse tree closes the currently expanded branches.

The whole input is still parsed before the tree appears. Lazy rows reduce display work; they do not remove the document limits. The tool accepts up to 10 MiB, 256 levels of nesting, and 300,000 values. A limit message is different from a JSON syntax error.

Read types instead of relying on appearance

A field shown as "false" is a string; false is a boolean. A number token has no surrounding quotes. Empty objects and arrays are different from null, and an array’s zero-based index is different from an object property whose name happens to be a digit.

The viewer keeps source token spelling. This is useful when inspecting a long numeric ID, an escaped string, or repeated object members. It avoids losing those details just to create the display.

A practical API debugging workflow

Start at the root to see whether you received an object or array. Expand the response’s data field, inspect one record, then compare the required fields with your API contract. If the data is wrapped in an error object instead of a result array, the root shape often makes that visible immediately.

Use the JSON examples to practice with an API-style response. Read the syntax error guide if the tree cannot open. A successful tree view confirms parseable JSON, but it does not certify that your application received the right data.

Frequently asked questions