JSON Viewer with a collapsible tree
Turn a wall of JSON into a tree you can explore. Open and close objects and arrays, search for a key or value, and click any field to copy its JSONPath.
How to use the JSON viewer
- Paste JSON or drop a file on the editor.
- Explore the tree on the right; click a row's arrow to open or close it.
- Type in the search box to find keys and values anywhere in the document.
- Click a key to copy its path, such as $.orders[0].total.
What you get
- Item counts on every object and array
- Colour by type: strings, numbers, booleans and null
- JSONPath of any field, ready to paste into code
- Large arrays shown in pages so the viewer stays fast
About the JSON viewer
Find things in large responses
API responses and exports can be thousands of lines long. Search narrows the tree to matching keys and values and opens the branches that contain them.
Paths for your code
Clicking a key copies its JSONPath, so you can go straight from exploring the data to writing the query or the code that reads it.
Frequently asked questions
- What is a JSONPath?
- A short address for a value inside a JSON document, such as $.user.addresses[0].city. Many tools and libraries accept it to read or test a value.
- Can I edit values in the tree?
- Edit the JSON in the input editor on the left; the tree updates as you type.
- Does the viewer handle big files?
- Yes. Long arrays are shown 100 items at a time with a Show more button, so the page stays quick.