How to use the JSON viewer
- Paste JSON into the JSON input box, or press Upload .json to open a file. Sample loads the example used on this page.
- The tree appears as you type. The top level is open; click ▸ next to any object or array to open it, or press Expand all and Collapse all.
- Type in Filter keys and values to show only the branches that match, with matches highlighted.
- Click a key to copy its JSON path. The last path you copied is shown above the tree.
Reading the JSON tree
Every node shows its key, its value and a badge with its type. Objects and arrays show how many keys or items they hold, so you can see the shape of the data before you open it. The status line counts the whole document. For the sample below it reads: 31 nodes: 5 objects, 4 arrays, 22 values; 4 levels deep.
{
"store": "Corner Books",
"open": true,
"rating": 4.7,
"manager": null,
"address": { "street": "12 High St", "city": "Bristol", "postcode": "BS1 4DJ" },
"tags": ["books", "coffee", "events"],
"users": [
{ "id": 1, "name": "Ada Lovelace", "email": "[email protected]", "roles": ["admin"] },
{ "id": 2, "name": "Grace Hopper", "email": "[email protected]", "roles": ["editor", "support"] }
],
"opening hours": { "mon-fri": "08:00-18:00", "sat": "09:00-17:00", "sun": null }
}| Badge | JSON type | Example from the sample |
|---|---|---|
| object | Keys and values in { } | address: { 3 keys } |
| array | An ordered list in [ ] | tags: [ 3 items ] |
| string | Text in double quotes | "Corner Books" |
| number | Integer or decimal | 4.7 |
| boolean | true or false | open: true |
| null | An empty value | manager: null |
Copy the JSON path of any value
Finding a value in a big API response is only half the job; you then need its path to use it in code, a test or a query. Click a key and its path is copied:
- Ada's name:
$.users[0].name - Grace's first role:
$.users[1].roles[0] - Weekday opening hours:
$["opening hours"]["mon-fri"](keys with spaces or dashes use brackets)
The same address works almost unchanged elsewhere: data.users[0].name in JavaScript, data["users"][0]["name"] in Python, and .users[0].name in jq. Paths start at $, the root, as in JSONPath.
Filter keys and values
The filter searches every key and every value, not just the branches that are open, and ignores upper and lower case. Typing ada in the sample finds 2 matches: $.users[0].name and $.users[0].email. Everything else is hidden, and the parents of each match are opened for you. Clear the box to see the full tree again.
Viewing large JSON files
Most online viewers build the whole tree at once, which can freeze the tab on a big file. This viewer draws only what you open, 200 children at a time, with a "Show more" button for long arrays. Parsing a 5 MB file takes a fraction of a second, and the filter works on the whole document even when most of it is collapsed. If you need the file as text rather than a tree, the JSON formatter pretty prints or minifies it just as quickly.
JSON viewer, formatter or parser?
- JSON viewer (this page): shows JSON as a tree to explore, search and copy paths from. Best for reading unfamiliar or deeply nested data.
- JSON formatter and validator: rewrites JSON as indented text, minifies it, and pinpoints syntax errors by line and column.
- JSON parser: the part of a program that turns JSON text into data. Both tools use your browser's parser, so what you see is what
JSON.parseproduces. - Two versions of the same data? JSON compare lists what was added, removed or changed.
Got JSON inside something else? Read the claims in a token with the JWT decoder, decode a payload with Base64 decode, or flatten an array of objects with the JSON to CSV converter.
Frequently asked questions
How do I view a JSON file?
Press Upload .json above and choose the file, or open it in any text editor and paste its contents into the input box. The viewer shows it as a tree you can expand and collapse. Firefox also has a built-in JSON viewer when you open a .json file in it, and VS Code can fold JSON by indentation.
How do I make a JSON file readable?
Either view it as a tree, which is what this JSON viewer does, or pretty print it with indentation using the JSON formatter. The tree is better for exploring large or deeply nested data; formatted text is better when you need to copy, edit or share the JSON itself.
What is JSON used for?
JSON (JavaScript Object Notation) is a text format for structured data. It is the standard format for web APIs, and is widely used for configuration files (package.json, tsconfig.json), logs, NoSQL databases such as MongoDB, and for passing data between programs in almost every language.
Is my JSON sent to a server?
No. The JSON is parsed and drawn as a tree by JavaScript in your browser. Nothing you paste or upload is sent to our servers, logged or saved, so it is safe to inspect API responses that contain personal data or tokens.
What is a JSON path, and how do I copy one?
A JSON path is the address of a value inside a document, starting at the root $. For example $.users[0].name means: the key "users", its first item, then the key "name". Click any key in the tree to copy its path. Keys with spaces or dashes use brackets, like $["opening hours"]. The same address works in JavaScript as data.users[0].name.
Is this a JSON parser?
Yes. A JSON parser reads JSON text and turns it into data a program can use; this page uses your browser's built-in parser and then shows the result as a tree, with a type badge (object, array, string, number, boolean, null) on every node. If the text is not valid JSON, it tells you the line and column of the error.
Can I open a large JSON file?
Yes, files of several megabytes open in about a second. To keep the page fast, the tree only draws the branches you open, 200 children at a time, and Expand all stops after the first 3,000 nodes. Use the filter box to jump straight to the keys or values you need.
Do I need a JSON viewer extension or app?
No. This viewer works in any modern browser, including on phones, with nothing to install. An extension such as JSON Viewer Pro is handy if you want every JSON URL you visit to open as a tree automatically, and desktop apps help with files too large for a browser tab.
Why does a big number look different in the tree?
JavaScript numbers are exact only up to 9,007,199,254,740,991 (2^53 − 1). Larger integers, like some 64-bit IDs, are rounded when the browser parses them, so 12345678901234567890 shows as 12345678901234567000. The JSON formatter keeps such numbers exactly as written and warns about them.