API Response Viewer
Paste a JSON or XML API response and explore it with a collapsible tree, type-coloured leaves, JSONPath/XPath addresses for every node, and free-text search across keys and values. 100% offline.
What is the API Response Viewer?
API Response Viewer auto-detects whether your input is JSON or XML and builds a uniform interactive tree you can drill into. JSON uses `JSON.parse`; XML uses DOMParser (safe — no script execution). Every node carries a clickable JSONPath-style address (`$.data.users[0].email`) or XPath (`/response/user[1]/name`) so you can grab the exact selector for use in jq, Postman or your own code. Type-coloured leaves: strings green, numbers amber, booleans violet, null red. Free-text search walks the tree looking for matches in keys, values and (for XML) attribute names + values — returning the path to every hit. Two-level auto-expand on load, expand-all and collapse-all buttons, and per-node toggles let you focus on what matters.
How to use it
- Paste your API response — JSON or XML, the format is auto-detected.
- Browse the collapsible tree; click any node to copy its JSONPath/XPath.
- Search across keys + values + attributes to find a specific field instantly.
- Expand or collapse the whole tree with one click.
Benefits
- Auto-detects JSON vs XML — paste and go.
- Collapsible tree with two-level auto-expand on load.
- JSONPath ($.foo[0].bar) and XPath (/root/foo[1]/bar) addresses for every node.
- Type-coloured leaves: string green / number amber / boolean violet / null red.
- XML attributes shown distinctly (@name="value").
- Search across keys, values and XML attributes — returns paths to every hit.
- Click any tree node to focus it; the path is shown for one-click copy.
- Stats: nodes, leaves, max depth, object/array/element counts.
- Runs 100% in your browser — Toollyz has no server.
Frequently asked questions
How is this different from JSON Formatter?
JSON Formatter is for prettifying / minifying / diffing JSON text. This tool is a tree explorer optimised for browsing API responses — every node has a JSONPath/XPath address you can copy, and you can search across the whole tree.
Does it execute JavaScript?
No. JSON is parsed with JSON.parse (safe). XML uses DOMParser with application/xml mode, which the spec forbids from executing scripts. We never use innerHTML.
What XPath form does it use?
Standard 1.0-style — /root/element[1]/child[2]/... with 1-based indices for repeated siblings. Attribute names are shown distinctly under each node.
And JSONPath?
Goessner-style — $.foo.bar[0].baz. Both bracket and dot notation work depending on whether the key is a valid JS identifier and whether you're in an array.
Can I edit the response?
Not directly in the tree. Edit the text in the textarea and the tree updates live.
How big a response can it handle?
Comfortable up to ~100,000 nodes. The bottleneck is rendering, not parsing. For multi-million-node responses, consider streaming tools.
What about deeply nested XML?
Nesting depth is unbounded — every element gets a depth-aware indent.
Search returns too many results?
We cap at 200 hits to keep the page responsive. Refine the query to narrow the matches.
What's the 'focused path' for?
When you click a node, its full address is shown at the bottom — useful for copying selectors into Postman, jq or your code.
Does it handle JSON Lines (NDJSON)?
Not currently — paste-as-one-document. We may add NDJSON support if it's requested.
Is anything uploaded?
No. Parsing, search and rendering all run in your browser.