JSON Diff & Compare

How to use JSON Diff

1. Paste the original JSON into the left editor.
2. Paste the modified JSON into the right editor.
3. Toggle "Sort keys before comparing" (on by default) to ignore property ordering differences.
4. Click "Compare" to see the VS Code-style side-by-side diff. Green lines are additions, red lines are deletions, and yellow highlights mark changed values.
5. Click "Edit inputs" to go back, adjust the JSON, and compare again. Use the Swap button to quickly reverse the direction of the diff.

What is a semantic JSON diff?

A text-based diff (like git diff) compares files line by line. This works well for code, but JSON is a data format where two documents can be logically identical yet differ in whitespace, indentation, or key order. A semantic JSON diff understands the structure of JSON: it parses both documents, optionally sorts keys so that reordered properties do not produce false positives, and then compares values by their position in the data tree rather than their position in the text.

The result is a much cleaner diff that highlights only the changes that matter — a field was added, a value changed from 42 to 43, or an array element was removed. This is exactly what you need when comparing API responses, config snapshots, or database exports where formatting and key order are irrelevant.

This tool combines semantic key-sorting with the Monaco diff editor (the same engine behind VS Code), so you get the best of both worlds: structural awareness and a familiar, readable presentation.

Examples

API response comparison — before and after a deploy

Original (v1.2):

{
  "version": "1.2.0",
  "features": ["search", "export"],
  "limits": { "max_results": 100, "timeout_ms": 5000 }
}

Modified (v1.3):

{
  "version": "1.3.0",
  "features": ["search", "export", "bulk_import"],
  "limits": { "max_results": 250, "timeout_ms": 5000 },
  "deprecated": []
}

The diff highlights: version changed, features gained an element, max_results went from 100 to 250, and deprecated is a new field.

Config drift detection

Paste your production and staging config.json side by side to spot unintended differences:

// Production
{
  "log_level": "warn",
  "db_pool_size": 20,
  "feature_flags": { "new_checkout": false }
}

// Staging
{
  "log_level": "debug",
  "db_pool_size": 5,
  "feature_flags": { "new_checkout": true }
}

The diff instantly reveals that staging has a lower pool size, a more verbose log level, and the feature flag enabled — exactly the kind of drift that causes "works on staging but not production" bugs.

Comparing two versions of package.json

After running npm update, diff the old and new package.json to see which dependencies changed:

// Before
{ "dependencies": { "next": "14.1.0", "react": "18.2.0", "zod": "3.22.4" } }

// After
{ "dependencies": { "next": "14.2.3", "react": "18.3.1", "zod": "3.23.8" } }

Every bumped version is highlighted in the diff, making it easy to review before committing.

Common use cases

• Comparing API responses before and after a code change to verify only the intended fields changed.
• Detecting config drift between environments (production vs staging vs local).
• Reviewing database migration output by diffing JSON exports of schema or seed data.
• Debugging webhook payloads — paste the expected and actual payloads to see the exact discrepancy.
• Auditing Terraform or CloudFormation state files by comparing snapshots from different points in time.
• Checking package.json or lock file changes after dependency updates.
• Validating LLM output consistency by comparing structured extraction results across runs.
• Reviewing feature flag config changes before deploying to production.

Frequently asked questions

How does it handle reordered keys?

When "Sort keys before comparing" is enabled (the default), both documents are recursively sorted by key name before the diff runs. This means {"b":1,"a":2} and {"a":2,"b":1} are treated as identical. Toggle the checkbox off if key order matters to you.

Can it compare arrays?

Yes. Arrays are compared element by element based on position. If an element is added at the end, it shows as a green addition. If elements are reordered within an array, each moved element appears as a change because arrays are order-dependent in JSON — unlike objects, position matters.

What does "semantic diff" mean vs text diff?

A text diff compares raw characters line by line. A semantic diff parses the JSON structure first, normalises formatting and (optionally) key order, then compares the resulting trees. This eliminates noise from whitespace changes and key reordering, so you only see changes to actual data values.

How large can the JSON be?

The tool runs entirely in your browser using the Monaco editor. Practical limits depend on your device, but most machines handle documents up to 1-2 MB comfortably. For very large files (5 MB+), you may experience slower rendering. There is no server-side limit since nothing is uploaded.

Does it show nested changes?

Yes. Because both documents are pretty-printed before diffing, nested changes are shown inline at their exact depth. A change three levels deep appears on the specific line where the value differs, with full context from parent objects visible above and below.

Can I use it for YAML or other formats?

This tool expects valid JSON. If you have YAML, convert it to JSON first (many online converters exist, or use yq on the command line) and then paste the JSON here. You can format the JSON with the JSON Formatter before comparing.

Is my data sent anywhere?

No. All processing happens in your browser. See the Privacy section below for details.

Privacy & how it works

JSON Diff runs entirely in your browser. Both documents are parsed, optionally key-sorted, and diffed using the Monaco editor engine — the same one that powers VS Code. No data is sent to any server, stored, or logged. You can confirm this by watching the network tab in DevTools while comparing. This makes it safe to diff production configs, customer data, or internal API responses without any privacy concerns. Other tools on JsonDevKit — including the JSON to Zod generator, JSON to Pydantic converter, and JSON Schema Generator — work the same way.