DevPik Logo

JSON Compare

Compare two JSON objects side by side and find every difference. Visual tree diff and text diff views with additions, deletions, and modifications highlighted.

Why Use JSON Compare?

When yesterday's deploy starts returning the wrong shape from an API, the fastest path to a root cause is a structural diff of yesterday's response vs. today's. A plain text diff produces noise — whitespace, key-order differences, and re-indentation all flag as changes. Structural JSON compare normalizes those away and shows only actual data changes: added fields, removed fields, and changed values. Paired with JSON paths (e.g., `data.users[0].email`), you can jump straight to the breaking change without eyeballing nested braces. Works equally well for comparing two config files, two snapshot fixtures in tests, or two database-export JSON dumps.

How to Use JSON Compare

  1. Paste your original JSON into the left panel and the modified JSON into the right panel.
  2. Click the Compare button to analyze differences between the two JSON objects.
  3. View results in Tree View mode to see differences highlighted in a collapsible tree structure.
  4. Switch to Text Diff mode for a line-by-line comparison similar to GitHub diff view.
  5. Use the Swap button to switch the left and right panels. Copy the diff summary with one click.

Worked Examples

Spot an added field in an API response

Input
Left: { "id": 1, "name": "Jane" }\nRight: { "id": 1, "name": "Jane", "is_beta": true }
Output
Added: is_beta (path: $.is_beta, value: true)

Catches silent API additions that may require client-side handling.

Detect a type change

Input
Left: { "count": 10 }\nRight: { "count": "10" }
Output
Type change at $.count: number → string

Type drift often indicates a breaking change even if the displayed value matches.

Ignore key order

Input
Left: { "a": 1, "b": 2 }\nRight: { "b": 2, "a": 1 }
Output
No differences — JSON object key order is not significant.

Structural diff understands JSON semantics; text diff would flag these as completely different.

About JSON Compare

JSON Compare is a free online tool that finds and visualizes differences between two JSON objects. It performs a deep, structural comparison — not just a text-level diff — which means it correctly identifies added keys, removed keys, modified values, and type changes at every level of nesting. The tool offers two viewing modes: a Tree View that shows the merged JSON structure with color-coded differences at each node, and a Text Diff view that provides a line-by-line comparison similar to code diffs on GitHub. All processing happens locally in your browser, making it safe for comparing sensitive data like API responses, configuration files, and database records.

Troubleshooting & Common Issues

Diff flags every array element as changed

Arrays compare by index, not by content. If you inserted an item at the start, every downstream index shifts and shows a diff. For set-like arrays (orderless), sort both sides by a stable key before comparing.

"No differences" but files aren't identical

The tool ignores key order, trailing whitespace, and numeric formatting (`1.0` vs `1`). If you need a byte-for-byte diff, use a text-level diff tool instead — structural JSON compare sees through formatting.

Comparing large JSON files is slow

The tree-based comparison scales with total key count. For 10MB+ files, pre-filter to the section you care about (e.g., `jq '.users'` to pick one array) before pasting. Very deep nesting can also slow the tree renderer — switch to Text Diff mode for faster scrolling.

Numbers show as different but look identical

JSON doesn't distinguish `1` and `1.0`, but JavaScript serialization might. Re-parse both sides through `JSON.parse(JSON.stringify(x))` to normalize before comparing, or use the "normalize numbers" option if available.

Frequently Asked Questions

How does JSON compare work?

JSON Compare parses both JSON inputs into JavaScript objects, then recursively walks through every key, value, and array element in both structures simultaneously. It tracks four types of differences: additions (keys that exist only in the right JSON), deletions (keys only in the left JSON), modifications (same key but different value), and type changes (same key but different data type). Results are displayed with JSON paths like data.users[0].name so you can locate each difference precisely.

Does JSON compare ignore formatting differences?

Yes. Because the tool parses JSON into objects before comparing, all formatting differences (whitespace, indentation, key ordering within objects) are automatically ignored. Only actual data differences are shown. Two JSON objects with different formatting but identical data will show as 'identical'.

Can I compare large JSON files?

Yes. The tool handles JSON files of any reasonable size since it runs locally in your browser. For very large files (10MB+), comparison may take a moment. The tool compares by structure, not by line, so it works well even with deeply nested or complex JSON data.

What is the difference between tree view and text diff?

Tree View shows the merged JSON structure as a collapsible tree where each node is color-coded: green for additions, red for deletions, and yellow/amber for modifications. Text Diff shows a line-by-line comparison of the pretty-printed JSON, similar to a GitHub pull request diff, with + and - prefixes for added and removed lines.

How does JSON diff handle arrays?

Arrays are compared by index position. Element at index 0 in the left JSON is compared with element at index 0 in the right JSON, and so on. If one array is longer, the extra elements are shown as additions or deletions. This index-based comparison is the standard approach for JSON diffing.

Is my data safe when comparing JSON?

Yes. This JSON compare tool processes everything 100% in your browser. No JSON data is ever sent to any server. You can safely compare sensitive API responses, credentials (if needed), and private configuration files.

Can I compare JSON with different key orders?

Yes. Since the tool performs structural comparison (not text comparison), different key ordering does not affect the result. Two objects with the same keys and values but in different order will show as identical.

Related Tools

Was this tool helpful?