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

Anirudha Sonwane — Mon, 27 Jul 2026 07:25:32 +0000

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.

I built a free online toolbox with 280+ tools — here's the tech stack and what I learne8

Anirudha Sonwane — Fri, 26 Jun 2026 06:45:15 +0000

Every small task used to mean a new tab. JSON formatter on one site, GST calculator on another, PDF merger somewhere that wanted my email before it would merge two pages. Ads everywhere, slow UIs, and that low-grade worry about uploading a payslip or invoice to a server I do not control. I got tired of juggling twenty bookmarks for work that should take thirty seconds — so I started building one place for all of it.

What ToolReign is

ToolReign is a free online toolbox: 280+ utilities across 15 categories, all running in your browser. Developer tools (JSON formatter, JWT decoder, API client), text utilities, SEO helpers, PDF and image tools, spreadsheets, and a finance section I built with India in mind — GST with CGST/SGST/IGST splits, EMI and SIP calculators, HRA exemption, gratuity, income tax estimates, and more.

The idea is straightforward: open a tool, do the work, leave. No signup wall, no file uploads to a backend, no account to manage. I am Anirudha Sonwane, a Senior Software Engineer at Giant Leap Systems in Pune. ToolReign is a side project I build around my day job — not a pitch deck, just something I wished existed.

The tech stack decisions

Next.js 14 App Router and static export

Each tool lives at its own route under src/app/{category}/{tool-slug}/. That maps cleanly to SEO: one URL, one search intent, one page of metadata. The site exports statically (output: 'export'), so production deployment is uploading an out/ folder to static hosting — no Node server to babysit.

The App Router made this scale. Add a page component, register the slug in tool-registry.json, and the sitemap, category hubs, and search index pick it up automatically. At 260+ tools, hand-maintaining URLs would have broken within a month.

100% client-side — the decision that shaped everything

This was the core architectural bet, and it is also the privacy story: your data never leaves the browser. Finance calculators are plain TypeScript math with useMemo. PDF merge and split use pdf-lib and pdfjs-dist in-tab. Images go through the Canvas API. Audio through the Web Audio API.

The engineering is harder than the marketing. A five-file PDF merge on a mid-range phone can freeze the main thread if you are careless. I had to think about memory when combining multi-megabyte documents, show progress where it matters, and avoid loading entire files when a page-range operation would do. Getting "merge these PDFs" to feel instant without a server was more interesting than wiring another REST endpoint.

The supporting cast

Tailwind CSS and next-themes for light, dark, and system mode — calculators get used late at night more than I expected.
Recharts for finance visualisations: EMI principal-vs-interest donuts, SIP growth curves.
DOMPurify anywhere user-adjacent HTML might render — small surface area, non-negotiable.
Security headers in next.config.js — CSP, HSTS, X-Frame-Options, a tight Permissions-Policy. Static sites still get scanned.
PWA via next-pwa so repeat visitors can install the toolbox like an app.

One scaling problem: metadata without drift

Early on I realised I could not hand-write Open Graph tags for hundreds of tools. Everything funnels through a shared helper:

// src/lib/seo.ts (simplified)
export function buildMetadata({ title, description, path }: {
  title: string
  description: string
  path: string
}): Metadata {
  const canonical = `${SITE.url}${path}`.replace(/([^/])$/, '$1/')
  return {
    title: { default: `${title} | ${SITE.name}`, template: `%s | ${SITE.name}` },
    description,
    keywords: extractKeywords(title, description),
    openGraph: { type: 'website', url: canonical, title, description, locale: 'en_IN' },
    twitter: { card: 'summary_large_image', title, description },
    alternates: { canonical },
  }
}

Each tool page calls buildMetadata() once. Canonical URLs, Twitter cards, and en_IN locale stay consistent. The sitemap reads from the same tool-registry.json, so search indexing and on-site navigation never disagree about what exists.

What surprised me

SEO is half the product. I assumed I would spend ninety percent of my time on calculator logic. Reality: JSON-LD per tool (WebApplication, FAQ schema, HowTo steps), breadcrumb markup, related-tool links, synonym keywords for long-tail queries, collapsible formula explainers on finance pages. Google's AI overviews love "how is EMI calculated?" — a tool site competes on clarity as much as code.

India-specific finance tools punched above their weight. Global EMI calculators are everywhere. Adding GST split logic, HRA exemption rules, and lakh/crore formatting with en-IN locale matched how people actually search here. Locale is not polish — it is a product decision.

Client-side PWAs are more capable than I assumed. Installable shell, offline-friendly caching, no account — it fits the "I just need to convert this PDF" use case better than a bloated web app.

What I would do differently: invest in a stricter component scaffold earlier — shared input toolbars, validation helpers, result placeholders, WhatsApp share buttons, formula explainers — before the finance silo grew past twenty calculators. Copy-paste refactors across similar tools cost more time than the shared abstractions saved later.

What's next

I am continuing down the long tail: more text and developer utilities, deeper finance coverage, and better mobile UX on canvas-heavy tools like handwriting generators. AdSense is on the horizon, but the constraint stays the same — do not interrupt the work surface.

If you try a tool and something feels off, I genuinely want to hear it. Comment here or use the contact form on the site. Broken on Safari? Confusing GST inclusive vs exclusive? Tell me.

Closing

ToolReign started as "one bookmark instead of twenty" and turned into a lesson in static SEO at scale, in-browser media processing, and building for a specific audience without locking everyone else out. It is a side project built after hours in Pune, alongside my work at Giant Leap Systems.

Happy to answer questions about the stack, static export tradeoffs, or how to structure a registry when your tool count stops being cute.

Check it out at toolreign.com — completely free, no account needed.

🚀 Tool Reign is live on Product Hunt today!

If you found this useful, your support means everything.

👉 https://www.producthunt.com/products/tool-reign

DEV Community: Anirudha Sonwane

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

✨ What it does

Features

🔒 Privacy First

Part of a Bigger JSON Toolkit

Try it

[Boost]

I built a free online toolbox with 280+ tools — here's the tech stack and what I learne8

I built a free online toolbox with 280+ tools — here's the tech stack and what I learne8

What ToolReign is

The tech stack decisions

Next.js 14 App Router and static export

100% client-side — the decision that shaped everything

The supporting cast

One scaling problem: metadata without drift

What surprised me

What's next

Closing