How to use the JSON Viewer
- Paste JSON or open a
.jsonfile. - Click ▸ to expand objects and arrays, or use Expand all.
- Search to highlight matching keys and values.
- Click any value to see and copy its path, such as
$.items[0].sku.
Why use a JSON tree viewer?
Formatted JSON is readable for small documents, but API responses, logs and exports often run to thousands of lines. A tree view shows the structure first: you see that items is an array of 250 objects without scrolling through them, then open only the branch you care about.
Features
- Collapsible nodes with item and key counts on every object and array.
- Type colours: strings, numbers, booleans and
nullare easy to tell apart. - Search highlights matching keys and values and opens the branches that contain them.
- Paths: click a value to get its JSONPath (
$.customer.address.city), ready forjq, JavaScript or automation tools. - Stats: total values, nesting depth and size.
Using the path
| Tool | Path $.items[0].sku becomes |
|---|---|
| JavaScript | data.items[0].sku |
| jq | .items[0].sku |
| Python | data["items"][0]["sku"] |
| Make / Zapier | items[1].sku (1-based) |
For no-code mappings, the JSON path finder outputs paths in Make, Zapier and n8n formats. To fix invalid JSON, use the JSON formatter; to compare two documents, the JSON diff.
Tools that pair well with the JSON Viewer
- JSON to TypeScript — Paste a JSON sample — an API response, a config — and get ready-to-use TypeScript interfaces with nested types, optional properties and union types.
- XML to JSON — Turn XML — API responses, RSS feeds, SOAP messages, sitemaps or config files — into clean JSON you can use in JavaScript, Python or any REST API.
- JSON to YAML — Paste JSON and get clean YAML for Kubernetes manifests, Docker Compose, GitHub Actions or any config file.
- YAML to JSON — Paste YAML — a Compose file, Kubernetes manifest or CI config — and get formatted JSON.
Frequently asked questions
Can it open large JSON files?
Is my JSON uploaded?
What is a JSONPath?
$ for the root, for example $.items[0].price.