JSON viewer
Explore JSON as a collapsible tree: expand or collapse everything, expand to a depth, highlight search hits by key or value, and click any node to see and copy its JSONPath and value.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Structure
Please enter JSON text
Selected node
What this tool does
- Debug a minified API response by expanding it into a collapsible tree instead of staring at one endless line in an editor.
- Expand to a depth of 1–5 to grasp the shape, then switch between overview and detail with expand-all and collapse-all.
- Search keys or leaf values with highlighting and automatic expansion of matching paths; click any node to see and copy its JSONPath such as $.items[0].title.
- Track down which level a field lives on and copy its JSONPath straight into jq, the console or a test.
Example
Input
{"name":"UniKit","tags":["json","viewer"]}Output
$ {2}
$.name "UniKit"
$.tags [2]
$.tags[0] "json"
$.tags[1] "viewer"This is the tree with everything expanded: containers show a summary like {2} or [2], leaves show their raw value, and the root path is always $.
Frequently asked questions
Why is the error message more detailed than JSON.parse?
This tool uses its own parser rather than JSON.parse, so it can report line, column and the actual reason — an object key without double quotes, an unterminated string, trailing content after the value. JSON.parse often only gives a generic message.
How is the JSONPath built?
Object keys that are valid identifiers (letters, digits, underscore, leading $) become .key; keys with dots, dashes or spaces become ["k-e.y"]; array indices become [0], [1]. The result is directly usable by most JSONPath implementations.
Will a huge JSON freeze the page?
The tree renders at most the first 2000 rows and tells you to narrow it down with search, so it never inserts hundreds of thousands of DOM nodes. Parsing is linear, but nesting deeper than 512 levels is rejected as malformed input.
What can I search for?
Keys and leaf values, case-insensitively. Container values are not matched, otherwise searching a common string would hit every ancestor. Ancestors of a match are expanded automatically so you see the context.
Is my JSON uploaded anywhere?
No. Parsing, searching and rendering all happen locally in your browser with no network requests — useful when the payload contains sensitive fields.
Keywords：jsonjson 查看json viewerjson 树tree viewjsonpathjson 搜索折叠collapse