Compare JavaScript JSON Online
Paste two JavaScript JSON objects or arrays. See what was added, removed, or changed — key by key.
🔒 100% private — runs entirely in your browseror try sample data
Paste two JavaScript JSON objects or arrays. See what was added, removed, or changed — key by key.
🔒 100% private — runs entirely in your browseror try sample data
JavaScript JSON Diff compares two JSON objects — the native data format of JavaScript — and shows you exactly which keys were added, removed, or modified. JSON is built into JavaScript via JSON.parse() and JSON.stringify(), but the language provides no built-in way to diff two objects structurally.
Comparing objects with === only checks reference equality, and JSON.stringify() comparison is unreliable because key order isn't guaranteed. Libraries like lodash.isEqual handle deep equality but still return only true/false. This tool shows you the full picture — every changed, added, and removed key with color-coded highlighting.
Paste your JSON (e.g., package.json configs, API responses, state snapshots). The tool handles nested objects, arrays, nulls, and mixed types. Everything runs client-side — your data never leaves your machine.
const obj1 = { name: "Alice", age: 30 };
const obj2 = { age: 30, name: "Alice" }; // WRONG — key order may differ
console.log(JSON.stringify(obj1) === JSON.stringify(obj2));
// Might be false even though objects are equal! // Sorted keys workaround
const sorted = (o) => JSON.stringify(o, Object.keys(o).sort());
console.log(sorted(obj1) === sorted(obj2)); // trueString comparison is fragile. It fails with different key ordering and drops undefined values silently.
function diffObjects(obj1, obj2, path = '') { const keys = new Set([...Object.keys(obj1 || {}), ...Object.keys(obj2 || {})]); const diffs = []; for (const key of keys) { const p = path ? `${path}.${key}` : key; if (!(key in obj1)) { diffs.push({ type: 'added', path: p, value: obj2[key] }); } else if (!(key in obj2)) { diffs.push({ type: 'removed', path: p, value: obj1[key] }); } else if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object') { diffs.push(...diffObjects(obj1[key], obj2[key], p)); } else if (obj1[key] !== obj2[key]) { diffs.push({ type: 'modified', path: p, old: obj1[key], new: obj2[key] }); } } return diffs;
} console.log(diffObjects({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 }, d: 4 }));
// [{ type: 'modified', path: 'b.c', ... }, { type: 'added', path: 'd', ... }]Works for objects but doesn't handle arrays, null checks, or type mismatches. Use this tool for comprehensive diffs.
// Deep clone to avoid mutation, then iterate
const a = structuredClone(originalConfig);
const b = structuredClone(updatedConfig); const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
for (const key of allKeys) { if (JSON.stringify(a[key]) !== JSON.stringify(b[key])) { console.log(`Changed: ${key}`); console.log(` Before: ${JSON.stringify(a[key])}`); console.log(` After: ${JSON.stringify(b[key])}`); }
}structuredClone() ensures you don't mutate the originals. This approach is quick but only diffs top-level keys.
The JavaScript spec does not guarantee object key order (though V8 preserves insertion order for string keys). JSON.stringify() may produce different strings for semantically equal objects. Always compare parsed objects, not JSON strings.
JSON.stringify({ a: undefined }) produces {} — the key is silently removed. This means round-tripping through JSON loses undefined values entirely. If your object has undefined properties, they won't appear in the diff.
JSON.stringify({ a: NaN, b: Infinity }) produces {"a":null,"b":null}. JSON has no representation for NaN or Infinity, so they're silently converted to null. This can mask real differences when comparing numeric data.
Paste your JSON objects into the two panels and click Compare. The tool highlights added, removed, and modified keys with color-coded diffs.
Yes. The tool performs deep comparison of nested objects, arrays, and mixed structures at any depth. Nested changes are shown with path-based highlighting.
JSON.stringify() produces different strings when keys are in different order. It also drops undefined values and converts NaN/Infinity to null, making string comparison unreliable for deep equality.
Yes. This tool runs entirely in your browser using client-side JavaScript. Your data is never sent to any server, making it safe for comparing sensitive config data or API responses.
Yes. Paste the contents of two package.json files and the tool will show exactly which dependencies, scripts, or settings changed between versions.
Yes. Arrays are compared element by element at each index position. Added, removed, or modified elements within arrays are highlighted individually.