JSON Viewer — Tree View
Explore JSON in a collapsible tree: search keys and values, expand what matters, and copy the JSONPath of any node with one click.
Paste JSON on the left to explore it here.
When a tree beats raw text
A 3 MB API response is technically readable as formatted text — but finding the one field you care about means scrolling past thousands of lines. The tree collapses everything you don't need behind a count ({ 14 keys }, [ 250 items ]), so the document's shape is visible at a glance and any branch is two clicks away. Type in the search box and the tree reduces to the matching keys and values, each shown with its full parent chain — you see not just that "email" exists, but exactly where it lives.
JSONPath, one click away
Every row has a ⧉ button that copies its JSONPath — the standard way to address a value inside a JSON document. $.members[2].email means: root → members → third element → email. Paste that into the formatter's JSONPath filter, into test assertions, or into any JSON library that supports path queries. Keys that are not simple identifiers are quoted automatically ($['strange key']), so the copied path is always syntactically valid.
Built for safe exploration
The tree is read-only by design — expanding, searching and copying paths can never corrupt the document. Edit on the left, explore on the right: the tree rebuilds live as you type, and the same exact-position error reporting as the JSON Validator takes over whenever the input is invalid. As everywhere on this site, the document never leaves your browser.
Frequently asked questions
How do I copy the JSONPath of a value?
Click the ⧉ path button on any row and the JSONPath (for example $.members[2].email) is copied to your clipboard. Paste it into the JSONPath filter on the main formatter, into jq-style tooling, or into your code's JSON library.
What does the search box match?
Both keys and primitive values, case-insensitively. The tree collapses to just the matches plus their parent chain, so you see where each hit lives in the structure. Clear the box to restore the full tree.
How large a document can the tree handle?
Parsing is fast even for very large files; rendering is kept snappy by lazy expansion and by capping each container at 500 visible children (a "+N more" marker shows the rest exist). For multi-hundred-megabyte files, text mode in the main formatter is the better tool.
Can I edit values in the tree?
No — the viewer is deliberately read-only for safe exploration. To change the document, edit the text on the left; the tree rebuilds live as you type.
What do the type colors mean?
The same palette as the editors: keys in blue, strings in green, numbers in slate blue, booleans and null in amber. Containers show their entry count, so you can size up an array before expanding it.