JSON tree view

Processed locally

app.tree.view

You can also load data via #data={"name":"Ada"} or #url=... It is cleared from the address bar after it is read.

Show JSON as a collapsible tree. When nesting is deep and fields are many, that is clearer than hunting for brackets in plain text, and you can see each node’s type. Click a node to copy its JSONPath for tests or the JSONPath page.

Expand / collapse

Collapse unrelated branches and keep the path you care about. A few shallow levels expand by default; click deeper nodes as needed.

Objects show field counts and arrays show item counts, which helps estimate size.

Types at a glance

Objects, arrays, strings, numbers, booleans, and null are distinguished. Avoid treating "123" and 123 as the same thing.

Useful during integration to confirm the types the backend actually returns.

Complements field detection

The tree shows structure; use the field-detection page for timestamps and colors. Locate a path on the tree, then check whether a leaf is a special format.

Read-only browsing. You do not edit business data on the tree.

Example

Data that fits a tree

{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}

You will see

 the root is an object → config is an object → limits is an object → maxSizeMB is a number. Click nodes instead of counting brackets.

Can I edit values on the tree?

This page is mainly for viewing. After edits, paste back into the formatter to validate.

What if it is huge?

Extract a subtree with JSONPath first, then expand it.

What happens when I click a node?

It tries to copy that node’s JSONPath (for example $.user.id ) to the clipboard, which is handy for assertions.

Should I use format or tree first?

Start with valid JSON. Invalid text cannot be drawn as a tree—validate or format first.

Recommended workflow

Paste valid JSON, or load the sample to see how the tree expands.
Collapse unrelated branches and click through to the target field.
Copy the path, verify it on the JSONPath page, or paste it into tests.
If a leaf looks like a timestamp or URL, confirm it on the field-detection page.

The tree is for “seeing structure.” JSONPath is for “taking values in bulk.” For large documents, using both is faster than expanding everything.