Stop Using Text Diff for JSON: A Better Way to Compare Objects

Source: Dev.to

The Problem: Text vs. Semantics

Standard diff algorithms (like the Myers difference algorithm) work linearly. They compare sequences of characters or lines. They don’t understand structure.

Scenario A (Minification)

If you compare a minified JSON string against a “pretty‑printed” version, every single line will register as a change, even if the data is exactly the same.

Scenario B (Key Ordering)

In JSON, the order of keys in an object is unordered. However, JSON.stringify() creates a string where order matters. If your backend language (like Python or Go) serializes maps with a randomized hash seed, your JSON keys might come out in a different order every time.

The Solution: Semantic Comparison

To solve this, we can’t just compare the strings. We have to compare the objects.

Our tool at Diff Guru performs three steps before the comparison even begins:

• Validation – We parse the input string to ensure it’s valid JSON. If you missed a comma, we tell you exactly where.
• Canonicalization (Deep Sort) – This is the secret sauce. We recursively traverse the object and sort every key alphabetically.
• Formatting – We pretty‑print the sorted object with consistent 4‑space indentation.

Only after these steps do we run the diff algorithm.

The Logic (How it works)

Here is a simplified version of the TypeScript logic we use to ensure that { "b": 2, "a": 1 } becomes { "a": 1, "b": 2 } before comparison:

const sortDeep = (o: any): any => {
    // If it's not an object (or is null), return it as is
    if (o === null || typeof o !== 'object') {
        return o;
    }

    // If it's an array, map over the items recursively 
    // (Note: We usually don't sort arrays, as array order often matters!)
    if (Array.isArray(o)) {
        return o.map(sortDeep);
    }

    // It's an object: get keys, sort them, and rebuild the object
    return Object.keys(o).sort().reduce((acc: any, key) => {
        acc[key] = sortDeep(o[key]);
        return acc;
    }, {});
};

By preprocessing the data with this function, we filter out the “noise” caused by formatting and ordering, leaving you with only the actual data changes.

Privacy First (Client‑Side Only)

When building this, I knew that developers often paste sensitive data—API keys, user records, AWS configs—into diff tools.

Most online tools send your data to their backend to process the diff. Diff Guru does not.

We use a 100 % client‑side architecture. The sorting, formatting, and diffing logic (using diff‑match‑patch) runs entirely in your browser’s JavaScript engine. You can literally load the page, turn off your Wi‑Fi, and the tool will still work perfectly. Your data never leaves your machine.

Try It Out

If you are tired of manually hunting for missing commas or trying to spot why two massive JSON blobs are technically different, give it a shot.

👉 Try the JSON Diff & Validator Tool

It’s free, no signup required, and respects your data privacy. Let me know what you think in the comments!