JSON Viewer
Paste or upload JSON and explore it as a collapsible tree. Search keys and values, see every type and count, and click any node to copy its path as JavaScript or JSONPath. Nothing leaves your browser.
Paste or upload JSON to see it as a tree.
––Click any node in the treeHow to use the JSON Viewer
- Paste your JSON into the box, or press Upload JSON (or drop a .json file onto the box).
- Explore the tree: click the small arrows to open objects and arrays, or use Expand all and Collapse all.
- Click any node to select it. Its path is copied to your clipboard in the format chosen under “Click copies”, and both path styles plus the value are shown below the tree.
- Search for a key or value. Matches are highlighted and opened in the tree; use the arrow buttons or Enter to jump between them.
- Fix errors fast: if the JSON is invalid you get the line, column and a caret pointing at the exact character.
JSON data types at a glance
Every value in a JSON document is one of six types. The viewer labels each node with its type so you can spot a number stored as a string or an unexpected null at a glance.
| Type | Example | Notes |
|---|---|---|
| object | {"id": 7, "name": "Ada"} | Unordered set of key/value pairs. Keys must be double-quoted strings. |
| array | [1, 2, 3] | Ordered list. Items are addressed by index starting at 0. |
| string | "hello\nworld" | Double quotes only. Escapes: \" \\ \/ \b \f \n \r \t \uXXXX. |
| number | -12.5e3 | No leading zeros, no NaN or Infinity, no hex. |
| boolean | true / false | Lowercase only. |
| null | null | An explicit empty value. |
JS path vs JSONPath: worked example
Take this document: {"books": [{"title": "Forest Trails", "in stock": true}]}. Clicking the title and in stock nodes gives:
| Node | JS path | JSONPath |
|---|---|---|
| Root | data | $ |
| First book | data.books[0] | $.books[0] |
| Title | data.books[0].title | $.books[0].title |
| Key with a space | data.books[0]["in stock"] | $.books[0]['in stock'] |
Dot notation is only valid when a key looks like an identifier (letters, digits, _ or $, not starting with a digit). Any other key, including ones with spaces, dashes or that start with a number, switches to bracket notation automatically.
Common JSON errors and how to fix them
| Error shown | Typical cause | Fix |
|---|---|---|
| Trailing comma is not allowed | [1, 2, 3,] | Delete the last comma. |
| Expected a property name in double quotes | {name: "Ada"} or {'name': "Ada"} | Wrap keys in double quotes. |
| Strings must use double quotes | {"a": 'x'} | Replace single quotes with double quotes. |
| Expected ',' or '}' after property value | Missing comma between two pairs | Add a comma after the previous value. |
| Unescaped control character in string | A real line break or tab inside a string | Use \n or \t instead. |
| Unexpected character after the end of the JSON value | Two documents pasted together, or a stray bracket | Wrap them in an array or remove the extra text. |
Frequently asked questions
What is a JSON viewer?
A JSON viewer turns raw JSON text into an interactive tree so you can open and close objects and arrays, see what type every value is and find data quickly, instead of scrolling through a long block of text.
How do I get the path to a value in JSON?
Click the node in the tree. The tool shows its JavaScript path, such as data.books[0].title, and its JSONPath, such as $.books[0].title, and copies the format you chose. Keys with spaces or symbols use bracket notation, for example data["in stock"].
What is the difference between a JS path and JSONPath?
A JS path is the code you would write in JavaScript to reach the value from a variable (here called data). JSONPath is a query syntax that starts at $ and is used by tools such as jq-like filters, Postman tests, Kubernetes and many APIs.
Why does my JSON show an error?
JSON is strict: keys and strings must use double quotes, there can be no trailing commas, no comments and no single quotes. The viewer reports the exact line and column of the first problem so you can fix it.
Does the viewer change big numbers?
No. Numbers are shown exactly as written, so an ID like 9007199254740993 is not rounded the way JavaScript's JSON.parse would round it. Key order is also kept as in your file.
Is my JSON uploaded to a server?
No. Parsing, searching and rendering happen in your browser with JavaScript. Your data is never sent anywhere, which makes it safe for API keys, tokens and private records.
Can it open large JSON files?
Yes. The tree is built lazily, so only the parts you open are drawn. Files of tens of megabytes work in a modern browser; Expand all is limited to the first levels for very large documents to keep the page responsive.