Navigation

Compare Two JSON Files

Learn how to visually diff two JSON structures, spot changes, and merge modifications with the JSON Comparator.

Last updated:

When working with APIs, configuration files, or data migrations, you often need to understand exactly what changed between two versions of a JSON document. The JSON Comparator makes this straightforward.

๐Ÿšฉ The Scenario

You have two API response snapshots โ€” one from last week and one from today โ€” and need to understand what changed:

Original (v1):

{
  "api_version": "2.3.0",
  "features": ["auth", "search"],
  "config": {
    "timeout": 3000,
    "retries": 2
  }
}

Modified (v2):

{
  "api_version": "2.4.0",
  "features": ["auth", "search", "notifications"],
  "config": {
    "timeout": 5000,
    "retries": 3,
    "cache_ttl": 600
  }
}

๐Ÿ› ๏ธ Step-by-Step

  1. Open the JSON Comparator.
  2. Paste or upload the original JSON in the left panel.
  3. Paste or upload the modified JSON in the right panel.
  4. The diff view immediately highlights:
    • Green: Added fields (notifications, cache_ttl).
    • Blue/Yellow: Modified values (api_version, timeout, retries).
    • Red: Removed fields (if any).

๐Ÿ”„ Diff Modes

ModeDescription
Side-by-SideTwo parallel panels for visual comparison
InlineUnified view showing additions/deletions in a single stream

โœจ Advanced Features

  • Swap panels: Click the swap button to reverse left/right.
  • Format: Auto-format both sides for consistent indentation before comparing.
  • Copy: Copy either side to clipboard.
  • Download: Export the comparison result.
  • Fullscreen: Expand to full viewport for complex diffs.
  • Edit & Re-compare: Modify either side and see the diff update in real-time.

๐Ÿ’ก Pro Tips

  • Config drift detection: Compare your local config against the production version to find unexpected changes.
  • API regression testing: Save API responses before and after a deploy, then compare to catch unintended breaking changes.
  • Data migration verification: Compare source and destination data after a migration to ensure nothing was lost.

๐Ÿ—‚๏ธ Workspace Integration

When used inside a workspace (via the Tools panel), the Comparator auto-loads your current workspace data as the left ("original") panel, so you only need to provide the comparison target.


๐Ÿš€ Try it now

Open the JSON Comparator and paste two JSON objects to instantly see their differences.