utilyfe

JSON Tree Viewer

Collapse what you don't need, find the field you do, and copy the path straight into your code.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Tree
The JSON tree appears here.
Also try:JSON FormatterJSON DiffJSON to TypeScript & Zod

How to use the JSON Tree Viewer

  1. 1Paste your JSON, or press "Try an example" to see how it works.
  2. 2Click the arrows to open and close branches, or use Expand all and Collapse all.
  3. 3Type in the find box to search keys and values. Matching branches open on their own.
  4. 4Hover a row and press Copy to take the path in JavaScript form, like data.order.items[1].sku.

Reading a payload you didn’t write

A formatted 4,000-line response is still 4,000 lines. Most of the time you want one of two things: the shape of the document, or one particular field.

A tree gives you both. Everything starts collapsed, so the top level tells you what kind of thing you’re holding. Open one branch and you see its keys, each with its type and how many children it has (items [2], customer {3}), so you can tell an empty list from a missing one at a glance.

Paths, and why they’re the point

Every row has a path, and the Copy button gives it to you as JavaScript:

data.order.items[1].sku
data.order.customer.tags[0]

That’s usually the reason you opened the document in the first place: you needed to know how to reach a field from code. Objects are addressed by key, arrays by index, exactly as they are in JavaScript, Python or jq.

Searching

The find box matches both keys and values, ignoring case. Branches that contain a match open by themselves and matching rows are highlighted, so a search for email shows you where every email lives, and a search for ord_8842 finds the record carrying that id.

Clearing the box puts the tree back the way you had it: your expanded branches are remembered.

Types at a glance

Shown as Means
{5} An object with five keys
[0] An empty array, not the same as a missing field
null Present, and explicitly null
"7" vs 7 A string and a number, which behave differently downstream

Telling these apart quickly is most of the value: a field that’s null, a field that’s [], and a field that isn’t there at all are three different bugs.

Large documents

The whole document is parsed, but only the first 5,000 rows are drawn, because drawing tens of thousands of rows is what makes a page stutter. If you hit that limit, collapsing a branch or searching brings the rest into reach.

Everything happens in this tab. That matters for the payloads worth exploring: real responses, with real customer data in them.

Questions

How is this different from the JSON formatter?
The formatter is for making a document readable and checking that it's valid. This is for documents too big to read at all: it starts collapsed, so you see the shape first, and you open only the branch you care about.
What exactly does Copy give me?
The path written as JavaScript, starting from data: for example data.order.items[1].sku. Rename the variable to whatever holds your response and it's ready to paste. The same path works in most tools that address JSON by key and index.
Does searching look at values as well as keys?
Both, and it ignores case. Every branch that contains a match opens automatically and the matching rows are highlighted, so you can find a field by its name or by a value you remember seeing.
How large a document can it handle?
Several megabytes work. To keep the page responsive, at most 5,000 rows are drawn at once: collapse a branch, or search, and the rest come into view. The whole document is always parsed; only the drawing is limited.
Is my JSON uploaded?
No. Parsing, searching and expanding all happen in this browser tab, which matters when the payload is a real API response. Nothing is uploaded, logged or saved.