JSON Viewer
Explore JSON as a collapsible tree. Click any key to copy its path, or search to jump straight to a value.
Tree view will appear here...
Pro Tip
Click any key in the tree to copy its JSON path to your clipboard.
Collapsible Tree
Expand and collapse nested objects and arrays to focus on what matters.
Search Within Tree
Find any key or value instantly, with matching branches auto-expanded.
Local Processing
Your data never leaves your browser. Privacy first exploration.
How to Use the JSON Viewer
- Paste JSON into the input pane — the tree on the right renders immediately as you type or paste, no button to click.
- Expand and collapse nested objects and arrays to focus on the branch you care about.
- Type in the search box to find any key or value — matching branches expand automatically.
- Click any key in the tree to copy its full path to your clipboard.
Example: Copying the Path to a Nested Value
Input
{
"user": {
"name": "Priya Sharma",
"roles": ["admin", "editor"],
"active": true
}
}Clicking "admin" in the tree copies
$.user.roles[0]
Paths start at $ (the document root), use dot notation for object keys, and bracket indices for array positions — the same convention JSONPath tools and many query libraries expect.
Why a tree instead of formatted text
Formatted JSON still makes you visually track brace depth across hundreds of lines. A collapsible tree shows the document as the structure it actually is: fold away the branches you don’t care about, keep three levels open in one place and one level everywhere else. For deep documents — API catalogs, OpenAPI specs, exported state — that’s the difference between scrolling and navigating.
From tree path to code
The copied path drops straight into most tooling: $.user.roles[0] maps directly to user.roles[0] in JavaScript, jq’s .user.roles[0], or a JSONPath query. Copying the path instead of re-deriving it by eye eliminates the classic off-by-one on array indices in deeply nested data.
Frequently Asked Questions
A dot-and-bracket path you can paste directly into JavaScript to reach that value, e.g. root.users[2].address.city for a nested field inside the third item of a users array. Object keys use a leading dot, array indices use brackets — the same syntax you would type to access that value in code.
Both. Typing a key name highlights matching keys; typing a value (a string, number, or boolean) also matches nodes whose value contains it. Any branch containing a match is automatically expanded so you never have to manually open a path to find a hit.
Nodes are collapsed by default below the top level, so the initial render only has to draw what's visible — you expand branches as you need them rather than the whole tree rendering at once. Extremely wide arrays (tens of thousands of sibling items) will still be slower to scroll than a small document, since every visible row is a real DOM node.
No. The tree is built and rendered entirely in your browser — nothing you paste is ever sent to a server, so you can explore sensitive payloads without them leaving your machine.
Yes — a top-level array of strings, numbers, or booleans renders as indexed leaf nodes ([0], [1], [2]...) just like an array of objects would, and each one is still searchable and copyable.
Related Tools
JSON Formatter
Make messy, minified JSON readable with customizable indentation.
JSON Beautifier
Pretty-print JSON with the same fast, local engine.
JSON Validator
Check JSON validity with precise line/column errors.
JSON Minifier
Strip whitespace to compress JSON for transport.
JSON Compare
Diff two JSON documents and highlight the changes.
JSON to CSV
Flatten nested JSON into a downloadable CSV file.