About the JSON Viewer
What is a JSON viewer?
A JSON viewer shows JSON as a tree you can open and close, one value per row. Our viewer reads the text by the rules of RFC 8259, the JSON standard, and builds the tree as you type or open a file.
The viewer lists keys in the order the file writes them, keeps every number exactly as written, and never changes the JSON. Select any row to see its path, line number and value, or switch to Table to read an array of objects as rows.
What should you know before you view JSON?
- Nothing leaves your device. The JSON is parsed on the page, and search and JSONPath run there too.
- Numbers stay exactly as written. A long ID like
12345678901234567890 isn't rounded, and 1.10 stays 1.10. Numbers that JSON.parse doesn't give back as written are flagged in the tree.
- Repeated keys are kept and flagged. If an object has the same key twice, both rows appear and are marked Duplicate key.
JSON.parse keeps only the last one.
- Broken JSON is never guessed at. The status box names the line and column of the first error, such as a trailing comma or a single-quoted string, and waits for a fix.
- JSON Lines files work too. A .jsonl or .ndjson file, with one JSON value per line, shows each line as its own row.
How do you view a JSON file as a tree?
- Add your JSON. Paste it, click Open file, or drop a file on the JSON box. Files such as .json, .jsonl, .geojson and .har all work.
- Open the branches you need. Click an arrow, or use the arrow keys, to open and close objects and arrays.
- Select a value. The panel under the tree shows its JSONPath, JavaScript path and JSON Pointer, and Show in editor highlights it in the JSON.
- Search, or switch to Table. Search keys and values, run a JSONPath query, or read an array of objects as rows.
What do the rows in the JSON tree mean?
Each row in the JSON tree is one value, labeled with its key or its position in an array.
What each kind of row in the JSON tree means
| Row | What it is |
|---|
customer: {} 3 keys | An object. The chip counts its keys, and the arrow in front opens it. |
items: [] 3 items | An array. The rows inside it are numbered from 0. |
name: "Ada Park" | A string, shown in double quotes |
qty: 2 | A number, shown exactly as the file writes it |
vip: true, coupon: null | A boolean, and a null |
| Duplicate key | A key that appears more than once in the same object |
| Rounded, Too large, Too small | A number that JSON.parse doesn't give back as written |
How do you search JSON with JSONPath?
Switch the search to JSONPath to query the tree with RFC 9535, the standard JSONPath syntax. Every value the query selects is highlighted, and the arrows step through them.
JSONPath queries that work on the sample JSON
| JSONPath | What it finds in the sample |
|---|
$.customer.email | The customer's email, ada@example.com |
$.items[*].name | The name of every item |
$.items[?@.price < 50].name | The names of items that cost less than 50, just Wireless Mouse |
$.items[?@.note] | The items that have a note, just the USB-C Hub |
$.items[?search(@.name, 'Key')].sku | The sku of each item whose name contains Key, KB-01 |
$..sku | Every sku, at any depth |
$.items[-1] | The last item in the array |
$.tags[0] | The first tag, gift |
The panel under the tree shows the JSONPath of the selected row, so you can copy one and build a query from it. To get the matching values as a JSON list, use the JSONPath Tester.
Which programs open a JSON file?
Any program that opens plain text can open a JSON file, because JSON is text. A JSON visualizer adds a tree view, and ours also shows paths and checks for errors.
What you see when you open a JSON file in different programs
| Program | What you see |
|---|
| A text editor, such as Notepad or TextEdit | The raw text, with no tree and no error check |
| Firefox | A collapsible tree with a filter box, and a view of the raw text |
| Microsoft Edge | The raw text, with a Pretty-print checkbox that indents it |
| A code editor, such as VS Code | Colored text you can fold, with errors underlined |
| The CodeShack JSON Viewer | A tree with paths, JSONPath search, a table view and exact numbers |
Common mistakes
The viewer points to each of these JSON mistakes with its line and column.
- A comma after the last item.
[1, 2, 3,] works in JavaScript but isn't valid JSON, so the file won't parse. Delete the comma before the closing bracket.
- Single quotes around strings or keys. JSON only allows double quotes, so
{'name': 'Ada'} stops with an error at its first quote. Write it as {"name": "Ada"}.
- Large IDs stored as numbers.
JSON.parse can't keep every whole number above 9,007,199,254,740,991, so the ID 9007199254740993 comes back as 9007199254740992. Store IDs like these as strings.
Common Use Cases
People use a JSON tree viewer whenever JSON is too long or too nested to read as text.
- API responses. Read a REST or GraphQL response, and copy the JavaScript path of a field for your code.
- Config files. Find a setting in a package.json, composer.json or manifest.json file.
- Logs. Open JSON Lines logs, one event per line, and search every field.
- Data exports. Check an export's structure, then copy an array of objects as CSV from the Table tab.
- GeoJSON and HAR files. Browse map features, or the requests a browser recorded.
To indent the JSON itself, use the JSON Formatter. To fix broken JSON, use JSON Repair, and to change keys and values, use the JSON Editor.
Frequently Asked Questions
How do you make a JSON file readable?
Open it in a JSON tree viewer, where each key and value gets its own row. For indented text instead, use the JSON Formatter.
How do you open a JSON file?
Click Open file in the viewer and pick it, or drop the file on the JSON box. Any text editor opens JSON too, but only as plain text.
Why won't a JSON file open?
Often no program is set to open .json files, so pick a text editor or an online viewer. If the file opens but won't parse, our viewer names the line and column of the JSON error.
Does this JSON viewer upload your file?
No, the JSON is read and parsed on your device. Nothing is sent to a server.
Why does a JSON number change in JavaScript?
JavaScript stores every number as a 64-bit float, so some JSON numbers change when JSON.parse reads them. Whole numbers above 9,007,199,254,740,991 and decimals with more than about 16 digits can come back different, and the tree flags each one.
Can you view large JSON data?
Yes, large files of several megabytes work, because long arrays show 200 rows at a time. Search and JSONPath still cover every value.
Can you view JSON as a table?
Yes, a JSON array of objects shows as rows in the Table tab, with one column per key. You can copy or download the table as CSV.
