JSON Tree
Explore JSON as a collapsible tree with type badges, JSON Pointer paths, and search
JSON
Tree
Paste JSON on the left and press Build Tree to explore.
JSON Tree
Explore JSON as a collapsible tree with type badges, JSON Pointer paths, and search
Features
- Recursive collapsible tree: every object and array node has its own expand/collapse toggle, with the root expanded by default so structure is immediately visible
- Per-node JSON Pointer (RFC 6901) — hover any key to see the full pointer path, click the chain icon to copy it for use in patches, diffs, or schema instancePaths
- Type-aware badges colour each node by its real type (string / number / boolean / null / array / object) — null is no longer hidden behind 'object' like in JavaScript's typeof
- Preview column shows a one-line summary: scalar values inline, arrays as `[ N ]` with their element count, objects as `{ N }` with their key count — so you can scan size before expanding
- Search filter matches on key names, JSON Pointer paths, and preview text; the tree collapses to only branches that contain a hit, making lookups in 10MB documents tractable
- Copy value button writes the node's value to the clipboard — strings as raw text, complex types as pretty-printed JSON ready to paste into another tool
- Parse errors include the JavaScript engine's full message (often with line/column information) so you can fix the input rather than guessing what's malformed
- Pure client-side: input never leaves the browser, the entire tree is built in-memory, no telemetry, and the page works offline once cached
How to use
- Paste JSON into the left textarea, or click Load Sample for a small example.
- Press Build Tree. The root is shown expanded; click the chevron next to any object/array node to drill down.
- Use the search box to filter by key name, value, or JSON Pointer path — only matching branches stay visible.
- Hover any key to see its JSON Pointer path in the tooltip; click the chain icon to copy it.
- Click the copy icon to grab the node's value — scalars copy raw, objects/arrays copy as pretty-printed JSON.
- Use Expand all / Collapse all to flip the whole tree at once.
Tips & Best Practices
- Hold Shift while clicking a toggle to fold/unfold whole branches faster — when the OS shortcut is mapped, the toggle button still works individually.
- Search for a value (not just a key) when debugging — preview text is included in the match.
- Copy a JSON Pointer here and paste it into JSON Schema Validator's error report to confirm the exact node that broke validation.
- If the tree feels slow, collapse the largest array first — long arrays dominate render cost.
- Pair with JSON Diff: copy a value before/after a change to see the precise node-level edit.
FAQ
What's a JSON Pointer and how do you use it?
A JSON Pointer (RFC 6901) is a slash-separated path that names exactly one node in a JSON document: `/owner/name` is the name field of the owner object; `/tags/1` is the second element of the tags array. The root is the empty string (shown here as `/`). This tool uses the same format as JSON Schema instancePath errors and tools like fast-json-patch, so you can copy a pointer out of here and use it as a direct reference elsewhere.
How is the type badge different from JavaScript's typeof?
Two ways. First, null shows as 'null' (typeof null === 'object' in JavaScript — a long-standing wart). Second, arrays show as 'array' rather than typeof's 'object', because they're rendered and behave differently. This matches the JSON spec's six value types: string, number, boolean, null, array, object.
How does search work?
The query is matched case-insensitively against the node's key, its JSON Pointer path, and its preview string. A branch is kept visible if it or any descendant matches — so you can search for a deeply-nested value and still see the keys on the way down to it. Clear the box to restore the full tree.
Can it handle very large JSON?
It builds the entire tree in memory once, so megabyte-scale documents render comfortably. Multi-hundred-megabyte JSON may be tight on phones with low RAM; for that range, prefer streaming tools or run JSON Minify first to drop whitespace. Rendering is virtualized-free — every visible node renders to a DOM element — so collapsing big branches is the trick if it feels sluggish.
Does collapsing a node lose its data?
No. Collapse is purely visual — the underlying parsed object is kept in memory, so re-expanding shows the same content instantly. Search ignores collapse state and will reveal hits inside collapsed nodes.
Why does the preview show `{ 0 }` for an empty object?
The number in braces is the key count for objects and the length for arrays. Zero-key objects and zero-length arrays are valid JSON and not the same value (`{}` vs `[]`), so showing the count and the braces makes both the type and the size obvious at a glance.
What's the difference from the tree view in JSON Formatter?
JSON Formatter's tree is one of many tabs (alongside pretty-print, JSONPath, schema validation, transforms, diff). This tool is the standalone tree-only view: one URL, one job, deeper interaction per node (type badges, per-node pointer copy, per-node value copy) without the formatting/transform/validation surface area.
Is anything sent to a server?
No. The JSON stays in your browser, parsing and tree-building run synchronously in the same JavaScript context that rendered the page, and the Network tab shows no requests when you press Build Tree. After first load the page works offline.