What is the JSON Diff Tool?
The JSON Diff tool lets you compare two JSON documents side-by-side
and instantly highlights every difference between them. Think of it as git diff — but
built specifically for JSON, with color-coded line highlighting and a rich editor experience
right in your browser. No installation required, and your data never leaves your device.
Getting Started in 30 Seconds
- Open the JSON Diff tool.
- Click Paste under JSON A to paste the first document from your clipboard.
- Click Paste under JSON B to paste the second document.
- Differences appear immediately — no button to press.
Not sure what to expect? Click Load Sample to populate both panels with a pre-built example showing a modified user record.
Reading the Diff Highlighting
The editor uses standard diff colors to mark every change:
| Color | Meaning | |---|---| | Red / pink background | Line was removed (only in JSON A) | | Green background | Line was added (only in JSON B) | | No highlight | Line is identical in both documents |
Individual characters within a changed line are highlighted with a deeper shade so you can pinpoint the exact value that changed without reading the whole line.
Format Before Compare
By default the tool performs a raw text comparison — every whitespace and indentation difference counts as a change. This is useful when you want to catch all differences, including formatting inconsistencies.
Sometimes, however, you only care about structural changes: different field values, added or removed keys. In that case, enable the Format before compare toggle. When it's on, both JSON inputs are pretty-printed (2-space indentation) before the diff is calculated. Whitespace-only differences vanish, leaving only meaningful changes.
When to use Format before compare
- Minified vs. formatted JSON — Comparing an API response (compact) to a reference config file (formatted) would otherwise show hundreds of false positives.
- Different editors — Two developers may have saved the same file with different indentation settings; formatting first makes the real changes visible.
- Copy-paste artifacts — Trailing newlines or mixed tabs/spaces are normalized away.
Pasting and Clearing Panels
Each panel has its own Paste and Clear button:
- Paste — reads the current contents of your clipboard and loads it into that panel.
- Clear — resets the panel to empty so you can start fresh.
The diff updates in real time every time either panel changes, so there is no separate "Compare" button to click.
Common Use Cases
API Response Auditing
Paste the expected response on the left and the actual response on the right to see exactly which fields differ. This is especially useful during integration testing or when debugging a regression.
Configuration File Review
Before deploying a configuration change, paste the old config in JSON A and the new config in JSON B. Enable Format before compare so that formatting tweaks don't clutter the diff, and focus on the fields that actually changed.
Data Migration Validation
After migrating a record from one system to another, compare the source and destination JSON to confirm the migration was lossless and no fields were renamed, dropped, or transformed unexpectedly.
Code Review
Copy a JSON fixture from a pull request and compare it to the previous version to quickly understand what the change actually does — without reading raw unified diffs.
Tips and Tricks
- Large documents — The editor supports code folding (click the triangle next to a line number) so you can collapse unchanged sections and focus on the differences.
- Search — Press
Ctrl/Cmd+Finside either panel to search for a specific key or value. - Keyboard navigation — Use
F7/Shift+F7to jump between diff sections.
Related Tools
If you need to work with JSON beyond comparison, check out:
- JSON Formatter — Beautify and validate JSON with syntax highlighting and code folding.
- JSON Fixer — Automatically repair common JSON syntax errors like trailing commas, single quotes, and unquoted keys.