DEV Community

Aquarius
Aquarius

Posted on

🔍 Behind the Scenes: How I Built Client-Side JSON Tools (Diff, Patch, Format...)

#javascript #webdev #json #diff

Modern devs deal with JSON every single day — API responses, config files, database dumps, you name it.

But:

  • Comparing JSON? Not fun.
  • Patching JSON? Even worse.
  • Formatting or validating? Sometimes even that feels clunky.

So I built a single-page dev toolbox at 👉 ulidtool.net/#json-tools

Here’s how it works under the hood — and the dev challenges behind each tool.

🧠 1. JSON Patch Generator (RFC 6902)

📌 The Goal:

Let users compare two JSON documents and generate a list of patch operations (add, remove, replace) that convert A → B.

⚙️ How it's built:

I use jsondiffpatch under the hood to deeply compare two objects.

import { compare } from 'jsondiffpatch';

const delta = compare(oldJson, newJson);
Enter fullscreen mode Exit fullscreen mode

This returns a structured diff. But RFC 6902 expects flat paths and strict op formats like:

{ "op": "replace", "path": "/user/0/name", "value": "Alice" }
Enter fullscreen mode Exit fullscreen mode

🔄 The Challenge:

  • Traverse jsondiffpatch output
  • Detect type of change (add, remove, replace)
  • Convert nested paths into string paths
  • Escape / as ~1 (RFC spec compliance)

✔️ Solved using a recursive walker that tracks full key paths and outputs spec-compliant JSON Patch array.

🔎 2. JSON Diff Viewer

🎯 Goal:

Let devs visually spot changes in JSON.

💡 How:

  • I use CodeMirror to render syntax-highlighted, line-numbered JSON
  • Then compare the line-by-line diff using a smart algorithm
  • Mark inserted / removed / changed lines using diff-match-patch-like logic

Two modes:

  • Split view (left/right side-by-side)
  • Unified view (like GitHub)

This is one of the most used features in my toolset.

✨ 3. JSON Formatter & Minifier

🧩 Features:

  • Pretty-print JSON with spacing
  • Minify JSON (remove whitespace)
  • Beautify even ugly single-line blobs

⚙️ How it's built: 

const formatted = JSON.stringify(JSON.parse(input), null, 2); // for beautify
const minified = JSON.stringify(JSON.parse(input)); // for minify
Enter fullscreen mode Exit fullscreen mode

Yes, it’s that simple — but the magic is in:

  • Clean error messages (invalid JSON)
  • Auto-fix common issues (’ instead of " etc.)
  • Preview mode

✅ 4. JSON Validator

🔎 Goal:

Tell devs instantly if their JSON is valid or broken.

Built using try...catch around JSON.parse() with detailed error output:

try {
  JSON.parse(input);
  // success
} catch (e) {
  // show line number & error
}
Enter fullscreen mode Exit fullscreen mode

For extra polish:

  • I highlight the offending line
  • Offer a "fix suggestion" if possible

🔐 Why it’s 100% Client-Side

All of these run fully in-browser. No tracking, no requests, no backend.

That means:

  • 🔐 Total data privacy
  • ⚡ Instant performance (no server delay)
  • ✅ Great for sensitive work or offline usage

💡 Takeaways

Building this taught me a lot:

  • ✍️ JSON is simple but diffing it isn't
  • 🧪 RFC 6902 is strict — and unforgiving
  • ⚙️ Client-side tools need to be fast, forgiving, and useful

🔗 Try it live

👉 https://ulidtool.net/#json-tools

Use it to:

  • Diff API responses
  • Patch config changes
  • Format messy JSON
  • Validate payloads quickly

And let me know:

  • What would make this better?
  • Want a CLI version? JSON Patch applier? Export to Git-style diff?

Thanks for reading!

If you use JSON in your workflow, this tool’s for you. Feedback is more than welcome 🙌

Top comments (0)