About the JSON Viewer
Paste or upload JSON to explore it as an interactive tree. Expand and collapse nodes, see value types at a glance, and copy the path to any value.
Key features
- Interactive, collapsible tree for objects and arrays
- Type and size shown for every node (object{5}, array[12})
- Highlight matching keys and values as you type
- Copy the JSONPath of any value with one click
- Expand-all and collapse-all controls
- Works offline once loaded; nothing is uploaded
What is a JSON viewer?
A JSON viewer displays JSON as a tree rather than as text. Each object and array becomes a node you can expand or collapse, so you can focus on the part of the data you care about and ignore the rest. It's the quickest way to understand an unfamiliar API response, a big configuration file, or an export from a database.
Raw JSON, even when nicely formatted, becomes hard to follow once it's more than a few screens long. A tree view solves this by showing the structure first and the details on demand.
Reading the tree
Every line in the tree tells you something:
| You see | It means |
|---|---|
"user": object{4} | user is an object with 4 keys |
"items": array[25] | items is an array with 25 elements |
"price": 19.99 | A number, shown in blue |
"name": "Ada" | A string, shown in green |
"active": true | A boolean |
"deletedAt": null | An explicit null value |
Hover over any row and click the copy icon to copy its path, such as $.user.addresses[0].city.
Typical uses
- Exploring API responses. Paste the output of
curlor your browser's network tab and drill into the fields you need. - Inspecting exports. MongoDB exports, Firebase dumps and analytics events are often deeply nested.
- Finding a value fast. Type in the highlight box to mark every key or value that contains your search term.
- Getting paths for code. Copy the exact path to a nested field instead of counting brackets by hand.
Viewer tips
- Start collapsed. Use Collapse to see only the top level, then open the branches you need.
- Use highlight, not scrolling. Searching for
emailinstantly shows every email field, however deep it is. - Fix invalid JSON first. If the tree doesn't appear, the error message under the editor tells you the line and column. The JSON Fixer can repair common problems.
Related tools
For a step-by-step, folder-style way to browse, try the JSON Navigator. To query values with expressions instead of clicking, use the JSONPath Tester. To get indented text you can copy, use the JSON Formatter.
How to use the JSON Viewer
- Paste your data into the input box, upload a file, or click Sample to try it out.
- Adjust the options above the editor if you need to (indentation, delimiter, and so on).
- The result appears instantly in the output panel. Any errors are shown with their line and column.
- Click Copy to copy the result, or Download to save it as a file.