Basic Usage

This guide covers the fundamental operations of the JSON Diff Tool, helping you get started with comparing JSON objects effectively.

Interface Overview

The JSON Diff Tool interface consists of several key sections:

Input Areas

• JSON A: First JSON object for comparison
• JSON B: Second JSON object for comparison
• Validation Status: Real-time validation indicators for each input

Toolbar

• Format: Beautify and format JSON input
• Clear: Clear both input areas
• Swap: Exchange the contents of JSON A and JSON B
• Copy Diff: Copy the difference results to clipboard
• Save to History: Save current comparison to history

Results Section

• Tree View: Visual representation of differences
• Statistics: Summary of changes (unchanged, modified, added, removed)

Step-by-Step Usage

1. Enter JSON Data

Method 1: Direct Input

1. Click in the "JSON A" text area
2. Type or paste your first JSON object
3. Click in the "JSON B" text area
4. Type or paste your second JSON object

Method 2: Load Examples

1. Scroll to the "Examples" section
2. Click on any example card
3. The tool will automatically load sample data

2. Validate JSON

The tool automatically validates JSON as you type:

• Valid JSON: Green badge with "Valid" status
• Invalid JSON: Red badge with "Invalid" status
• Error Indicators: Red border and alert icon for invalid JSON

Common JSON Validation Issues

• Missing Quotes: Property names must be in double quotes
• Trailing Commas: Remove commas after the last item
• Unclosed Brackets: Ensure all { and [ are properly closed
• Invalid Characters: Check for special characters in strings

3. View Differences

Once both JSON objects are valid, the tool automatically displays:

Tree View

• Green: Unchanged values
• Yellow: Modified values
• Blue: Added values
• Red: Removed values

Statistics Panel

• Unchanged: Number of unchanged properties
• Modified: Number of modified properties
• Added: Number of new properties
• Removed: Number of deleted properties

4. Interpret Results

Understanding the Tree View

root
├── unchanged_property: "same value"     (green)
├── modified_property: "old" → "new"     (yellow)
├── new_property: "added value"          (blue)
└── deleted_property: "removed value"    (red)

Reading Statistics

• High Unchanged Count: Minimal changes between objects
• High Modified Count: Many existing values were updated
• High Added Count: Many new properties were introduced
• High Removed Count: Many properties were deleted

Common Operations

Formatting JSON

1. Click the "Format" button in the toolbar
2. Both JSON inputs will be beautified with proper indentation
3. Invalid JSON will remain unchanged

Clearing Data

1. Click the "Clear" button in the toolbar
2. Both input areas will be emptied
3. All results will be cleared

Swapping Inputs

1. Click the "Swap" button in the toolbar
2. The contents of JSON A and JSON B will be exchanged
3. Differences will be recalculated automatically

Copying Results

1. Ensure both JSON objects are valid
2. Click the "Copy Diff" button
3. The difference results will be copied to your clipboard
4. Paste the results wherever needed

Input Tips

Valid JSON Examples

Simple Object

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Nested Object

{
  "user": {
    "id": 1,
    "profile": {
      "name": "John",
      "email": "john@example.com"
    }
  }
}

Array of Objects

[
  { "id": 1, "name": "Item 1" },
  { "id": 2, "name": "Item 2" }
]

Common Input Mistakes

❌ Invalid JSON

{
  "name": "John", // Missing quotes
  "age": 30, // Missing quotes
  "city": "New York" // Trailing comma
}

✅ Valid JSON

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

Keyboard Shortcuts

Navigation

• Tab: Move between input areas
• Shift + Tab: Move backwards between areas
• Ctrl/Cmd + A: Select all text in current area

Operations

• Ctrl/Cmd + C: Copy selected text
• Ctrl/Cmd + V: Paste text
• Ctrl/Cmd + Z: Undo (in input areas)
• Ctrl/Cmd + Y: Redo (in input areas)

Troubleshooting

No Differences Shown

Possible Causes:

• One or both JSON inputs are invalid
• JSON objects are identical
• Input areas are empty

Solutions:

• Check validation status badges
• Ensure both inputs contain valid JSON
• Verify the objects are actually different

Invalid JSON Error

Common Issues:

• Missing quotes around property names
• Trailing commas
• Unclosed brackets or braces
• Invalid escape sequences

Solutions:

• Use the "Format" button to auto-fix common issues
• Check for syntax errors manually
• Use a JSON validator tool

Performance Issues

For Large JSON Objects:

• Break down very large objects into smaller parts
• Use the browser's developer tools to monitor performance
• Clear browser cache if needed

Best Practices

Input Preparation

1. Validate First: Ensure your JSON is valid before comparison
2. Use Examples: Start with provided examples to understand the tool
3. Format Consistently: Use the format button for consistent indentation
4. Check Size: Very large JSON objects may impact performance

Result Interpretation

1. Start with Statistics: Review the summary before diving into details
2. Use Tree View: Navigate the tree structure to understand changes
3. Focus on Changes: Pay attention to modified, added, and removed items
4. Save Important Comparisons: Use history to track significant changes

Workflow Integration

1. API Testing: Compare API responses before and after changes
2. Configuration Management: Track changes in configuration files
3. Data Migration: Verify data transformation accuracy
4. Quality Assurance: Validate expected changes in test data

The basic usage of the JSON Diff Tool is straightforward, but mastering these fundamentals will help you make the most of its powerful comparison capabilities.