JSON Viewer

Runs locally

Explore a payload as a collapsible tree instead of scrolling raw text.

JSON input

{
  "order": {
    "id": 1042,
    "customer": { "name": "Ada Lovelace", "verified": true },
    "items": [
      { "sku": "SKU-1", "qty": 2, "price": 19.99 }
    ],
    "total": 39.98,
    "note": null
  }
}

Tree

13 visible rows · only what fits on screen is rendered

id:1042

name:"Ada Lovelace"

verified:true

sku:"SKU-1"

qty:2

price:19.99

total:39.98

note:null

About the JSON tree viewer

How it works in 4 steps · 4 common use cases · 3 questions answered

How it works

1.Paste any JSON payload.
2.It is rendered as an expandable tree, with each branch showing how many children it holds.
3.Leaf values are colour-coded by type, so a number that arrived as a string is visible at a glance.
4.Collapse the parts you do not care about to get to the field you do.

Common use cases

•Exploring an unfamiliar API response without scrolling thousands of raw lines
•Checking the shape of a deeply nested document before writing code against it
•Confirming a value arrived as the type you expected rather than a stringified one
•Finding one field inside a large payload during an incident

FAQ

Can it handle large payloads?

Yes. Only the rows currently on screen are rendered, so a document with tens of thousands of nodes scrolls without freezing the tab. Large documents are also parsed in a background worker.

How do I tell a number from a numeric string?

By colour and by the quotes. A string value is quoted and coloured as a string even when it reads as 42 — which is usually the first clue when a comparison in your code is failing.

How is this different from the JSON Validator’s tree?

It is the same idea with a different focus. The validator leads with error reporting and duplicate keys; this page is the tree on its own, for reading rather than checking.