JSON Viewer & Formatter Open the tool
JSON ViewerJSON Tree Viewer

Online JSON Tree Viewer

Turn a nested document into an outline you can walk: collapse the branches you do not need, filter for the key you do, and click anything to copy its JSONPath. Built for the moment a payload is too big to read top to bottom. Runs entirely in your browser.

Open the JSON tree viewer →

Why a tree beats indented text

Indentation is enough while a document fits on one screen. Past that, every question about it — how many orders came back, what one record looks like, where a field lives — turns into scrolling. A tree answers those without moving.

Collapsing hides what you are not reading. A closed branch is one line, so shutting the three arrays you do not care about puts the two objects you do side by side — something pretty-printing cannot arrange for you.

Child counts size a branch before you open it. Each is labelled Array[240] or Object{6} and previews its first entries, so you learn results holds 240 items without scrolling past one. The footer counts the whole document in nodes, keys and depth.

The path readout answers "where am I?". Select a node and the bar under the tree shows its full path from the root. Raw text cannot: at line 4,000, working out which array element you are inside means counting braces upwards. Use the tree to find the thing, then the formatter or minifier to work on the text.

How to use the tree

  1. Load the JSONOpen the JSON viewer and paste your JSON, drop a .json file onto the page, or fetch it with the URL button.
  2. Switch to the Tree tabChoose Tree at the top of the output panel. The root and its immediate children open automatically.
  3. Expand and collapse branchesClick a chevron or double-click a row. Each branch is labelled Array[n] or Object{n}, so you see how much is inside before opening it.
  4. Filter the treeType into the filter box above the tree. Branches that lead nowhere disappear, matched text is highlighted, and a counter shows how many nodes matched.
  5. Read and copy the pathClick any node and its path appears in the bar under the tree. Click a key to copy that path, or a value to copy the value.

Expand all and collapse all

The two buttons at the right of the output header open or close everything at once, switching you to the Tree tab first if you are on Raw. Expand all stops after 20,000 nodes and says so, keeping a runaway document from freezing the page. Collapse all reopens the root, so you land on the overview, not an empty panel.

Alt+click to open a whole subtree

Hold Alt while clicking a chevron and the entire subtree below it opens — or closes, if it was open. Reach for this when you want everything under data and nothing under meta.

Walking the tree with the arrow keys

and move between visible rows, skipping collapsed branches. opens the selected branch or moves onward if it is already open; closes it or jumps to the parent. A closed branch counts as one row, so holding skims the top level of a huge document in seconds.

The filter box: match counts and highlighting

The filter matches case-insensitively against every key and scalar value in the whole document, not just the part on screen; numbers, booleans and null match as the text you see. Anything that is neither a hit nor an ancestor of one is hidden, what survives is expanded for you, matched characters are highlighted, and the counter reads 3 matches or no matches. If a key matches but nothing inside it does, its whole subtree stays visible.

Click a key to copy its path, a value to copy the value

A key copies its JSONPath; a value copies that value, unquoted; a branch label copies the entire subtree as formatted JSON — the quickest way to lift one record out of a thousand-item response into a test fixture. Each row also carries small copy-value and copy-path buttons, and every copy is confirmed by a toast.

The Raw tab for the formatted text

Raw shows the same document as syntax-highlighted text at your chosen indentation, with Sort keys applied if it is on. Use it to read a section in order, or to copy a block of text rather than a subtree. The tab you used last is remembered.

JSONPath: what the copied path means

The path this tool copies is JSONPath notation — the shorthand used by jq, by most REST clients and by nearly every JSON assertion library. It describes one route from the top of the document to one value. Take this small example:

{
  "users": [
    { "id": 7, "email": "ada@example.com", "roles": ["admin", "billing"] },
    { "id": 8, "email": "grace@example.com", "roles": [] }
  ],
  "meta": { "total": 2, "next page": null }
}

There are four pieces of syntax. $ is the document root; .key steps into a member of an object; [n] takes an array element, counting from zero; and a key holding a space, a dot or anything else that would be ambiguous after a full stop goes in brackets and quotes instead — ["next page"].

PathWhat it selects
$The whole document
$.usersThe users array — both objects
$.users[0]The first user object, { "id": 7, … }
$.users[0].emailThe string "ada@example.com"
$.users[0].roles[1]The string "billing"
$.users[1].rolesAn empty array — a leaf with nothing to expand
$.meta.totalThe number 2
$.meta["next page"]null — brackets because the key has a space

