Online JSON Viewer & Explorer

Explore JSON as a collapsible tree with the raw text beside it. Types are labelled, so you can tell an empty string from a null and a number from a numeric string at a glance.

Reading a large payload as text means holding the bracket nesting in your head while you scan. A tree does that for you: each object and array becomes a node you can collapse, so you can hide the ninety percent of the document you do not care about and look only at the branch you do. The raw editor stays alongside it, because sometimes you want to search the text.

The tree also makes types explicit, which text does not. In raw JSON, 42 and "42" differ by two characters that are easy to skim past, and null, an empty string, and a missing key look similar enough to confuse when you are scanning quickly. Each node here carries its type, which turns a class of debugging question into something you can answer by looking.

What the tree shows that raw text does not

Every node is labelled with one of six types: string, number, boolean, null, object, or array. That last distinction is the one raw text handles worst, because arrays and objects are both bracketed and a quick glance at a deeply indented document does not reliably tell you which you are looking at. It matters when you are writing an accessor, since one needs an index and the other needs a key.

Nodes carry a path built as you would write it in code, with dots for object keys and square brackets for array indices, rooted at root. A field three levels down reads as root.user.address.city, and an element inside an array reads as root.items[2].id. Drop the leading root and you have an expression you can paste into your own code or a jq filter.

The first two levels are expanded when a document loads and everything deeper starts collapsed. That is a deliberate compromise: expanding everything makes a large response unreadable and slow to render, while collapsing everything means clicking before you can see anything at all. Two levels is usually enough to show the shape of a response and the names of its top level fields.

Node types and path notation

What each value in a document is labelled as, and how its path is written.

Reading a response as a tree

The paths on the right are what the tree reports for each leaf in the document on the left.

{
  "user": { "name": "Ada", "zip": "07030" },
  "items": [
    { "id": 1, "score": 9.5 },
    { "id": 2, "score": null }
  ]
}

root.user.name      string   "Ada"
root.user.zip       string   "07030"
root.items[0].id    number   1
root.items[0].score number   9.5
root.items[1].id    number   2
root.items[1].score null     null

Strip the leading root and each path is a valid JavaScript accessor. Note that zip is a string, so its leading zero is intact, while score is a number.

Common Pitfalls

Very large documents are limited by browser memory

The whole document is parsed and a tree node is built for every value, which costs several times the size of the raw text in memory. A file of a few megabytes is comfortable. Tens of megabytes will make the tab sluggish or run it out of memory, because nothing is streamed or virtualized. For files that big, work on a slice or use a streaming parser locally.

Duplicate keys collapse before the tree is built

If a payload contains the same key twice in one object, parsing keeps only the last occurrence, so the tree shows one node and gives no hint that anything was discarded. This is standard parser behaviour rather than something the viewer chooses. Search the raw text if you suspect a producer is emitting duplicates.

{"a":1,"a":2}  ->  one node, a = 2

Large integers are already rounded by the time you see them

JSON numbers are parsed as double precision floats, so an integer beyond 2^53 loses precision during parsing, before the tree is built. A twenty digit ID will display with trailing zeros that were not in your input. Check the raw editor for the original text, and ask the producer to send such IDs as strings.

12345678901234567890  ->  12345678901234567000

How to Use

1. Paste or upload: Paste an API response or open a JSON file from disk. Nothing is uploaded.
2. Explore the tree: Switch to Tree view to interactively expand and collapse nodes. Hover over values to see their types.
3. Copy or edit: Use the Code view to edit JSON directly with syntax highlighting, or copy the content to your clipboard.

Key Features

• Interactive tree view with expand/collapse for all nodes
• Syntax highlighting with Monaco Editor (same engine as VS Code)
• Dual view mode: switch between Code and Tree views instantly
• Load JSON from file or paste from clipboard: works with large files

Use Cases

• Debugging API responses: paste the raw JSON to quickly inspect nested structures
• Exploring configuration files: navigate complex config files with the tree view
• Validating JSON structure: instantly see if your JSON is well-formed or contains errors

Frequently Asked Questions