JSON Diff Tool

How to Use JSON Diff Tool

The JSON Diff Tool helps you compare two JSON objects side-by-side and identify all differences between them. Perfect for debugging API changes, comparing configurations, or validating data transformations.

Quick Start Guide

1. Input JSON Objects: Paste or type your first JSON object in the "JSON 1" field and your second JSON object in the "JSON 2" field
2. View Differences: The tool automatically compares the objects and displays:
   • Added fields (green): Present in JSON 2 but not in JSON 1
   • Removed fields (red): Present in JSON 1 but not in JSON 2
   • Modified fields (orange): Present in both but with different values
   • Unchanged fields: Fields with identical values (not shown in diff view)
3. Use Actions: Swap inputs, copy diff results, or clear all fields as needed

Understanding JSON Comparison

What is JSON Diff?

JSON diff compares two JSON objects and identifies all differences between them. It performs deep comparison of nested structures and highlights additions, removals, and modifications.

Comparison Example:

JSON 1:

{
  "user": {
    "name": "John",
    "age": 30,
    "active": true
  }
}

JSON 2:

{
  "user": {
    "name": "John",
    "age": 31,
    "email": "john@example.com"
  }
}

Differences:

• Modified: user.age (30 → 31)
• Added: user.email
• Removed: user.active

Why Compare JSON?

• Debug API changes
• Validate data transformations
• Track configuration changes
• Verify migrations
• Document schema evolution

Common Use Cases

1. API Version Comparison

Scenario: Compare responses from v1 and v2 API.

JSON 1 (v1 response):

{
  "id": 123,
  "username": "alice",
  "created": "2024-01-15"
}

JSON 2 (v2 response):

