JSON Viewer
Explore JSON as an interactive, collapsible tree. Expand and collapse nodes, navigate large payloads with ease, and switch to formatted text any time. Entirely in your browser.
Tip: click Repair to auto-fix trailing commas, single quotes, unquoted keys and comments.
About this JSON
Session History
Formatted JSON from this session will appear here.
History is kept only in your browser memory for this session and is cleared when you refresh or close the page. Nothing is stored or uploaded.
The tree is built locally in your browser — your JSON is never uploaded. Very large documents render on your device, so performance depends on your machine.
What It Does
This tool renders JSON as an interactive tree so you can actually navigate it instead of scrolling through a wall of text. Every object and array becomes a collapsible node with an item count, values are colour-coded by type, and collapse-all and expand-all controls let you tame even huge, deeply nested documents — fold everything, then open only the branch you care about. You can paste JSON or drag in a .json file. It is also a validator and formatter under the hood: the same strict parser checks your input (pointing a caret at any error and repairing common mistakes), reports the structure, and lets you switch to a pretty-printed text view whenever you want something to copy. Nothing is uploaded — the entire tree is built locally in your browser.
When to Use It
- An API returned a large, deeply nested response and you need to find and inspect one field without scrolling endlessly.
- You are exploring an unfamiliar JSON payload and want to understand its shape by collapsing and expanding sections.
- You want to confirm the structure of a config file — how deep it nests, which keys hold arrays — at a glance.
- You need to both browse a document as a tree and grab a clean formatted copy of part of it.
Worked Examples
{"user":{"id":1,"name":"Ada","roles":["admin","user"],"profile":{"city":"London","active":true}}}
A nested object. The tree shows user as a node you can expand to reveal roles and profile, each collapsible on its own.
[{"id":1,"tags":["a","b"]},{"id":2,"tags":["c"]},{"id":3,"tags":[]}]
An array of objects. Each element is a node with an item count, so you can collapse the list and open just one record.
{"a":{"b":{"c":{"d":{"e":42}}}}}
Deeply nested. Use Collapse all, then open one level at a time to walk down to the value at the bottom.
Features
How to Use
1. Paste your JSON or drag in a .json file. 2. Explore the tree — click any node to expand or collapse it. 3. Use Collapse all or Expand all to manage large documents. 4. Switch to Text view for a formatted copy, or Tree view to navigate. 5. If the JSON is invalid, fix it or click Repair.
Common Mistakes
- Trying to read a huge payload as flat text. A tree view with collapse-all is far faster for finding one field in a big document.
- Forgetting you can switch to text view. The viewer also pretty-prints, so you can grab a clean formatted copy when you need it.
- Pasting invalid JSON and expecting a tree. The viewer validates first and shows the error location — repair it, then explore.
- Overlooking duplicate keys. The viewer flags them, because a tree only shows the surviving value, not the one that was dropped.