JSON Tree Viewer

Paste a JSON document and read it as a collapsible tree instead of a wall of brackets. Expand only the branches you care about, search across every key and value at once, and copy the JSONPath of any node with a single click.

How to use it

1. Paste JSON into the input box, or load a .json file.
2. The tree opens two levels deep — click a chevron to open or close a branch.
3. Type in the search box to filter the tree down to matching keys and values.
4. Hover a row and click the copy icon to put its JSONPath on your clipboard.

Nothing is sent anywhere: the document is parsed and rendered in your browser.

What the tree shows

Every row is one node. Objects and arrays get a chevron plus a badge counting their entries; primitives show their literal value, colour-coded by type (strings, numbers, booleans and null each get their own colour) with a type badge. Turn the badges off with the Show types and sizes switch if you'd rather see a plain tree.

The summary line above the tree gives the document's total node count and how many levels deep it nests — a quick sanity check on an unfamiliar API response.

How does the search work?

A node matches when the search text appears in its key, or in its value for strings, numbers, booleans and null. Every ancestor of a match stays visible (and is opened automatically) so you can see where the match sits. If a match is an object or an array, its whole subtree stays available to expand — you asked for that branch, so nothing inside it is hidden.

What is the JSONPath the copy button gives me?

The canonical path from the document root to that node, in the same syntax libraries and query tools use: $.members[0].name. Property names that aren't plain identifiers are bracketed and quoted instead — $["order-id"] — so the path is always valid to paste straight into a JSONPath query.

Why does it say "Showing the first 4,000 rows"?

Only expanded rows are rendered, so a collapsed branch costs nothing however large it is. Expanding a very large document past 4,000 visible rows stops being readable, so the tree stops there. Collapse a branch or use the search box to narrow it down.

My JSON won't parse

The error message under the input box points at the token that broke parsing — either quoting the offending snippet or giving a line and column, depending on your browser. The usual culprits are a trailing comma, a single quote where a double quote belongs, or an unquoted key. This viewer only accepts strict JSON; run the document through a formatter first if you need it repaired.

Related tools

To pretty-print, minify or validate the same document, use the JSON Formatter. To change values rather than just read them, the JSON Editor is a full tree/text/table editing surface. And once you've copied a path from here, the JSONPath Tester will run it as a real query and show every node it selects.