JSON Viewer: Explore JSON as a Tree
Paste JSON or drop a file to browse it as a collapsible tree. Search for any key or value, see each node's type and size at a glance, and click a node to copy its path. One of our free JSON tools.
Input
Output
Paste JSON to see its tree.
How to view JSON as a tree
- Step 1
Load the JSON
Paste it, drop a file on the input panel, or fetch a URL from your browser.
- Step 2
Explore the tree
The first two levels open automatically. Expand nodes, or search for a key or value to jump straight to it.
- Step 3
Copy what you need
Click any node to copy its JSONPath, or switch to Code view to copy formatted JSON.
Worked example
total copies the path you would use in code or in a JSONPath query.
{
"user": { "id": 42, "name": "Ann" },
"orders": [
{ "id": "A-1", "total": 18.5 },
{ "id": "A-2", "total": 99 }
],
"coupon": null
}$ {3} obj
├─ user {2} obj
│ ├─ id: 42 num
│ └─ name: "Ann" str
├─ orders [2] arr
│ ├─ 0 {2} obj
│ └─ 1 {2} obj
│ ├─ id: "A-2" str
│ └─ total: 99 num ← click
└─ coupon: null null
Copied: $.orders[1].totalReading the tree
Every row is one node: its key (or its index, for array items), its value, and a small badge with its type: obj, arr, str, num, bool or null. Objects and arrays show how many children they hold, as {4} for an object with four keys or [120] for an array of 120 items, so you can spot an empty list or an unexpectedly large one without opening it. Strings keep their quotes, which makes "42" easy to tell apart from 42.
The viewer opens the first two levels when the document loads. That is usually enough to see the shape of an API response: the top-level keys and what sits directly under each. Use the arrows to open or close a branch, Expand all to open everything, and Collapse all to start again from the root.
Searching keys and values
Type in the search box to find every key or value that contains your text, ignoring case. Each match's parents open automatically, matching text is highlighted, and the counter shows how many matches there are. Press Enter to move to the next match and Shift+Enter for the previous one. Search looks at the text of primitive values, so searching true finds booleans as well as strings containing the word. The first 500 matches are listed.
Copying a JSONPath
Click any node to copy its path, such as $.orders[1].total. Plain keys use dot notation; keys with spaces, dashes or other punctuation use brackets, as in $.headers['content-type']. The path works directly with JSONPath libraries. For jq, drop the leading $: .orders[1].total.
Large documents
The tree only draws the rows that are on screen, and a node's children are created when you open it. A 10 MB export with tens of thousands of records opens quickly because nothing below the second level exists until you ask for it. Files over 1 MB are parsed in a Web Worker so the page stays responsive. On very large files, Expand all stops after 20,000 containers; search is the fastest way to reach a specific node deeper down.
When to switch to Code view
The tree is for reading and navigating. To copy a formatted or minified version, or to sort keys, switch the view to Code. To see what changed between two versions of a document, use JSON Compare, and to turn the structure into types, send it to JSON to TypeScript.
Questions and answers
How do I get the path to a value?
Click the node in the tree. Its JSONPath, such as $.releases[0].assets[1].name, is copied to your clipboard and shown at the bottom of the panel. Keys that are not plain identifiers use bracket notation, for example $['content-type'].
Can I search inside the JSON?
Yes. The search box matches keys and values without regard to case, opens every parent of each match, and highlights it. Press Enter for the next match and Shift+Enter for the previous one.
Does the viewer change my JSON?
No. The tree is built from a parsed copy of your input and nothing is rewritten. Switch to Code view if you want a formatted or minified version to copy.
How large a document can I explore?
Files up to 50 MB open. Only the rows on screen are drawn and a node's children are created when you expand it, so large arrays stay smooth. Expand all stops after 20,000 containers; use search to reach deeper nodes.
Can I view JSON Lines (NDJSON)?
Several JSON documents one after another are not a single JSON value, so the viewer reports them as an error. Click Fix common errors to wrap them in an array, then browse them as one tree.
Related tools
All JSON & Schema toolsNext step
Need this built into your stack?
The team behind SyntaxSnap builds custom code generators, internal developer tools and API integrations.