JSON Tree Viewer
Visualize JSON data as an interactive tree. Expand, collapse, and explore JSON structure.
View JSON data as an expandable tree structure. Navigate complex nested objects easily, see data types, and copy paths. Perfect for exploring API responses.
A JSON tree viewer turns a wall of text into a navigable structure. Instead of scrolling through thousands of lines looking for a single field, you expand the branches you care about and collapse everything else. Each node shows its type — string, number, boolean, null, object, array — along with array length and object key count, so the shape of unfamiliar data becomes obvious within seconds.
The tree is especially useful for deeply nested payloads: GraphQL responses, AWS service outputs, Stripe events, and OpenAPI schemas often nest five or six levels deep, and flat pretty-printing makes it hard to tell where one object ends and the next begins. Clicking a value copies its JSON path (e.g. data.user.addresses[0].city) which you can drop straight into a jq expression, a JSONPath query, or a lodash get() call.
The viewer handles JSON up to tens of megabytes by rendering only the expanded nodes, so opening a large file doesn't freeze the tab. Parsing happens locally via JSON.parse, so sensitive API responses stay in your browser.
- 1
Paste or load JSON
Drop a JSON string or upload a .json file. The tree renders at the root with top-level keys visible and their children collapsed.
- 2
Expand the branches you need
Click a node to drill into it. Arrays show their length, objects show their key count, and primitives show their type alongside the value.
- 3
Copy a value or its path
Click any value to copy it, or grab the dotted path to use in jq, JSONPath, lodash, or your own code.
Exploring API responses
Paste a REST or GraphQL response to see its shape without printing the whole thing to a terminal.
Reading webhook payloads
Stripe, GitHub, and Shopify webhooks are deeply nested. The tree makes it trivial to find the field you need to handle.
Inspecting cloud provider output
AWS describe-* commands emit huge JSON blobs. Expand only the resource sections that matter.
Debugging feature flag payloads
LaunchDarkly, Optimizely, and Statsig configs can be hundreds of flags deep. Navigate to one key without ctrl-F.
How is this different from a JSON formatter?
A formatter pretty-prints the whole document as indented text. A tree viewer renders it as a collapsible outline so you can focus on one branch at a time without scrolling past unrelated keys.
Can I search inside the tree?
Yes — use the search field to filter keys and values. Matching nodes auto-expand so you can see where the match lives in the structure.
Does the viewer handle large JSON files?
Files up to around 50 MB work smoothly because collapsed branches aren't rendered to the DOM. For multi-hundred-megabyte JSON, a command-line tool like jq is a better fit.
Is my data sent to a server?
No. Parsing and rendering run entirely in your browser. The JSON never leaves your device.
What path format does the copy-path button use?
Dotted notation with bracketed array indices, like user.addresses[0].city. It's compatible with lodash get(), JSONPath (with a leading $.), and most query languages.