DEV Community

Cover image for I built an interactive JSON graph viewer that runs entirely in your browser
Anirudha Sonwane
Anirudha Sonwane

Posted on

I built an interactive JSON graph viewer that runs entirely in your browser

Nested JSON is difficult to understand in a text editor.

Tree views help, but once you're dealing with large API responses or deeply nested objects, following relationships becomes tedious. I wanted something more visual, so I built an interactive Graph View for ToolReign's JSON Formatter.

Instead of reading JSON line by line, you can explore it as a connected node graph.

✨ What it does

Switch from Text, Tree, or Table view to Graph, and your JSON becomes an interactive diagram.

Features

  • Objects and arrays become connected cards
  • Strings, numbers, booleans, and null values stay inside their parent node
  • 🔗 Edges connect to the exact field they belong to (not just the center of the card)
  • Expand or collapse nested branches
  • Automatic graph layout powered by Dagre
  • Type-aware rendering
    • Strings
    • Numbers
    • Booleans
    • URLs
    • Hex colors
  • Powerful toolbar
    • Zoom
    • Fit View
    • Search with Previous/Next navigation
    • Copy subtree
    • Replay layout
    • Layout settings (Left → Right or Top → Bottom)
  • Fullscreen mode for huge payloads
  • Export as PNG or SVG

🔒 Privacy First

Everything runs entirely in your browser.

  • No uploads
  • No accounts
  • No servers processing your JSON
  • Heavy layouts run in Web Workers for better performance

Your data never leaves your device.

Part of a Bigger JSON Toolkit

The Graph View is built into ToolReign's JSON Formatter, which also includes:

  • Format & Beautify JSON
  • Minify JSON
  • Repair invalid JSON
  • Auto-correct common syntax errors
  • JSONPath queries
  • JSON Schema validation
  • Generate TypeScript, Go, and Rust models
  • JSON Compare mode
  • Shareable URLs
  • YAML, CSV, and XML support

Try it

Live Demo:

https://toolreign.com/developer/json-formatter/

Paste a messy API response, switch to Graph, and explore the structure visually.

I'd especially love feedback on:

  • Performance with large arrays
  • Deeply nested objects
  • UI/UX improvements
  • Bugs or edge cases

If you have ideas for new features, let me know. I'm actively improving the tool and would love to hear your feedback.

Top comments (0)