{}JSON FYI
Tree Viewer

JSON tree viewer

Open the structure visually. Collapse arrays, expand objects, and grab the JSONPath of any node with a single click.

Ready when you are.

Paste JSON on the left, or click Sample to try a quick example. Validation runs as you type — entirely in your browser.

EmptyType: Nodes: 0Depth: 0Size: 0 B

Reading the tree

Each leaf displays its JSON type as a small badge: string, number, boolean, null. Containers show the number of items when collapsed. Hover any row to reveal a copy chip with the full JSONPath — useful for writing JMESPath, jq, or front-end selectors.

Examples

Collapsed array
Input
{
  "users": [
    {"id":1},
    {"id":2},
    {"id":3}
  ]
}
Output
▸ users: Array(3)

Click ▸ to expand. The count appears next to the type.

Type badges on leaves
Input
{ "name": "Ada", "age": 36, "admin": true, "team": null }
Output
name: "Ada"  string
age: 36       number
admin: true   boolean
team: null    null
Copy JSONPath on hover
Input
{"users":[{"email":"ada@example.com"}]}
Output
Hover users[0].email → click chip → $.users[0].email copied

Use cases

Frequently asked questions

What is a JSON tree viewer?+

An interactive view of a JSON document where objects and arrays can be collapsed and expanded, and each leaf shows its type. It makes deeply nested data navigable.

How do I copy a JSONPath?+

Hover any node in the tree and click the path chip ($.users[0].email) to copy it to your clipboard.

Does it work for big files?+

Yes. Parsing is fast; for very large arrays the viewer lazily expands children so the initial render stays snappy.

Related tools & guides