How to use the json viewer
- Paste JSON or load it from a file or URL; the tree opens automatically.
- Use Expand to level to open everything down to, say, depth 2, then drill into the branch you need.
- Search for a key or value; matches are highlighted and their parents expanded.
- Click a node and choose Copy path to get something like $.orders[1].items[0].sku.
- Switch to the code view with Ctrl/Cmd+Alt+T to see the same node as text.
Features
- Counts and types: Objects show key counts, arrays show item counts, leaves show string, number, boolean or null.
- Expand to level: Open the top N levels at once to get the shape of an unfamiliar response.
- Copy path: JSONPath-style paths; keys with spaces or dots are bracket-quoted, e.g. $["first name"].
- Search: Find keys and values anywhere in the document.
- Safe rendering: Strings containing HTML or scripts are shown as text and never executed.
Example
Order API response → tree with counts
Input
{"orders":[{"id":1,"items":[{"sku":"A1","qty":2}]},{"id":2,"items":[{"sku":"B7","qty":1},{"sku":"C3","qty":4}]}]}Output
▾ root {1}
▾ orders [2]
▸ 0 {2}
▾ 1 {2}
id: 2
▾ items [2]
▸ 0 {2}
▾ 1 {2}
sku: "C3"
qty: 4Copy path on qty gives $.orders[1].items[1].qty. In JavaScript that is data.orders[1].items[1].qty; in jq it is .orders[1].items[1].qty.
Exploring an unfamiliar API response
Start with Expand to level 1 to see the top-level keys and their sizes. The counts tell you where the data lives: a key showing [500] is the list you care about, while {3} next to meta is usually pagination.
Then open one array item rather than all of them. Items in an API list normally share a shape, so one example shows you every field. Search is the fastest way to find where a value such as an email or ID appears when you do not know the key name.
Turning a path into code
Copied paths use JSONPath notation ($ is the root). Drop the $ and you have a JavaScript accessor; replace $ with a dot for jq. Keys that are not valid identifiers are written in brackets, which works in both JavaScript and jq.
JSON Viewer FAQ
How do I view a JSON file in a readable way?
Open or paste it here and the tree view appears. Collapse sections you do not need and search for the keys you care about.
How do I get the path to a nested JSON value?
Click the value in the tree and choose Copy path. You get a path such as $.orders[1].total that you can adapt for JavaScript or jq.
Can I view JSON from an API URL?
Yes, if the server allows cross-origin requests (CORS). The request goes directly from your browser; there is no proxy. If CORS blocks it, save the response and open the file.
Is it safe to view JSON that contains HTML?
Yes. Every value is rendered as text, so markup such as <img onerror=...> is displayed, not run.
What do the numbers in brackets mean?
{3} means an object with three keys and [12] means an array with twelve items. They let you judge size before expanding.
Can I view JSON in Chrome without an extension?
Recent Chrome versions show a basic pretty-print toggle for JSON URLs. This viewer adds collapsible nodes, counts, search and copy path, and also works for pasted text.
Related tools
- Large JSON file viewer – over 100 MB – virtualized tree for exports.
- JSON pretty print – view as indented text
- JSON token scanner – check before sharing