{
  "id": 123,
  "username": "alice",
  "email": "alice@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}

Differences:

• Added: email
• Added: created_at
• Removed: created

Benefit: Quickly identify breaking changes between API versions.

2. Configuration Validation

Scenario: Compare development and production configs.

JSON 1 (development):

{
  "database": {
    "host": "localhost",
    "debug": true
  }
}

JSON 2 (production):

{
  "database": {
    "host": "prod.example.com",
    "debug": false
  }
}

Differences:

• Modified: database.host
• Modified: database.debug

Benefit: Ensure correct settings for each environment.

3. Data Migration Verification

Scenario: Verify data transformation after migration.

JSON 1 (before migration):

{
  "product": {
    "price": "99.99",
    "stock": "50"
  }
}

JSON 2 (after migration):

{
  "product": {
    "price": 99.99,
    "stock": 50
  }
}

Differences:

• Modified: product.price (string → number)
• Modified: product.stock (string → number)

Benefit: Confirm type conversions and data integrity.

4. Schema Evolution Tracking

Scenario: Track changes in data schema over time.

JSON 1 (old schema):

{
  "user": {
    "name": "Bob",
    "role": "admin"
  }
}

JSON 2 (new schema):

{
  "user": {
    "firstName": "Bob",
    "lastName": "Smith",
    "roles": ["admin", "editor"]
  }
}

Differences:

• Added: user.firstName, user.lastName, user.roles
• Removed: user.name, user.role

Benefit: Document schema changes for team awareness.

5. Testing API Responses

Scenario: Validate API response matches expected structure.

JSON 1 (expected):

{
  "status": "success",
  "data": {
    "count": 10
  }
}

JSON 2 (actual):

{
  "status": "success",
  "data": {
    "count": 10,
    "total": 100
  }
}

Differences:

• Added: data.total

Benefit: Identify unexpected fields in API responses.

6. Debugging State Changes

Scenario: Compare application state before and after action.

JSON 1 (before):

{
  "cart": {
    "items": [],
    "total": 0
  }
}

JSON 2 (after):

{
  "cart": {
    "items": [{"id": 1, "qty": 2}],
    "total": 39.98
  }
}

Differences:

• Modified: cart.items (empty → has items)
• Modified: cart.total (0 → 39.98)

Benefit: Track exactly what changed during user interaction.

Features

Deep Comparison

• Compares nested objects at all levels
• Shows full path to each difference
• Handles complex data structures
• Preserves context

Color-Coded Results

• Green: Added fields
• Red: Removed fields
• Orange: Modified fields
• Gray: Unchanged fields

Statistics Dashboard

• Added count
• Removed count
• Modified count
• Unchanged count

Actions

• Swap: Reverse comparison direction
• Copy Diff: Export differences as text
• Clear: Reset all inputs

Examples

• Simple Change: Basic value modifications
• Added Fields: New properties
• Removed Fields: Deleted properties
• Nested Changes: Deep object differences

Technical Details

Comparison Algorithm:

Recursively traverses both objects and compares:

function compareObjects(obj1, obj2, path = ') {
  const keys1 = new Set(Object.keys(obj1 || {}))
  const keys2 = new Set(Object.keys(obj2 || {}))
  const allKeys = new Set([...keys1, ...keys2])

  allKeys.forEach(key => {
    const currentPath = path ? `${path}.${key}` : key
    const val1 = obj1?.[key]
    const val2 = obj2?.[key]

    if (!keys1.has(key)) {
      // Added in obj2
    } else if (!keys2.has(key)) {
      // Removed from obj1
    } else if (isObject(val1) && isObject(val2)) {
      // Recurse for nested objects
      compareObjects(val1, val2, currentPath)
    } else if (val1 !== val2) {
      // Modified value
    }
  })
}

Path Notation:

Differences use dot notation for nested paths:

• user.name → Top-level user object, name property
• settings.theme.color → Three levels deep
• items.0.price → Array element at index 0

Type Handling:

All JSON types are supported:

• Objects: Deep comparison
• Arrays: Value comparison
• Strings: Direct comparison
• Numbers: Direct comparison
• Booleans: Direct comparison
• Null: Direct comparison

Array Comparison:

Arrays are compared as complete values:

• [1, 2, 3] vs [1, 2, 3] → Unchanged
• [1, 2, 3] vs [1, 2, 4] → Modified
• Both old and new values shown for modified arrays

Best Practices

Choosing Comparison Direction:

Left to Right (JSON 1 → JSON 2):

• Compare old version to new version
• Show what's been added/removed
• Track forward changes

Right to Left (JSON 2 → JSON 1):

• Compare new version to old version
• Show what needs to be added back
• Track backward changes

Use the Swap button to quickly reverse direction.

Interpreting Results:

Added Fields (Green):

• New features in JSON 2
• Additional data
• Schema expansion

Removed Fields (Red):

• Deprecated features
• Data cleanup
• Schema reduction

Modified Fields (Orange):

• Updated values
• Type changes
• Data transformations

Unchanged Fields (Gray):

• Stable properties
• Consistent data
• No action needed

Performance Considerations:

Fast Comparison:

• Objects up to 10,000 keys
• Handles deep nesting (100+ levels)
• Minimal memory overhead
• Real-time updates

Large Objects:

• May take 1-2 seconds for very large JSON
• Consider breaking into smaller chunks
• Focus on specific subtrees if possible

Troubleshooting

Issue: "Invalid JSON" error

Solution: Ensure both inputs are valid JSON. Common mistakes:

• Missing quotes around property names
• Trailing commas
• Single quotes instead of double quotes
• Unescaped special characters

Issue: Too many differences shown

Solution: You may be comparing completely different objects. Verify:

• Both JSONs represent similar data
• Structure is roughly the same
• You haven't swapped unrelated objects

Issue: Arrays showing as modified when they look the same

Solution: Arrays are compared by value. Check:

• Element order (must be identical)
• Data types (["1"] vs [1])
• Hidden whitespace or special characters

Issue: Nested objects not expanding

Solution: The tool shows full paths. Look for:

• Dot notation in paths (user.profile.name)
• All nested differences listed separately
• Each level shown as individual item

Issue: Performance is slow

Solution: Large objects may take time. Try:

• Breaking JSON into smaller chunks
• Comparing specific sections
• Using browser with better JavaScript performance

Browser Compatibility

This tool works in all modern browsers:

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Opera (latest)

Required Features:

• JavaScript enabled
• Clipboard API (for copy functionality)

Privacy & Security

Client-Side Processing:

All comparisons happen entirely in your browser. Your JSON data:

• Never leaves your device
• Is not sent to any server
• Is not logged or stored
• Disappears when you close/refresh the page

Safe for Sensitive Data:

You can safely compare:

• API responses with tokens
• Configuration files with credentials
• User data with PII
• Proprietary data structures
• Internal schemas

Advanced Use Cases

1. Automated Testing

Compare expected vs actual API responses:

// Expected
{"status": "success", "count": 10}

// Actual
{"status": "success", "count": 10, "cached": true}

// Diff shows unexpected "cached" field

2. Database Schema Changes

Track database document changes:

// Before
{"_id": "123", "name": "Product"}

// After
{"_id": "123", "name": "Product", "tags": []}

// New "tags" field added

3. Feature Flag Validation

Compare feature flag configurations:

// Staging
{"featureX": true, "featureY": false}

// Production
{"featureX": false, "featureY": false}

// featureX differs between environments

4. Contract Testing

Verify API contract compliance:

// Contract
{"id": "number", "name": "string"}

// Response
{"id": 123, "name": "Test", "extra": "field"}

// Unexpected "extra" field

5. Data Synchronization

Compare source and target after sync:

// Source
{"updated": "2024-01-15", "version": 2}

// Target
{"updated": "2024-01-14", "version": 1}

// Sync incomplete - versions differ

6. Monitoring Changes

Track changes in external APIs:

// Last week
{"endpoints": ["/api/v1/users"]}

// This week
{"endpoints": ["/api/v1/users", "/api/v2/users"]}

// New v2 endpoint added

Real-World Examples

E-commerce Order:

Before Processing:

{
  "order": {
    "id": 1001,
    "status": "pending",
    "items": 3,
    "total": 150.00
  }
}

After Processing:

{
  "order": {
    "id": 1001,
    "status": "shipped",
    "items": 3,
    "total": 150.00,
    "tracking": "ABC123"
  }
}

Differences:

• Modified: order.status (pending → shipped)
• Added: order.tracking

User Profile Update:

Original:

{
  "user": {
    "email": "old@example.com",
    "verified": false,
    "preferences": {
      "theme": "light"
    }
  }
}

Updated:

{
  "user": {
    "email": "new@example.com",
    "verified": true,
    "preferences": {
      "theme": "dark",
      "language": "en"
    }
  }
}

Differences:

• Modified: user.email
• Modified: user.verified
• Modified: user.preferences.theme
• Added: user.preferences.language

Tips & Tricks

1. Use Examples: Click example buttons to see comparison patterns
2. Swap to Compare: Use Swap to reverse comparison direction
3. Copy Results: Export diff for documentation or reports
4. Validate JSON: Tool checks JSON syntax automatically
5. Check Statistics: Review counts before diving into details
6. Focus on Color: Green/red/orange quickly show change types
7. Path Navigation: Use dot notation to locate nested changes
8. Test Migrations: Compare before/after for data transformations
9. Track Versions: Compare API responses across versions
10. Document Changes: Copy diff for change logs or documentation

Common Patterns

API Response Pattern:

Modified: data.version (1 → 2)
Added: data.newFeature
Removed: data.deprecatedField

Configuration Pattern:

Modified: database.host (localhost → production.db)
Modified: debug (true → false)
Added: cache.ttl

Schema Evolution Pattern:

Added: user.email
Added: user.role
Removed: user.legacy_field
Modified: user.id (string → number)