JSON Diff Viewer

Compare two JSON objects and see differences with color-coded visualization. Deep recursive comparison shows added, removed, and changed values with tree view and detailed diff report.

Examples:

Features

🔍

Deep Comparison

Recursively compares nested objects and arrays at any depth. Detects additions, removals, and changes with precise path tracking using dot notation.

🎨

Color-Coded Diff

Visual diff with green for additions, red for removals, and yellow for changes. Easy-to-scan tree view shows all differences with context.

📊

Detailed Summary

Get counts of total additions, removals, and changes. Copy the complete diff report for documentation or sharing with team members.

⚙️

Smart Options

Ignore key order option for semantic comparison. Format both JSON inputs with one click. Validate JSON syntax before comparing.

Compare JSON Objects Online

JSON diff tools are essential for developers working with APIs, configuration files, and data structures. When you need to understand what changed between two versions of a JSON object, a visual comparison tool saves time and reduces errors. This JSON diff viewer performs deep recursive comparison, identifying every addition, removal, and modification across the entire object tree. The color-coded visualization makes it easy to spot changes at a glance, while the detailed path notation helps you locate exact differences in complex nested structures.

Deep Recursive Comparison

Unlike simple string comparison, this tool understands JSON structure. It recursively traverses both objects, comparing values at every nesting level. For objects, it compares all keys and their values. For arrays, it compares elements by index. The algorithm handles all JSON data types: objects, arrays, strings, numbers, booleans, and null values. When a difference is found, the tool records its exact path using dot notation (e.g., "user.profile.email" or "items[2].price"), making it easy to locate the change in your code or data.

Understanding the Diff Output

The diff viewer categorizes changes into three types. Added items (shown in green) are keys or values present in the second JSON but not in the first. Removed items (shown in red) are keys or values present in the first JSON but not in the second. Changed items (shown in yellow) are keys that exist in both JSONs but have different values. For changed items, the tool displays both the old and new values, making it clear exactly what changed. The summary section provides counts of each type, giving you a quick overview of the scope of changes.

Common Use Cases

Frequently Asked Questions

What is a JSON diff tool?
A JSON diff tool compares two JSON objects and identifies differences between them. It performs deep recursive comparison to find added, removed, and changed values at any nesting level. The results are displayed with color coding: green for additions, red for removals, and yellow for changes. This helps developers quickly spot changes between API responses, configuration files, or data structures.
How does deep comparison work?
Deep comparison recursively traverses both JSON objects, comparing values at every level of nesting. It handles objects, arrays, strings, numbers, booleans, and null values. For objects, it compares all keys and their values. For arrays, it compares elements by index. The algorithm detects three types of changes: additions (keys in the second object but not the first), removals (keys in the first object but not the second), and modifications (keys present in both but with different values).
Can I ignore key order when comparing?
Yes! This tool includes an "Ignore Key Order" option. When enabled, objects are considered equal even if their keys appear in different orders. This is useful when comparing API responses where key order is not semantically significant. Array element order is still considered, as arrays are ordered data structures.
What types of differences are detected?
The tool detects three types of differences: Added (keys or values present in JSON 2 but not in JSON 1, shown in green), Removed (keys or values present in JSON 1 but not in JSON 2, shown in red), and Changed (keys present in both but with different values, shown in yellow). The diff report shows the exact path to each difference using dot notation.
How are nested objects compared?
Nested objects are compared recursively. The tool traverses the entire object tree, comparing values at each level. The path to each difference is displayed using dot notation (e.g., "user.address.city" shows a change in the city property of the address object within the user object). This makes it easy to locate changes in deeply nested structures.
Can I compare arrays?
Yes! Arrays are compared element by element. The tool checks if both JSONs have arrays at the same path, then compares their lengths and contents. For arrays of objects, each object is compared recursively. Array index is preserved in the difference path (e.g., "items[2].name" shows a change in the name property of the third item).
Does this tool validate JSON?
Yes! Before comparing, the tool validates both JSON inputs. If either input contains invalid JSON syntax, an error message is displayed showing the exact problem. This helps you fix syntax errors before performing the comparison. Both inputs must be valid JSON for the diff to proceed.
Can I copy the diff report?
Yes! The tool provides a "Copy Report" button that copies the entire diff summary to your clipboard. The report includes counts of additions, removals, and changes, plus a detailed list of all differences with their paths and values. You can paste this report into documentation, bug reports, or code reviews.

Explore More Developer Tools

Check out our other JSON tools and developer utilities.

JSON Formatter →