JSON Tree Viewer

What this tool does

JSON Tree Viewer displays a JSON document as an interactive, collapsible tree with colour-coded types and item counts. You can search keys and values, expand or collapse everything, and click any node to copy its JSONPath, JavaScript accessor, JSON Pointer or value.

Even well-formatted JSON becomes hard to navigate once it runs to thousands of lines. Finding where a field lives, how deeply it is nested or what the exact path to it is, so you can reference it in code, usually means scrolling and counting brackets. Writing data.orders[3].lines[0].sku by hand is a common source of off-by-one bugs.

The tree viewer parses your JSON and draws it as a hierarchy you can fold and unfold. Strings, numbers, booleans and null are colour-coded, and collapsed objects and arrays show how many keys or items they contain. Large arrays are rendered 100 entries at a time with a “Show more” button, so a file with tens of thousands of records stays responsive. Search filters the tree to matching keys and values with their parents, and clicking a node shows its path in three notations ready to copy. Nothing is uploaded.

How to use JSON Tree Viewer

1. Paste JSON into the JSON input box, open a file, or click Sample.
2. Set “Expand levels on load” in Options to control how much of the tree opens automatically.
3. Click the arrow next to an object or array to expand or collapse it, or use Expand all and Collapse all.
4. Type in “Search keys and values” to show only matching nodes and their parents, with matches highlighted.
5. Click a key or value to select it; the Selected node panel shows its JSONPath, JavaScript path and JSON Pointer.
6. Use the copy buttons to copy a path or the value of the selected node as formatted JSON.

Tips for better results

• Search is case-insensitive and matches both key names and primitive values, so searching for an ID finds the record that contains it.
• The JSONPath shown can be pasted straight into the JSONPath Tester to build a wider query.
• JSON Pointer paths (RFC 6901) are what JSON Patch and many schema tools expect, for example /orders/0/total.
• For very large arrays, search first rather than expanding everything, to keep rendering quick.

Common use cases

• Understanding the shape of an unfamiliar API response before writing client code.
• Locating a specific field in a large configuration or export file.
• Copying exact accessor paths for templates, mapping rules or test assertions.
• Checking how many items an array holds without counting by hand.

Common mistakes to avoid

• Pasting invalid JSON and expecting a partial tree; fix the reported error first, or enable relaxed mode for comments.
• Using the JavaScript path with a different variable name; replace “data” with whatever holds your parsed object.
• Confusing array indexes with positions: indexes start at 0, so the third item is [2].