JSON Diff

Compare two JSON documents and see precisely what changed — every added, removed and modified field, addressed by its dot path and color-coded. The diff runs entirely in your browser with JSON.parse and a recursive structural walk; nothing is uploaded.

How it works

The tool parses both inputs, then recursively compares the two values:

• Objects are compared key by key. A key in both with differing values is a change; a key only in the right document is an addition; a key only in the left is a removal.
• Arrays are compared by index — element 0 against element 0. Extra elements in the longer array are additions or removals.
• Primitives (string, number, boolean, null) are compared with strict equality. A type change, such as "42" versus 42, is reported as a change.

Each leaf difference is recorded with its full dot path, for example:

+ user.roles[2]        = "admin"        (added)
- user.legacyId                          (removed)
~ server.port          42 → 8080        (changed)

Because objects are unordered, reformatting or reordering keys produces no differences — only real value changes show up. Array order, however, is significant.

Tips

• To compare two API responses, paste each whole body; the dot paths make it easy to locate a changed field deep in a nested structure.
• If you see a long list of array changes after only a small edit, an element was likely inserted near the front, shifting every later index — positional diffing reports each shifted slot.
• Pretty-print or minify makes no difference to the result; whitespace is irrelevant once parsed.

Practical uses

Debugging API drift: services that evolve over time sometimes change a response field without updating documentation. Paste two real API responses side by side and the diff surfaces the discrepancy immediately — for example, a field renamed from user_id to userId, or a string field that started returning an integer.

Reviewing configuration changes: comparing two versions of a package.json, tsconfig, or cloud-provider config is a natural use case. The tool reports only real differences, so reformatting or pretty-printing the file first does not create noise.

Validating round-trips: if you serialize an object, send it over a network, and deserialize it, a diff of the original and recovered objects confirms lossless transmission. Any discrepancy in number precision, key casing, or missing fields shows up as a change.

Worked example

Left document (original):

{
  "user": { "id": 42, "role": "viewer" },
  "active": true
}

Right document (updated):

{
  "user": { "id": 42, "role": "admin" },
  "active": true,
  "plan": "pro"
}

The diff reports:

~ user.role    "viewer" → "admin"    (changed)
+ plan         "pro"                 (added)

active and user.id are unchanged and do not appear. The dot-path addresses make it clear that role changed inside the nested user object.

Limitations to be aware of

• Array order matters. Inserting an element at index 0 shifts every later element, producing a long list of changes even though only one item was added. If your arrays are unordered sets, sort them first and then diff.
• No semantic diffing of long strings. A changed string value is reported as “old → new” wholesale; the tool does not produce a character-level diff inside the string. For prose or code, use a text diff tool.
• No JSON5 or comments. Both inputs must be valid JSON. Strip comments before pasting.