JSON Diff

What JSON Diff Solves That Text Diff Can't

You're comparing yesterday's API response with today's to find what changed. Text diff (the kind git diff shows) treats them as character streams: extra whitespace, reordered keys, trailing commas — all show as differences even when the data is structurally identical. {"a":1,"b":2} and {"b":2, "a":1} generate a 4-line text diff while being literally the same object.

JSON Diff parses both sides as JSON first, then compares the resulting objects structurally. Whitespace doesn't matter. Key order doesn't matter. The only differences shown are real data differences: paths added, paths removed, values changed. The output names the path of every change so you can find it in your source.

How the Microapp JSON Diff Works

Paste your original JSON in the Left box and the compared JSON in the Right box. Differences appear as you type — no Compare button. Three types of changes show up: + added (path exists on right but not left), − removed (path exists on left but not right), ~ changed (path exists on both with different values). Each difference shows the JSON path so you can locate it.

Identical inputs show ✓ Identical. Try the Sample buttons to see what the output looks like with realistic before/after data. The diff runs entirely in your browser via the microdiff library — no upload, no logging.

Reading JSON Paths

The path notation tells you where in the JSON tree to find each change:

• name — top-level key called "name"
• config.fast — the "fast" key inside the "config" object
• features[2] — the third element of the "features" array
• users[0].email — the email of the first user in the array
• servers[3].ports[1] — the second port of the fourth server

Same notation lodash, jq, JSONPath, and most config systems use. If you've ever written data['users'][0]['email'] in code, you've used this notation.

What Counts as the Same vs Different

Same: two objects with the same keys and values, regardless of key order. Two arrays with the same elements in the same positions. Two strings, numbers, or booleans with identical values. JSON's structural equality.

Different: any value mismatch at the same path; arrays with different lengths or different elements at any position. Worth knowing: arrays compare position-by-position, so inserting one element at the start "changes" every other element's position. The diff sees each shifted element as a change. There's no built-in "this element moved" detection — JSON has no concept of element identity within an array.

The Array Insertion Problem

This trips up almost everyone who first uses JSON diff. Consider:

Left: ["a", "b", "c"]
Right: ["x", "a", "b", "c"]

Naive expectation: one change (added "x" at the start). Actual diff:

• ~ changed at [0] from "a" to "x"
• ~ changed at [1] from "b" to "a"
• ~ changed at [2] from "c" to "b"
• + added at [3] with value "c"

Four changes for what's intuitively one insertion. This is correct given JSON has no element identity, but it's noisy. Tools that detect "moves" (Levenshtein-style for arrays) exist but produce noisier output for objects, so most JSON diff libraries skip the complexity. If your data has identifying keys (an "id" field per object), you can pre-process to a keyed-object structure where insertion order doesn't matter.

Practical Use Cases

API response comparison. What changed between API v1 and v2? Paste both responses; the diff shows exactly which fields are new, gone, or renamed.

Config file diffs. Comparing config.json across two environments (production vs staging) or two branches. Way more readable than text diff because the structural changes pop without the formatting noise.

Test fixture verification. Your test expects a specific JSON output. Run the test, capture the actual output, paste both into JSON diff. The differences show what your code is producing wrong.

Refactor verification. You refactored a serializer. Did the JSON output change? Compare before-refactor output with after-refactor output; the diff says yes/no with specifics.

Common Pitfalls

Comparing JSON with comments. Strict JSON has no comment syntax; many "JSON" config files actually contain JS-style comments. The parser rejects them. Strip comments first (or convert to JSON5 first).

Numbers vs strings. {"version": "1.0"} vs {"version": 1.0} shows as a change — different types. This is correct (a string and a number are not equal even when they look similar) but easy to miss. JSON's strict typing helps here.

Nested structures with circular references. JSON doesn't support cycles natively, but if you've custom-serialized one with $ref placeholders, the diff treats them as plain strings. Resolve refs before diffing if you want structural comparison.

Comparing very large JSON. Modern JS handles megabytes in milliseconds. The bottleneck is the textarea: pasting 10MB lags the browser. For very large files, run jq or jd from a terminal instead.

Related Tools

For pretty-printing or validating JSON without comparing, use the JSON Formatter. For converting JSON to YAML (often easier to read for config diffs), see JSON to YAML and its inverse YAML to JSON. For text diff on arbitrary text (not JSON-structured), the Text Diff Checker is the right tool. To convert JSON to flat tabular form for spreadsheet comparison, the JSON to CSV converter handles it.