JSON Graph Viewer – Visualize JSON Online

See the structure of any JSON as a graph of connected boxes.

JSON Graph Viewer: what it does

A JSON visualizer turns a wall of nested braces into a picture. Paste your JSON and switch to the graph view: every object and array becomes a box, children are connected to their parents, and you can zoom and pan around even very large documents.

Each box has controls to collapse or expand itself, collapse or expand its whole hierarchy, or hide its children entirely. Click a box to highlight the matching object or array in the source, and export the diagram as a PNG. It all runs in your browser.

What the JSON graph view can do

  • Objects and arrays drawn as connected boxes
  • Collapse or expand a single box
  • Collapse or expand a whole child hierarchy
  • Hide or show the children of a box to keep large graphs small
  • Click a box to highlight it in the JSON source
  • Zoom and pan, and export the graph as a PNG
  • Switch to tree view or formatted text at any time
  • Browser-based: the diagram is drawn locally

How to visualize JSON as a graph

  1. Paste your JSON into the input box, or upload a file.
  2. Open Graph view to draw the structure.
  3. Use the buttons in each box header to collapse, expand or hide its children.
  4. Click a box to find it in the source, or export the PNG to share the structure.

Examples

Visualize nested teams and members

A company with teams and members becomes a tree of connected boxes.

{"company":{"name":"Acme","teams":[{"name":"Platform","members":[{"id":1,"name":"Ada"},{"id":2,"name":"Lin"}]},{"name":"Data","members":[{"id":3,"name":"Sam"}]}]}}

Frequently asked questions

How do I visualize JSON?

Paste your JSON into the input box and open Graph view. Each object and array is drawn as a box and linked to its parent.

How do I deal with a very large JSON graph?

Collapse boxes, or use hide children on a branch you do not need. Hidden branches are left out of the drawing entirely, which keeps big documents responsive.

Can I save the graph as an image?

Yes. Export PNG saves the graph as it is currently shown, including collapsed and hidden boxes.

Is my JSON sent anywhere to draw the graph?

No. The graph is computed and drawn in your browser.