How to use JSON Tree Viewer
- Paste a JSON document into the input area.
- Browse the tree; click the disclosure arrows to expand or collapse branches.
- Click the path badge next to a value to copy its JSONPath to the clipboard.
JSON Tree Viewer features
- Collapsible tree with type badges and item/key counts on every node
- Click any node to copy its JSONPath ($.users[0].email)
- Expand all / collapse all controls
- Overview stats: objects, arrays, leaf values and maximum depth
- Renders live as you paste or edit
- Handles large documents by paginating containers with more than 500 entries
JSON Tree Viewer example
Explore a nested payload
Input:
{"order":{"id":1001,"items":[{"sku":"KB-100","qty":2}]}}Output:
$ {1 key}
order {2 keys}
id: 1001 (number)
items [1 item]
[0] {2 keys}
sku: "KB-100" (string)
qty: 2 (number)Frequently asked questions about JSON Tree Viewer
How do I copy the path of a value?
Every node shows its JSONPath (for example $.users[0].email). Click the path badge to copy it to your clipboard.
Can I collapse everything at once?
Yes — use the Expand all / Collapse all buttons above the tree. Nodes deeper than two levels start collapsed to keep large documents readable.
Is there a limit on document size?
Documents up to 2 MB are supported. Containers with more than 500 entries show the first 500 to keep the page responsive.
Does it work with arrays at the root?
Yes. Arrays, objects and even single primitive values are rendered, with item counts and types shown next to each node.
Technical notes
Parsing goes through the same parseJson helper as the JSON Formatter: a leading UTF-8 BOM is stripped, then the browser's native JSON.parse does the work, so the tree shows the document exactly as a JavaScript engine holds it. Two consequences follow: duplicate keys collapse to their last value, and integers above 2^53 − 1 are displayed rounded — this viewer does not run the unsafe-integer scan that the JSON Validator performs.
The tree is built from native <details> elements: the root and its direct children start open, deeper nodes start closed, and Expand/Collapse all toggle every element. Paths are derived while rendering — array indices as [0], identifier-like keys as .key, every other key as ["key"] with inner quotes escaped. Each container is truncated to its first 500 entries independently; the overview comes from a single recursive walk with the root at depth 0.