OhMyApps
Back to Blog
Tools Developer JSON Diff Tutorial

JSON Diff: Compare JSON Objects and Find Changes

4 min read By OhMyApps

When debugging APIs, reviewing configuration changes, or comparing data versions, you need to see exactly what changed between two JSON documents. A visual diff makes it easy to spot additions, removals, and modifications at a glance.

Why Diff JSON?

Text-based diff tools treat JSON as plain text, which creates noisy output. A key that moved to a different position in the file shows as a deletion and addition, even though the data is identical. JSON-aware diffing compares the actual data structure, not the text representation.

Common Scenarios

  • API debugging: Compare expected vs actual response payloads
  • Configuration management: See what changed between config versions
  • Database records: Compare two versions of the same record
  • Deployment verification: Confirm infrastructure-as-code changes
  • Code review: Understand data structure modifications in PRs

How JSON Diff Works

Our tool performs a deep comparison of two JSON objects:

Added Fields

Fields that exist in the second JSON but not the first are marked as added (green):

Left:  { "name": "Alice" }
Right: { "name": "Alice", "email": "alice@example.com" }

Result: + email: "alice@example.com"

Removed Fields

Fields that exist in the first JSON but not the second are marked as removed (red):

Left:  { "name": "Alice", "age": 30 }
Right: { "name": "Alice" }

Result: - age: 30

Changed Values

Fields that exist in both but have different values are marked as changed (yellow):

Left:  { "status": "active", "count": 5 }
Right: { "status": "inactive", "count": 10 }

Result: ~ status: "active" → "inactive"
        ~ count: 5 → 10

Unchanged Fields

Fields with identical values in both documents are shown without any marker, providing context for the changes.

Reading the Diff Output

The diff output uses a simple prefix system:

PrefixMeaningColor
+Added (exists only in right)Green
-Removed (exists only in left)Red
~Changed (different values)Yellow
(none)UnchangedDefault

How to Use Our JSON Diff Tool

  1. Paste your first JSON document in the left panel
  2. Paste your second JSON document in the right panel
  3. Click Compare to see the differences
  4. Review the color-coded results showing additions, removals, and changes

Tips

  • Both inputs must be valid JSON — the tool will show a parse error if either is invalid
  • The comparison is key-based, not position-based — reordering keys doesn’t create false diffs
  • Nested objects are compared recursively, so changes at any depth are detected
  • Array comparisons are index-based — items at the same position are compared

Practical Examples

API Response Debugging

You expect this response:

{ "status": "success", "data": { "id": 1, "role": "admin" } }

But you’re getting:

{ "status": "success", "data": { "id": 1, "role": "user" } }

The diff instantly highlights: ~ role: "admin" → "user" — showing the permission issue.

Configuration Changes

Before deployment:

{ "maxRetries": 3, "timeout": 5000, "debug": true }

After deployment:

{ "maxRetries": 5, "timeout": 10000, "debug": false, "cache": true }

The diff shows:

  • ~ maxRetries: 3 → 5
  • ~ timeout: 5000 → 10000
  • ~ debug: true → false
  • + cache: true

Frequently Asked Questions

Does key order matter? No. JSON objects are unordered by specification. Our diff compares by key name, not position.

How are arrays compared? Arrays are compared by index. The item at position 0 in the left is compared with position 0 in the right, and so on. If one array is longer, extra items show as added or removed.

Can I compare deeply nested objects? Yes. The diff is recursive — it traverses all levels of nesting and reports changes at every depth.

What about large JSON files? The tool works in your browser, so performance depends on your device. It handles typical API responses and configuration files well.


Try our free JSON Diff tool to compare JSON objects and spot changes instantly.

Try Ghost Image Hub

The Chrome extension that makes managing your Ghost blog images a breeze.

Learn More