About the JSON Viewer
Large JSON is hard to follow as plain text. The JSON Viewer turns it into a tree you can fold and unfold, so you can open only the part you care about and leave the rest closed.
Click any value and the viewer shows its path, written the way you would use it in code: store.books[1].title in JavaScript style or $.store.books[1].title in JSONPath. Copy the path or the value with one click. That saves you from counting brackets and array positions when you write code, tests or API queries.
A search box finds keys and values anywhere in the document and opens the tree to show every match. The JSON is checked as you paste, with the exact line and column of any error. It all runs in your browser, so your data never leaves your device.
How to use it
- Add your JSONPaste it into the JSON box, drop a .json file onto it, or use Open file. Sample loads a small bookstore example.
- Explore the treeClick the arrow next to an object or array, or double-click its row, to open or close it. Expand all and Collapse all work on the whole tree.
- Click a valueThe path bar under the tree shows where that value sits. Switch between JavaScript and JSONPath style at any time.
- SearchType in "Search keys and values". Matching rows are highlighted and the branches that contain them open automatically.
- Copy what you needCopy path puts the path on your clipboard. Copy value copies the selected value: plain text for strings, indented JSON for objects and arrays.
Key features
Collapsible tree
Objects show their number of keys, like {4}, and arrays their number of items, like [2], so you know what is inside before you open it.
Two path styles
JavaScript paths such as store.address.city and JSONPath such as $.store.address.city, with brackets and quotes added for keys that need them.
Search everywhere
Finds text in keys and values, ignoring upper and lower case, and opens every branch that holds a match.
Copy values cleanly
Strings are copied without their quotes, numbers exactly as written, and objects and arrays as JSON indented with 2 spaces.
Error locations
Invalid JSON is reported with its line, column and a plain-language reason, such as a trailing comma or a missing bracket.
Private by design
The tree is built in your browser. Nothing is uploaded or stored.
Examples
Exploring the sample
The Sample button loads a 348-byte bookstore record on one line. Above the tree you see 20 keys ยท depth 5. The tree opens two levels deep:
{1}
"store": {6}
"name": "Corner Books"
"open": true
"rating": 4.7
"address": {4}
"books": [2]
"staff": 2That is 8 rows. Expand all opens everything and shows 26 rows, including both books with their titles, authors, prices and tags.
Paths for the values you click
| You click | JavaScript path |
|---|---|
| "Cooking with Lentils" | store.books[1].title |
| "Portland" | store.address.city |
| "travel" | store.books[0].tags[1] |
Array positions start at 0, so books[1] is the second book and tags[1] is the second tag. Switch to JSONPath and each path starts with $. instead, such as $.store.books[1].title.
When a key has spaces, a hyphen or another character that is not allowed in a plain name, the path switches to brackets. For a key called first name inside user:
| Style | Path |
|---|---|
| JavaScript | user["first name"] |
| JSONPath | $.user['first name'] |
Searching
| Search | Found | Matches |
|---|---|---|
| portland | 1 | "city": "Portland" |
| title | 2 | both "title" keys |
| 12 | 2 | "12 Market St" and 12.99 |
| null | 1 | "signed": null |
Search ignores case, so "FICTION" finds the "fiction" tag too. Array positions are not searched, only keys and values.
Copying a whole branch
Click the "address" row and press Copy value. You get the object as indented JSON:
{
"street": "12 Market St",
"city": "Portland",
"state": "OR",
"zip": "97204"
}Tips
- Use the JavaScript path style when writing code and JSONPath when a tool asks for it, such as API testing tools, database queries or log filters.
- Search for a field name to find every place it appears. With arrays of records, that quickly shows which items have the field and which do not.
- Copy value on an object or array gives you clean, indented JSON for just that branch, which is handy for test fixtures and bug reports.
- If the JSON does not load, read the error in the status line. It gives the exact line and column, and the JSON Formatter can help you fix and re-indent it.
- Collapse all puts the tree back the way it first opened, which is a quick way to get the big picture again after a deep search.
Common mistakes and limits
- Forgetting that arrays start at 0The first item of an array is [0], the second is [1]. A path like books[1] points to the second book, not the first.
- Pasting JSON with comments or trailing commasThe viewer follows the JSON standard, so comments, single quotes and trailing commas are errors. Remove them and the tree appears.
- Expecting very large trees to open completelyExpand all stops after the first 5,000 items so the page stays responsive, and search highlights at most 500 matches (shown as "500+ found").
- Searching for an array positionSearch looks at keys and values only. To find the fifth item of an array, open the array and look for the row marked 4.
- Editing in the treeThe tree is read-only. Change the JSON in the box on the left and the tree updates right away.
