JSON Viewer – collapsible tree

What JSON viewing does

A JSON viewer shows the parsed value as a tree. After a successful JSON.parse, objects become named nodes, arrays become indexed nodes, and strings, numbers, booleans, and null appear as leaves with their types. Expanding and collapsing a node does not change the data. It only hides children you are not looking at.

That is a different job from a JSON formatter. Format rewrites the text with indentation so you can read it as source. This JSON viewer does not replace your paste with pretty-printed text. The box stays as you typed it. The tree is a map of the structure the parser produced. Use the viewer when nested objects make a formatted file still too long to scan, or when you need to collapse everything except one branch.

Invalid input is not drawn as a fake tree. If parse fails, the tree is cleared and the status shows the browser error. Empty input is not JSON. Arrays, objects, strings, numbers, true, false, and null are all legal roots; a lone null is a one-node tree, not a failure.

How to use

1. Paste JSON into the box. Nothing is uploaded.
2. Choose View tree. Example loads a nested order with an items array.
3. Expand or collapse branches. Copy JSON writes a pretty-printed snapshot of the last successful parse. Clear empties the box and the tree.

If you only need a yes-or-no check, use the JSON Validator. If you need the text indented in the box, use the JSON Formatter. For a full walk-then-extract procedure, see how to work with nested JSON. Come back here when you already have valid JSON and want to walk it.

Example

This payload is valid. View tree should show an order object, a nested customer, and an items array with two objects:

{
  "order": {
    "id": 881,
    "customer": { "name": "Ada", "tags": ["vip"] },
    "ok": true
  },
  "items": [
    { "sku": "A1", "qty": 2 }
  ]
}

The string "Ada" stays a string leaf. 881 stays a number. Collapsing order hides customer without deleting it. Copy JSON returns indented text of the same value, which is useful if you then want the formatter’s copy-paste form.

Viewer vs formatter

Format answers “make this text readable.” The JSON viewer answers “show me the shape.” A 200-line pretty file can still hide a field three layers down. A tree with collapsed siblings is faster for that hunt. The viewer is not a JSON beautifier and it is not a validator with extra chrome. Bad JSON still fails parse. Good JSON is not rewritten in the input box.

Key order follows what the browser’s parser produced. Do not treat the tree as a canonical hash. Very large documents are truncated after a few thousand nodes so a tab does not freeze. That is a limit of this page, not of JSON.

Practical use cases

• API responses with nested data, meta, and included objects
• WordPress or Magento JSON config that is legal but deep
• Log fields you already isolated and validated, when format is still a wall of text
• Checking whether a value is an object or an array of objects before converting it to CSV

If the payload might still be illegal, validate first. If you need a spreadsheet, use JSON to CSV after you have confirmed the shape is actually a table. If the text is a quoted JSON string from a log, unescape it on the JSON Escape page, then view the inner value.

Limits

• The tree is built from JSON.parse only. Comments, trailing commas, and single quotes fail.
• Values are shown with textContent. Pasted HTML is not executed.
• Huge files may stop after 4000 nodes. Use a local editor for multi-megabyte dumps.
• Do not treat two trees as a comparison. Use how to compare two JSON documents when you need a structural list.

Privacy

Parse and tree rendering run in this browser. The payload is not sent to YallaSolve for this tool. Tokens still sit in the tab until you clear them or close the page.