Working with deeply nested JSON can feel like navigating a maze blindfolded. You scroll through hundreds of lines, trying to understand the shape of the data — which keys exist, how deep it goes, where the arrays are. What if you could see it all at once?

The problem with raw JSON

Most developers interact with JSON in a text editor. That works for small payloads, but real-world data is rarely small:

API responses from services like GitHub, Stripe, or Shopify can be hundreds of lines deep
Configuration files (Terraform, Docker Compose, package.json) have complex nested structures
Database exports contain arrays of objects with varying schemas

Reading raw text forces you to build a mental model of the structure. That’s slow, error-prone, and exhausting for large files.

Graph visualization: see the shape instantly

A graph view transforms JSON into a tree of connected nodes. Each key becomes a node, and nesting becomes edges. You can immediately see:

Depth: how many levels deep the data goes
Breadth: how many keys exist at each level
Arrays vs objects: different visual treatment makes them instantly distinguishable
Leaf values: actual data values at the tips of the tree

How JSON Lens does it

JSON Lens uses an auto-layout algorithm (Dagre) to arrange nodes in a readable tree. Here’s what makes it useful:

Expand and collapse

You don’t have to see everything at once. Click any node to expand or collapse its children. Start with a high-level overview, then drill into the sections that matter.

Smart format detection

When you expand a node, JSON Lens doesn’t just show raw values. It auto-detects formats like:

URLs — displayed as clickable links
Dates — shown with human-readable formatting
UUIDs — identified and labeled
JWTs — decoded header and payload
IP addresses, country codes, currencies, and more

Schema mode

Switch to schema mode to see the inferred type structure instead of actual values. This is invaluable when you’re working with an unfamiliar API and need to understand the shape before writing code.

Try it with your own data

Open JSON Lens
Paste your JSON (or YAML, XML, TOML, HTML)
Switch to Graph view in the toolbar
Click nodes to explore

The app runs entirely in your browser — no data is sent to any server. It even works offline as a PWA.

When to use graph view vs. other views

Use case	Best view
Understanding overall structure	Graph
Navigating large datasets	Miller Columns
Editing and reformatting	Code Editor
Comparing schemas across array items	Schema Mode

Graph view shines for exploration and communication. When you need to explain a data structure to your team, a screenshot of the graph is worth a thousand lines of JSON.