Viewing JSON as a Graph or Tree

"Tree" and "graph" are the two common ways to picture JSON, and people often use the words interchangeably. They are related — JSON is a tree of values — but the layouts solve slightly different problems. This guide explains how each maps to your data and when to reach for which, then shows how to turn raw JSON into a visual layout with { } jsonbloom .

Two ways to picture JSON: graph vs tree

A tree view is a vertical, indented outline — like a file explorer — that you read top to bottom. A graph view places each object, array, and value as a node in 2D space, connected by edges, so you pan and zoom rather than scroll. Both represent the same hierarchy; they differ in layout and in how you navigate.

How a graph maps to JSON

In a graph, each object and array is a node and each edge points to a value nested inside it. Keys label the connection to their value; array items become indexed children. Wide structures (an object with many keys, or a long array) spread out horizontally, which makes "how many" and "what connects to what" easy to see.

How a tree maps to JSON

In a tree, nesting is shown by indentation: children sit indented under their parent. It is compact and familiar, and it works well for narrow, deeply nested data where you mostly move up and down a single path.

When to use which

• Use a graph for wide payloads, arrays of objects, and exploring an unfamiliar response — spatial layout makes relationships obvious.
• Use a tree for tall, narrow data and quick top-to-bottom scanning when screen space is limited.

Turning your JSON into a graph online

Paste your JSON into the jsonbloom editor and it is drawn as a connected graph instantly — no upload, no account, everything in the browser. From there you can collapse and expand nodes, edit values inline, and download the view. New to this? Start with how to visualize JSON.

Frequently asked questions