Search DevFox

Search tools and pages.

JSON Graph Explorer

Explore any JSON document as an interactive node-link graph with collapsible nodes, $ref/href detection, and PNG plus DOT export

Loading tool...

What is JSON Graph Explorer

Written by Giorgos Kostas. Last reviewed:

JSON Graph Explorer turns any JSON document into a node-link graph — every object and array becomes a node, every key becomes an edge, and references like `$ref`, `id`/`href` pairs are detected and drawn as cross-edges instead of indirection.

It is the visual companion to JSON Viewer (which is a tree-text view) and JSON Path Tester (which is a query view) — best when you need to see the shape of a complex JSON structure at a glance.

Why use it

  • Understand a deeply nested API response without scrolling through 5000 lines of pretty-printed JSON.
  • Spot orphaned references (a `$ref` that points nowhere) at a glance — the edge ends in a missing-node warning.
  • Hand a stakeholder a screenshot of the graph instead of a wall of JSON.
  • Onboard a teammate to a new JSON config schema (Kubernetes manifests, Helm values, OpenAPI specs).
  • Export the graph as DOT and post-process with Graphviz / dot for embedding in docs.

Features

  • React Flow canvas with dagre top-down layout
  • Collapsible object/array nodes; cap on auto-rendered nodes for huge documents
  • Reference detection for $ref pointers and id/href pairs
  • Search-and-highlight across keys and values
  • Export the canvas as PNG or as Graphviz DOT
  • Mobile fallback to a hierarchical tap-to-expand list

How to use JSON Graph Explorer

  1. Paste JSON. Drop a document into the editor. Errors surface inline.
  2. Inspect the graph. The canvas auto-lays out object / array nodes; click any node for a side detail panel.
  3. Search. Type a key or value; matching nodes glow.
  4. Export. Use the toolbar to save as PNG or as Graphviz DOT for inclusion in docs.

Example (before/after)

JSON Graph Explorer input

Start with the jSON Graph Explorer input you want to process in JSON Graph Explorer.

JSON Graph Explorer output

Get a jSON Graph Explorer result from JSON Graph Explorer that is ready to review, copy, and reuse in the next step of your workflow.

Common errors

Unsupported input

The tool may reject input that does not match the expected content, structure, or file type.

Fix: Confirm the tool input requirements and paste the correct type of data.

Incomplete values

Missing fields or partial content can block processing or produce weak results.

Fix: Provide the full required input before running the tool.

Copying placeholder content

Sample or placeholder values can lead to output that looks valid but is not ready for real use.

Fix: Replace placeholders with your actual values before relying on the result.

FAQ

How is this different from the existing JSON Viewer?

JSON Viewer is a tree-text view — fast for reading values, weak for understanding structure. JSON Graph Explorer is a 2D canvas with edges; it shines when the document is wide (lots of siblings), references itself ($ref), or has a graph-shaped structure (graph databases, schemas, RDF).

What does 'reference detection' actually look for?

JSON Schema `$ref` strings (e.g. `"$ref": "#/definitions/User"`), and the common `id`/`href` pair where one object has an `id` and another has `href: "#user-1"` pointing to it. The edges are drawn dashed so they're visually distinct from parent/child edges.

How big a JSON document can it render?

Comfortably up to a few thousand nodes. Beyond that the tool caps the auto-render and you click into nodes to expand them lazily — the cap exists because dagre layout is super-linear and a 50,000-node graph would freeze the browser.

Can I export the graph?

Yes — PNG (rendered from the React Flow canvas at 2× for retina) and Graphviz DOT (so you can post-process with `dot -Tsvg` for high-fidelity SVG embedding in documentation).

Does it work on mobile?

The graph canvas needs space, so on narrow viewports the tool falls back to a hierarchical list (similar to the Viewer) with tap-to-expand and the same reference-edge information shown as a small icon next to the source node.

Is my JSON uploaded?

No. Parsing, layout, and rendering all happen in the browser. File uploads are read with `FileReader` — the file never leaves your device.

Related tools

Pair the graph view with related JSON tools. You can also browse the full Visual & Testing Tools category for more options.

JSON Viewer

View and explore JSON data

JSON Formatter

Format, validate, and beautify JSON online with readable indentation, syntax checking, and copy-ready output for APIs, logs, and config files.

JSON Diff Visualizer

Compare two JSON documents with a structure-aware diff tree, ignore-order options, and JSON Patch (RFC 6902) plus jsondiffpatch delta export

JSON Path Tester

Test JSONPath expressions against JSON data

OpenAPI Visualizer

Paste, upload, or fetch an OpenAPI spec and render readable, navigable API documentation with copy-as-curl per operation

OpenAPI Endpoint Graph

Visualize OpenAPI / Swagger endpoint relationships, schema dependencies, and request flows as an interactive node-link graph with PNG export

Kubernetes YAML Explorer

Explore multi-document Kubernetes manifests grouped by kind with a cross-reference graph (Service to Deployment, ConfigMap mounts, Ingress backends)

Database Schema Visualizer

Visualize SQL CREATE TABLE or DBML as an ERD with table cards, primary-key badges, foreign-key arrows, and per-table detail panels

XML Viewer

View and explore XML documents

YAML Viewer

View and explore YAML data

Diff Checker

Compare two texts and highlight differences

HTML Viewer

View and preview HTML