See the structure, not just the text
Scrolling through thousands of lines of formatted JSON makes it hard to understand how the data is organised. A tree view shows the hierarchy directly: every object and array is a node you can fold away, with a badge telling you how many keys or items it contains. Values are colour-coded — strings, numbers, booleans and null each have their own colour — so problems like a number stored as a string stand out.
Features
- Expand / collapse any node, or everything at once.
- Filter by key name or value: matching nodes are highlighted and their parents opened automatically.
- Path on hover – hover over a node to see its path, such as
$.cluster.services[2].healthy, ready to use in the JSONPath evaluator. - Text tab – switch to formatted JSON at any time.
- Large arrays are capped at 2,000 visible children per node to keep the page responsive.
How to use it
- Paste JSON or upload a file.
- Click the ▸ arrows to open or close nodes, or use Expand all / Collapse all.
- Type in the filter box to find keys or values anywhere in the document.
Frequently asked questions
How large a file can the tree viewer handle?
Files of a few megabytes render fine. Very large arrays show the first 2,000 items per node to keep scrolling smooth.
Can I edit values in the tree?
The tree is read-only. Edit the JSON in the input box and the tree updates automatically.
How do I get the path of a value?
Hover over the node; the tooltip shows its path in JSONPath notation.
Is the JSON uploaded?
No. The tree is built in your browser.