JSON Viewer
Free JSON viewer: browse JSON as a collapsible tree with type badges, search keys and values, and click a node to copy its $.path. Runs in your browser.
How to use JSON Viewer
- 1Paste JSON or open a file. The tree builds as soon as it is valid; Mode also offers Format, Minify, Sort keys and Escape.
- 2Expand or collapse branches, expand to a chosen level, or search for a key or value.
- 3Click a row to copy its path, or the copy icon to copy its value.
What makes it better
- Collapsible tree with Expand all, Collapse all and Expand to level N
- Search keys and values with a match count; matching branches open automatically
- Click to copy a node's path in $.a.b[0] style, or its exact value
- Type badges and item counts for objects and arrays
- Switch Mode to Format, Minify or Sort keys on the same input to tidy it, and the validity line stays visible
About JSON Viewer
JSON Viewer turns a JSON document into a tree you can open and close, with a type badge on every value and the length of every array. Search finds keys and values and opens the branches that contain them, and clicking a row copies its path such as $.user.roles[0]. Only a few hundred rows are drawn at a time, so large files stay responsive, and the page tells you how many rows are hidden.
Common uses
- Find where a field lives inside a deeply nested API response.
- Get the exact path to a value to use in code, a JSONPath query or a test assertion.
- Skim the structure of an unfamiliar export or log file without scrolling through raw text.
- Search a large configuration for every occurrence of a key or a value.
Example
Input
{"user":{"name":"Ada","roles":["admin","editor"],"active":true},"count":2}Result
$ object · 2 keys $.user object · 3 keys $.user.name string "Ada" $.user.roles array · 2 items $.user.roles[0] string "admin" $.user.roles[1] string "editor" $.user.active boolean true $.count number 2
Good to know
- Only valid JSON builds a tree. Fix any error shown, with its line and column, first.
- Very long strings are shortened in the tree after 300 characters; the copy icon still copies the complete value.
- The tree draws a limited number of rows at once and says how many are hidden. Collapse branches or search to narrow the view, or use Show more.
JSON Viewer FAQ
How do I view JSON as a tree?
Paste it into the input box. A tree appears with the first levels already open; click the arrow beside any object or array to open or close it, or use Expand all and Collapse all above the tree.
How do I copy the path to a value?
Click the row. The path is copied in $.a.b[0] form, with bracket notation such as $["first name"] for keys that contain spaces or symbols, so you can paste it straight into a JSONPath query or code.
Can I search inside the tree?
Yes. Type in the search box to match key names and scalar values without regard to case. The count shows how many matched, and only the matching rows and the branches leading to them are listed.
Why does the viewer say some rows are hidden?
Drawing hundreds of thousands of rows would freeze the page, so a few hundred are rendered at once. The notice tells you the exact count, and Show more reveals the next batch.
Does the viewer work with huge JSON files?
Files up to 20 MB are accepted, and anything over about 200 KB is parsed in a background worker so the page keeps responding. Documents with millions of values are refused with a message rather than crashing the tab.