JSON Diff Tool
Compare two JSON objects — see added, removed, and changed keys with color-coded tree view and path display
Paste JSON into both panels above and click Compare to see the diff.
Color coding: green = added, red = removed, yellow = changed
Your API response changed after a deploy — users report broken data but you can’t see what’s different in the 200-line JSON response. You paste both versions into a text diff tool, but it flags every line because the key ordering changed, even though the actual data is identical. You need a structural diff that compares by key path, ignoring order, and shows only the values that actually changed.
Why This Tool (Not the Diff Checker)
PureDevTools has a Diff Checker for comparing any two texts line by line using the Myers algorithm. This tool does structural JSON comparison — it compares by key path, handles reordered keys, and shows added/removed/changed values with their JSON paths. Use the Diff Checker for text; use this tool for JSON.
What Is a JSON Diff Tool?
A JSON diff tool compares two JSON documents and highlights exactly what changed — which keys were added, which were removed, and which values were modified. Unlike a plain text diff, a JSON diff understands the structure: it compares objects by key names (not by line position), digs into nested objects and arrays recursively, and reports precise paths like root.users[0].email so you can locate every change instantly.
This tool performs a deep semantic comparison — two JSON documents with the same data in different key order are treated as equal, because JSON objects are unordered by definition.
How to Use the JSON Diff Tool
- Paste the left (original) JSON into the left input panel
- Paste the right (modified) JSON into the right input panel
- Click Compare — the diff tree appears immediately
- Read the color-coded results:
- Green — key/value was added in the right document
- Red — key/value was removed (present in left, absent in right)
- Yellow — value was changed (key exists in both, values differ)
- Gray — unchanged (toggle visibility with “Show unchanged”)
- Click Copy Diff Report to copy a plain-text summary to the clipboard
Understanding the Path Display
Each difference shows its full path from the root:
| Path | Meaning |
|---|---|
root.name | The name key at the top level |
root.address.city | The city key inside the address object |
root.users[0].email | The email field of the first element in the users array |
root.tags[2] | The third element of the tags array |
Paths make it easy to locate differences in deeply nested documents — you can immediately see which array index or which nested field changed without scanning the entire document visually.
Types of Differences Detected
Added Keys
A key that exists in the right JSON but not in the left. Shown in green with a + indicator.
Example: Left has {}, right has {"role": "admin"} → root.role is added.
Removed Keys
A key that exists in the left JSON but not in the right. Shown in red with a - indicator.
Example: Left has {"legacy": true}, right has {} → root.legacy is removed.
Changed Values
A key that exists in both documents but with different values. Shown in yellow with a ~ indicator. Both the old and new value are displayed.
Example: Left has {"version": "1.0"}, right has {"version": "2.0"} → root.version is changed from "1.0" to "2.0".
Type-Changed Values
A special case of “changed” where the type itself changed — for example, from a string to an object, from a number to an array, or from null to an object. The old and new types are both shown.
Deep Comparison of Nested Structures
The comparison is fully recursive:
Objects: All keys from both documents are merged and compared. The key order does not matter — {"a":1,"b":2} and {"b":2,"a":1} are identical.
Arrays: Elements are compared by index position. If the left array has 3 elements and the right has 5, elements at indices 3 and 4 are reported as added.
Primitive values: Numbers, strings, booleans, and null are compared by value. 1 and "1" are different (type change). null and false are different.
Mixed types: If a key holds an object in one document and an array in another, this is reported as a type change with both values shown.
Common Use Cases
API response versioning: Compare the JSON response from two API versions to see exactly which fields were added or deprecated.
Configuration drift detection: Compare two versions of a JSON configuration file — appsettings.json, package.json, tsconfig.json — to audit what changed between deployments.
Database record comparison: Compare two snapshots of the same database record to understand what was modified in an update.
Unit test assertion debugging: When an assertion fails, paste the expected and actual JSON side-by-side to pinpoint the exact fields that don’t match.
Code review support: Before approving a PR that modifies JSON files, use the diff view to understand the semantic change rather than reading a raw text diff.
Mock data synchronization: When maintaining frontend mock data alongside a backend schema, verify that both stay in sync by comparing mock data against a real API response.
Copying the Diff Report
The Copy Diff Report button copies a structured plain-text summary to your clipboard. The format is:
JSON Diff Report
================
Added: 2
Removed: 1
Changed: 3
Unchanged: 12
Changes:
--------
[+] root.users[1].role: "admin"
[+] root.config.darkMode: true
[-] root.legacy_field: "deprecated"
[~] root.version: "1.0" → "2.0"
[~] root.users[0].email: "old@example.com" → "new@example.com"
[~] root.settings.timeout: 30 → 60The [+] prefix marks additions, [-] marks removals, and [~] marks changes. This format is easy to paste into a PR description, Jira ticket, or changelog.
Privacy and Security
All JSON comparison happens entirely in your browser using JavaScript. No data is sent to any server. Your JSON — which may contain sensitive configuration values, user records, or API keys — never leaves your device.
Frequently Asked Questions
Does key order matter for the comparison?
No. JSON objects are unordered, and this tool respects that. {"a":1,"b":2} and {"b":2,"a":1} are treated as identical. Only array element order matters (arrays are ordered by definition).
What happens if I compare a JSON object with a JSON array?
The root is treated as a type change — the comparison reports root as type-changed from object to array (or vice versa) and shows both values. You can still see all the data.
Can I compare deeply nested JSON with many levels? Yes. The comparison is fully recursive with no artificial depth limit. For very large or deeply nested documents the tree view may be long, but the comparison is always complete.
What does “unchanged” mean in the stats? The unchanged count includes every primitive value and every container node (object or array) where all descendants are also unchanged. Use the “Show unchanged” toggle to hide these from the tree view and focus on differences.
Why is my array diff showing many changed items when only the order changed?
JSON arrays are ordered sequences, so [1, 2, 3] and [3, 1, 2] are genuinely different arrays. This tool compares by index position, not by content identity. If you need to compare arrays as sets (ignoring order), sort them first using the JSON Formatter’s Sort Keys feature, then compare.
What is a “type change”? A type change occurs when a key exists in both documents but the values have different structural types — for example, one side is an object and the other is an array, or one is a string and the other is a number. Both values are shown so you can decide which is correct.