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
- Open the JSON Comparator.
- Paste or upload the original JSON in the left panel.
- Paste or upload the modified JSON in the right panel.
- The diff view immediately highlights:
- Green: Added fields (
notifications,cache_ttl). - Blue/Yellow: Modified values (
api_version,timeout,retries). - Red: Removed fields (if any).
- Green: Added fields (
๐ Diff Modes
| Mode | Description |
|---|---|
| Side-by-Side | Two parallel panels for visual comparison |
| Inline | Unified 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.