How to Deep Merge JSON Files Safely in the Browser (100% Client-Side)

#json #webdev #tools #javascript

We've all been there: It's Friday at 4:55 PM. You just need to merge two simple .json config files for deployment.

"This will take 30 seconds," you whisper — a naive lie to yourself.

Flash forward 3 hours later: You're staring blankly at a screen full of missing commas, silently questioning your life choices. 💀

Here is the tragic 3-act story of every developer who has ever tried to merge JSON files by hand.

Act I: "I'll just use Object.assign()!"

You open config.old.json and config.new.json. You want to update an endpoint while keeping your default timeout settings.

const target = {
  api: { endpoint: "/v1", timeout: 5000 },
  features: { darkmode: true }
};

const source = {
  api: { endpoint: "/v2" } // missing timeout!
};

// Shallow merge using Object.assign():
const result = Object.assign({}, target, source);

console.log(result);
/*
Output:
{
  api: { endpoint: "/v2" }, // ❌ timeout: 5000 is GONE!
  features: { darkmode: true }
}
*/

The Pain: Because Object.assign() and spread operators perform a shallow merge, the top-level api object was completely overwritten. Your timeout key was wiped out silently, your dev build crashed, and your coffee is now freezing cold. 🪦

Act II: "I'll use an online merger!"

Desperate, you open Google and paste your internal API configurations and localized client settings into the first online-json-merger-free.com site you find.

Suddenly, a cold sweat hits you:

"Wait... did I just send our production database keys and API tokens to a server hosted in someone's basement?" 😳

The Paranoia: You spend the next hour rotating secret tokens and auditing git commits just to be safe.

Act III: Salvation (The 100% Local Deep Merge)

To save your Friday nights and preserve your sanity, here are two simple solutions that actually work:

Option A: The Vanilla JS Deep Merge

If you're writing code, stop using { ...a, ...b } for nested JSON. Use a recursive merge strategy instead:

function isObject(item) {
  return item && typeof item === "object" && !Array.isArray(item);
}

function deepMerge(target, source) {
  let output = Object.assign({}, target);

if (isObject(target) && isObject(source)) {
    Object.keys(source).forEach((key) => {
      if (isObject(source[key])) {
        if (!(key in target)) {
          Object.assign(output, { [key]: source[key] });
        } else {
          output[key] = deepMerge(target[key], source[key]);
        }
      } else {
        Object.assign(output, { [key]: source[key] });
      }
    });
  }
  return output;
}

// Now your nested keys survive! 🎉
const merged = deepMerge(target, source);
console.log(merged.api.timeout); // 5000

Option B: Use JoinJSON (Zero Server Uploads)

If you just want a fast visual tool to merge JSON files in 2 seconds without writing boilerplate or risking privacy, I built JoinJSON.

🔒 100% Client-Side Privacy: All processing happens inside your browser's V8 engine. Zero bytes ever leave your machine.
🧠 Smart Deep Merging: Intelligently combines nested properties without wiping out non-conflicting keys.
🧹 Instant Validation: Highlights missing brackets, bad quotes, or trailing commas before they break your code.

🔗 Give your backspace key a break: https://www.joinjson.com/

💬 Over to you:

What is the most chaotic JSON syntax error or merge bug that has ever wasted your time? (Mine is definitely trailing commas inside arrays). Drop your horror stories below! 👇

DEV Community