JSON Tree Viewer
Explore JSON as a collapsible, searchable tree instead of a flat text block.
JSON input
Tree
Enter JSON on the left to explore it as a tree.
What is JSON Tree Viewer?
A JSON tree viewer renders a JSON document as a collapsible, interactive tree instead of a flat wall of indented text — the same browsing experience you get from a browser's DevTools Network panel or an API client's response viewer. Every object and array becomes a node you can expand or collapse independently, keys and values are color-coded by type (strings, numbers, booleans, null), and you can search across the whole document to jump straight to the key or value you're looking for instead of scrolling through hundreds of lines. This is especially useful for large, deeply-nested API responses or config files where a plain formatted view makes it hard to see the overall shape of the data or find one specific field buried several levels down. Each node also carries a small type icon (braces for an object, brackets for an array, a hash mark for a number, a toggle for a boolean, a dash for null) plus an inline child count next to any object or array — `roles [2]` — so you can gauge what a collapsed branch holds before you open it. The root and its immediate children render expanded by default; anything past two nesting levels starts collapsed until you click into it or a search match forces it open.
How to use JSON Tree Viewer
- Paste or type the JSON document you want to explore into the left panel.
- The tree on the right renders instantly — click the arrow next to any object or array to expand or collapse it.
- Use "Expand all" or "Collapse all" to control the whole tree at once, or the search box to highlight keys/values matching a term (matching branches auto-expand).
- Hover any row and click the copy icon to grab its path (e.g. roles[0].name) for use in code or a JSONPath query.
Examples
Exploring a nested API response
Input
{"user": {"id": 1, "roles": [{"name": "Admin"}, {"name": "Editor"}]}}
Output
Collapsible tree: user → roles [2] → {name: "Admin"}, {name: "Editor"}
Copying a field's path
Input
{"data": {"items": [{"sku": "P001"}]}}
Output
Clicking copy on the sku field yields: data.items[0].sku
Default expand depth on a deeply nested document
Input
{"a": {"b": {"c": {"d": 1}}}}
Output
a and b render expanded automatically; c stays collapsed until you click it, since only the first two nesting levels auto-expand.
Common mistakes
- Trying to edit values directly in the tree — this tool is read-only for exploration; use the JSON Editor tool if you need to modify values.
- Expecting the copied path to be a full JSONPath expression (with a leading $) — it's a simplified dot/bracket path meant for quick reference, not a JSONPath query string.
- Assuming collapsed branches are removed from the data — collapsing only hides them visually; nothing is deleted or altered.
- Expecting the copy icon to grab the value or the whole subtree as JSON — it only copies the dot/bracket path string; use the JSON Formatter or Editor if you need the actual JSON text for that branch.
- Not realizing a field is present in the document just because it's not visible — anything past the first two nesting levels starts collapsed by default, so an unexpanded ancestor branch can hide a field you're looking for.
Why use this tool
- Runs entirely in your browser — the document you're browsing is never uploaded or transmitted anywhere.
- Makes deeply-nested JSON far easier to navigate than a flat formatted view, especially for large API responses.
- One-click path copying saves you from manually counting array indices or nested keys when writing code against the data.
- Every node carries a type icon (braces, brackets, quote, hash, toggle, or a null marker) plus an inline child count, so you can judge what's inside a collapsed branch without opening it.
- Search auto-expands and highlights matching branches in place instead of collapsing everything else into an isolated result list, so you keep the surrounding structure for context.