JSON Tree Viewer
Explore JSON as a collapsible, searchable tree instead of a flat text block.
Entrada JSON
Árbol
Escribe JSON a la izquierda para explorarlo como árbol.
¿Qué es 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.
Cómo usar JSON Tree Viewer
- Paste or type your JSON 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.
Ejemplos
Exploring a nested API response
Entrada
{"user": {"id": 1, "roles": [{"name": "Admin"}, {"name": "Editor"}]}}
Salida
Collapsible tree: user → roles [2] → {name: "Admin"}, {name: "Editor"}
Copying a field's path
Entrada
{"data": {"items": [{"sku": "P001"}]}}
Salida
Clicking copy on the sku field yields: data.items[0].sku
Errores comunes
- 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.
Por qué usar esta herramienta
- Runs entirely in your browser — nothing you paste is uploaded 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.