An API response or a config file more than a few levels deep is hard to read as raw text. Counting braces to find where an array ends, or scrolling past a thousand lines to find one key, is not how anyone wants to spend their time.
Using the JSON viewer
Paste a document and the tree draws itself as soon as you stop typing. Every object and array is a disclosure you can open and close, and Expand all or Collapse all does that for the whole document at once. Clicking a leaf value selects it, highlights the exact source text it came from in the editor pane, and shows its path above the tree, ready to copy with one button.
Pasting
{"data":{"items":[{"name":"first"},{"name":"second"}]},"id":12345678901234567890}and clicking the second item’s name shows $.data.items[1].name as the
path. That is a real JSONPath expression you can paste straight into the
JSONPath tester if you need to query for
every match of that shape.
Why large documents do not freeze the tab
A tree that renders every row up front is what makes other viewers hang on a large document: laying out ten thousand DOM nodes takes real time no matter how fast the parsing was. This viewer only draws a branch once you open it, so a closed container costs nothing. Expand all still has to draw everything, so past 3000 values it refuses and tells you the count instead of locking the tab, and you can still open branches individually past that point.
What you are actually looking at
The tree is built from the same token stream the formatter reprints from,
not from a value parsed by JSON.parse. A twenty digit integer keeps every
digit in the tree, and an object key that looks like a number stays in the
position you wrote it, exactly like every other tool on this site. The tree
shows your document, not a JavaScript interpretation of it.
A fast way to answer “where is this value”
If you have ever grepped a JSON file for a value only to find three matches and no way to tell which one is inside which object, this is the faster path: open the tree, click the value, and read the path. It also works in reverse. Selecting a value in the tree scrolls to and highlights its exact source text in the editor, which is the quickest way to find a specific field in a document you did not write yourself.