Overview
Explore a JSON document as an expandable tree with a live filter, expand-all and collapse controls, type-colored leaf values, node counts, and copyable JSONPath-style paths like $.user.email or $.items[0].name. Parsing happens locally, and invalid JSON is reported inline.
How It Works
Paste JSON into the left editor; the tree builds on the right as you type. Objects and arrays are collapsible, with the root and first two levels expanded by default, and show a summary like object(3) or array(5). Expand all opens every branch; Collapse returns to the default view. Type in the filter box and only branches whose keys or values match stay visible, with a counter reporting how many nodes matched. Hovering a node reveals a copy-path button that puts a JSONPath-style selector on the clipboard.
Step-by-Step Usage Guide
- Paste or type JSON in the left panel.
- Expand or collapse branches, or use Expand all / Collapse for the whole tree.
- Type in the filter box to show only matching keys and values, with the match count above the tree.
- Hover a node and click copy-path to grab its JSONPath-style path.
Technical Specifications & Standards
The viewer uses JSON.parse and renders a recursive node component, so the tree is exact: property order is preserved and duplicate keys resolve the way standard parsing resolves them (last value wins). Copied paths are JSONPath-shaped: object keys become ['key'] segments and array elements become [index], so a copied path like $['store']['books'][0]['title'] is directly usable in JSONPath tools and quote-safe for keys containing dots — unlike plain dot-joining. Three deliberate guards keep large documents usable: the header reports the total node count, rendering is capped at 5,000 nodes with a note when a document exceeds it, and the filter prunes non-matching branches before they render rather than merely hiding them.
Targeted Use Cases
- Inspecting a large API response to find the exact field you need.
- Grabbing a JSONPath for the JSONPath Tester or a selector for code and tests.
- Finding every occurrence of a key or value in a deep document with the filter.
- Checking whether a value is null or an unexpected type deep inside a payload.
Notes & Gotchas
- For documents beyond the 5,000-node render cap, trim the JSON or rely on the filter to prune branches.
- Copied paths quote object keys, but array indices are positional — they change if the array is reordered.
- Use the type colors to spot values that should be numbers but arrived as strings.
- Keep the input valid: the tree only renders once JSON.parse succeeds.
Frequently Asked Questions
What does object(3) or array(5) mean next to a node?
It is a size summary: the node contains 3 properties or 5 elements. It lets you judge structure at a glance without expanding every branch.
Why do copied paths look like $['key'] instead of $.key?
Quoted bracket paths are unambiguous for keys with dots or special characters and paste directly into JSONPath tools; array elements use [0]-style indices.
What does the filter match?
Keys and primitive values, case-insensitively. Branches that contain no match anywhere in their subtree are hidden, and the counter above the tree reports how many nodes matched.
What happens with very large documents?
The node count is displayed, rendering stops at 5,000 nodes, and the filter prunes before rendering — so the page stays responsive on documents that would otherwise freeze a naive tree.