Where you paste it

A path is worth copying because it is what every other tool wants from you, and the thing easiest to mistype:

  • A test assertion. Drop the $ for a JavaScript accessor: expect(body.users[0].email).
  • A jq expression. Drop the $ and jq takes the rest verbatim: jq '.users[0].email' data.json.
  • A Postman or REST-client test. pm.response.json().users[0].email, or a JSONPath field in your runner.
  • A bug report. "$.users[1].roles is empty for invited users" needs no screenshot.
  • A mapping config. ETL steps, webhook templates and low-code connectors take a JSONPath-style pointer to the source field.

One caveat: a copied path points at a single value. Full JSONPath also has wildcards and filters — $.users[*].email — which this tool does not generate, because it describes the node you clicked.

Payload shapes the tree handles well

A paginated API response

The classic { "data": [...], "meta": {...} } envelope. Collapse data and read meta first — page, per-page, total tells you whether a missing record is absent or just on page two. Then open data[0] as your reference for the record shape.

A GeoJSON FeatureCollection

Each feature holds a geometry whose coordinates array runs to thousands of number pairs — the part you never want to read. Keep geometries collapsed and open properties instead, or filter a property name to pull matching features out. The Array[n] label on a coordinate ring is detail enough.

A lock file or dependency graph

A package-lock.json is wide and shallow, one entry per package — a filtering job, not a browsing job. Type the package name and the tree collapses to that entry, its version and resolved URL visible; because the key matched, its subtree stays open.

A deeply nested config

Config nests for structure, not volume, so this is where Alt +click earns its keep: open one branch to the bottom and leave the siblings shut. Select the setting you were arguing about and the path readout gives you the exact dotted name to quote.

An array of thousands of records

Branches are built only as you open them, so a very long array appears instantly. Above 200 children a branch renders 200 at a time behind a Show 200 more button that reports how many remain hidden. Do not expand all here — filter for the id you want and let the counter say whether it is one hit or four hundred.

Keyboard shortcuts

The arrow keys, Enter and * act on the selected node, so click a row once to give the tree focus.

KeysWhat it does
CtrlFJump to the tree filter and select what is in it
EscClose an open dialog, or clear the filter
Move to the next or previous visible node
Expand the node, or move on if it is already open
Collapse the node, or move up to its parent
EnterToggle a branch; on a leaf, copy the value
ShiftEnterCopy the JSONPath of the selected node
*Expand or collapse the whole subtree below it
Alt+clickSame as *, on the chevron you click
Double-clickOpen or close the row under the pointer

Frequently asked questions

What is a JSON tree viewer?

A JSON tree viewer parses a JSON document and draws it as a collapsible outline instead of text. Every object and array becomes a branch you can open or close, labelled with the number of children it holds, and the leaves show the values. It is the fastest way to grasp the shape of an unfamiliar payload.

How do I copy the path to a value in JSON?

Click the key of the node you want and its path goes to your clipboard immediately, with a toast confirming what was copied. You can also select the node and press Shift plus Enter, or use the path readout in the bar under the tree, which has its own copy button.

What does $.users[0].email mean?

It is a path that walks from the root of the document down to one value. The dollar sign is the document itself, .users selects the member named users, [0] takes the first element of that array because indices start at zero, and .email selects that member of the element. A key containing a space or a dot goes in brackets with quotes instead.

Can I search inside a large JSON tree?

Yes. The filter box matches your text against every key and value in the whole document, not only the parts that happen to be open. Branches leading to no hit disappear, the ones that do stay expanded, matched text is highlighted, and a counter says how many nodes matched.

How large a JSON file can the tree viewer handle?

Files up to 25 MB can be opened, and the tree copes because it only builds the branches you actually open. A node with more than 200 children is drawn 200 at a time behind a Show more button, and Expand all stops after 20,000 nodes so a huge document cannot lock up the page.

Does the tree viewer send my JSON anywhere?

No. Parsing, the tree, the filter and every copy action run as JavaScript in your own browser, and your text is kept only in browser storage so a refresh does not lose it. The one exception is the Load from URL button, which fetches the address you type in.