Turn JSON into a Mind Map

A JSON mind map is a graph representation of a JSON document. Where the raw text is a linear sequence of characters, the mind map exposes the underlying structure defined by RFC 8259: objects and arrays are containers, and their members are drawn as child nodes connected by edges. The root of the document sits at the center or the left edge, and every level of nesting adds another ring or column of nodes.

Nodes are color-coded by JSON type so you can read the shape without reading the values. Objects and arrays are branch nodes that fan out to their members; strings, numbers, booleans, and null are leaf nodes with no children. An array renders its elements as indexed children (0, 1, 2…), which makes it obvious whether a list holds scalars or a set of similarly shaped objects.

Because the graph is derived directly from a parse of your JSON, it updates the moment the text changes and it will not render at all if the JSON is invalid — the same parser that powers formatting and validation feeds the mind map. That makes the visual a quick sanity check: if a branch is missing or a value lands under the wrong parent, the structural error is visible immediately.

A tree viewer shows JSON as indented, collapsible rows — excellent for scanning a document top to bottom, copying a value, or drilling into one deep path. It keeps ordering intact and is compact for tall, narrow data. For most day-to-day inspection, the tree is the fastest tool.

A mind map wins when breadth matters more than order. A radial or dendrogram layout spreads sibling branches around the root, so you can compare the shape of several subtrees at once and spot asymmetry: one array item missing a field, an object nested one level too deep, or a configuration block that is heavier than its neighbors. Structure you would scroll past in a tree becomes a silhouette you can take in at a glance.

In practice the two views complement each other. Use the mind map to understand an unfamiliar API response or a large config file as a whole, identify the branch you care about, then click that node to jump straight to it in the editor or tree. The two-way sync means neither view is a dead end.

The compact layout draws the root on one side and grows away from it, packing nodes tightly by level. The left-to-right variant reads like an indented outline and the top-down variant like an org chart. It is the most space-efficient option and a good default for deeply nested objects where you mostly care about parent-child paths.

The dendrogram layout aligns every leaf node along a common edge regardless of its depth. That even margin makes it easy to compare the terminal values across many branches — useful when a document has a fairly uniform depth, such as a list of records that all share the same fields.

The mind-map layout puts the root in the middle and fans its top-level branches out to both sides — or above and below, in the vertical variant — for a balanced, symmetric shape that shows at a glance how a document divides into a few major branches. Two more layouts round things out: indented mirrors a collapsible outline, and Dagre arranges the graph in ranked layers. Every layout flips between horizontal and vertical, and when a graph gets dense you can drag a crowded branch aside and lean on pan and zoom rather than fighting a single fixed view.

The on-page preview and free accounts render up to 100 nodes. The cap keeps the graph readable and the browser responsive: beyond a few hundred nodes a mind map turns into a hairball that is slower to explore than a tree. Paid plans remove the limit for large documents, backed by pan, zoom, and drag so big graphs stay navigable.

It helps to know how nodes are counted. Each key/value pair is one node and every array element adds another, so the total is roughly the root plus every object property and array item in the document. Breadth adds up fast: an array of 40 objects that each carry three fields is already past 160 nodes even though the JSON looks short. When you hit the cap, format or minify the payload first and visualize a representative slice, or open the document in the full editor.

Signing in adds saved projects and keeps two-way sync between the graph, the tree, and the Monaco editor, so a node you locate visually maps back to an exact line and column. The mind map itself always runs client-side; only the AI copilot features, such as explaining JSON or generating documentation, send data to a model and use credits.