JSON Viewer (Tree View)
Explore JSON as a tree with types and values, list every JSONPath with its value, and count objects, arrays, keys and types. Errors show line and column.
| Path | Type | Value |
|---|---|---|
| $ | object | {5 keys} |
| $.order | number | 1042 |
| $.customer | object | {3 keys} |
| $.customer.name | string | "Ada Lovelace" |
| $.customer.email | string | "ada@example.com" |
| $.customer.vip | boolean | true |
| $.items | array | [2 items] |
| $.items[0] | object | {3 keys} |
| $.items[0].sku | string | "LAMP-01" |
| $.items[0].qty | number | 2 |
| $.items[0].price | number | 34.9 |
| $.items[1] | object | {3 keys} |
| $.items[1].sku | string | "BULB-E27" |
| $.items[1].qty | number | 4 |
| $.items[1].price | number | 3.5 |
| $.coupon | null | null |
| $.tags | array | [2 items] |
| $.tags[0] | string | "gift" |
| $.tags[1] | string | "express" |
A JSON viewer turns a wall of braces into something you can read: every object and array becomes a branch, every value shows its type, and nothing is changed. Paste an API response or a config file to see its shape at a glance, find the exact path of a value for code or a JSONPath query, and count what is inside. Broken JSON is reported with the line and column of the problem.
How to use this tool
- Paste the JSON into the box — the tree updates as you type.
- Lower Tree depth to see only the top levels of a big document.
- Use the path table to copy the path of any value, such as
$.items[0].sku. - Tick leaf values only to list just the data and skip the containers.
Formula
path = $ followed by .key or ['key'] for each object member and [i] for each array index (i from 0)
Keys that are valid identifiers use dot notation; anything else — spaces, dashes, quotes — uses bracket notation, as JavaScript and JSONPath tools accept. Nesting depth counts levels of objects and arrays, so a flat object has depth 1. Leaf values are strings, numbers, booleans, nulls and empty objects or arrays.
Example
For the sample order the tree starts with $ (object, 5 keys) and branches for customer, items and tags. The counts are 4 objects (the root, customer and the two items), 2 arrays, 14 keys, 13 leaf values and a nesting depth of 3 ($ → items → items[0]). The price of the second item sits at $.items[1].price.
Frequently asked questions
How is this different from a JSON formatter?
A formatter re-indents the text so you can edit it. The viewer leaves the text alone and shows the structure: types, counts, paths and an outline you can limit to the top levels, which is faster for understanding unfamiliar data.
Why do some keys appear in quotes?
Keys with spaces or punctuation are shown as JSON strings so you can tell where they start and end, and their paths use bracket notation like $['first name'].
Can it open very large files?
Yes, up to about 10 million characters. The outline stops at 5,000 lines and the path table at 400 rows, but the counts always cover the whole document.
Is my JSON uploaded?
No. It is parsed in your browser and never leaves your device.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/json-viewer/
Cite or embed this tool
kakaoCalc. (2026, November 8). JSON Viewer (Tree View). https://kakao.mobile/tools/json-viewer/
“JSON Viewer (Tree View).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/json-viewer/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms