What Is a JSON Diff Tool?
A JSON diff tool compares two JSON documents at the structural level and reports exactly which keys were added, removed or had their values changed. Unlike a plain text diff — which compares files line by line — a JSON diff understands the document structure: it knows that {"b":2,"a":1} and {"a":1,"b":2} are semantically identical, and it can pinpoint a change deep inside a nested object using a dot-notation path such as user.address.city.
This tool runs entirely in your browser. No JSON data is ever transmitted to a server. The comparison algorithm is a recursive structural diff implemented in pure JavaScript, so it works even without an internet connection once the page is loaded.
How to Compare Two JSON Documents
- Paste the original JSON into the left panel. Click Format to auto-indent it if needed — the tool validates JSON as you type and shows a parse error immediately if the syntax is invalid.
- Paste the modified JSON into the right panel and format it too.
- Click Compare. The diff result appears below with a stats bar and a color-coded list of all differences.
- Toggle Show unchanged to include keys that are identical in both documents, useful when you want a full picture of the structure.
Reading the Output
Each row in the result shows one difference with three pieces of information:
- + (green) — a key that exists in the modified document but not in the original. The value shown is the new value.
- − (red) — a key that existed in the original but was removed from the modified document. The value shown is what was deleted.
- ~ (amber) — a key that exists in both documents but whose value changed. Both the old and new value are shown side by side.
The path column uses dot notation for nested object keys (user.name) and bracket notation for array indices (items[2].price), making it easy to locate any change in a deeply nested document.
JSON Diff vs Text Diff
A plain text diff treats JSON as a sequence of characters and compares line by line. This works but produces false positives whenever key order changes, whitespace differs, or a compact JSON is reformatted to a pretty-printed version. A JSON diff parses both documents into in-memory objects first, eliminating all formatting noise, and then compares structure — so it detects only genuine semantic differences.
Use a text diff when you want to compare any arbitrary text or when the exact formatting matters. Use a JSON diff when you only care about the data — the content of the keys and their values.
Common Use Cases
- API response comparison — compare what staging returns versus production to catch unexpected field changes before a release.
- Configuration auditing — compare a
package.json,tsconfig.json, or Kubernetes manifest between two environments or git branches. - Data migration validation — after migrating records, diff a sample before and after to confirm no fields were dropped or corrupted.
- Feature flag review — compare the full flag configuration payload between two deployments.
- Test fixture updates — when a test snapshot changes, a JSON diff immediately highlights which fields actually changed versus which were just reformatted.
Examples
User Object Change
Original has age: 30, modified has age: 31 and a new role field added.
Array Item Removed
An element at index 1 was removed from a tags array, shifting all subsequent indices.
Nested Config Drift
A deeply nested database host changed between staging and production configs.
Frequently Asked Questions
No. The entire comparison runs in your browser using JavaScript. Your JSON documents are never transmitted to any server. You can disconnect from the internet after the page loads and the tool will continue to work normally.
The path column shows the location of each changed key inside the JSON structure. A dot (.) separates nested object keys — user.address.city means the city key inside address inside user. Square brackets with a number (items[2]) denote an array element at that index.
Arrays are compared element by element by position (index). If the original has 3 elements and the modified has 2, the third element is reported as removed. If you insert an element at the beginning of an array, every subsequent element will appear as changed because all indices shift. For key-based matching of array elements (e.g., by an id field), use a dedicated tool or pre-process your data.
No, object key order is always ignored. {"a":1,"b":2} and {"b":2,"a":1} are treated as identical. This matches the JSON specification, which states that object key order is not significant. Array element order, however, always matters.
The tool handles any valid JSON at the root: objects, arrays, strings, numbers, booleans or null. If both documents are root-level arrays, elements are compared by index. If both are root-level primitives and they differ, a single "changed" entry is shown at path (root).
A text diff compares files line by line, so reformatting JSON (changing indentation, reordering keys) produces hundreds of false positives. A JSON diff parses both documents first and compares the in-memory structure, so it only reports genuine semantic differences regardless of formatting. Use JSON diff when the data matters; use text diff when the exact formatting also matters.
The tool runs in your browser and is limited only by your device's available memory. In practice, JSON documents up to a few megabytes compare in well under a second. For very large payloads (tens of megabytes), consider using a command-line tool such as jq with diff, or a dedicated JSON processing library.
Copy the response body from your API client (Postman, Insomnia, browser DevTools, or a cURL command) for each environment. Paste the first into the Original panel, the second into the Modified panel, click Format on each to validate, then click Compare. The diff immediately shows which fields differ between environments.