Developer Tools

Tools for developers

JSON Diff

Compare original and updated JSON side by side, then review added, removed, and changed values in a readable merged view.

Browser-based JSON comparison

Compare original and updated JSON to spot added keys, removed keys, and changed values without sending data to a server.

Original JSON

Use this as the baseline document.

Updated JSON

Paste the newer JSON you want to compare against.

Arrays are compared by position. If array items are reordered, the diff will show the changed indexes.
Paste two valid JSON documents and click Compare JSON to render the differences.

JSON Diff is an online comparison tool that highlights added keys, removed keys, and changed values between two JSON documents.

It is useful when you need to review API responses, configuration files, payload changes, test fixtures, or versioned JSON data.

This page compares both sides directly in the browser, renders a merged JSON view, and keeps the structure readable with indentation, arrays, and nested objects.

Because everything runs client-side, your JSON data stays in your browser and is not uploaded to a server.

1. Paste the original JSON into the left input area.

2. Paste the updated JSON into the right input area.

3. Click Compare JSON to generate the rendered JSON diff view.

4. Review the top merged JSON block to see structure-preserving changes with green additions and red removals.

5. Use the Added Keys, Removed Keys, and Changed Values sections below for a faster summary of what changed.

6. If the JSON is invalid, fix the error message shown above the editor and compare again.

Original JSON

{
  "name": "ToolBaseHub",
  "version": 1,
  "features": {
    "formatter": true,
    "player": true
  }
}

Updated JSON

{
  "name": "ToolBaseHub",
  "version": 21,
  "features": {
    "formatter": true,
    "player": false,
    "diff": true
  }
}

Array example

{
  "tags": ["json", "pdf"],
  "owners": ["frontend"]
}

The rendered JSON diff keeps the original structure so you can scan the document the same way you would read formatted JSON.

Green highlights show content that exists in the updated JSON but not in the original JSON. Red highlights show content that was removed.

When the value type stays the same, the tool highlights only the changed part inside the value so small edits are easier to spot.

When the value type changes completely, the tool shows the old branch as removed and the new branch as added.

Arrays are compared by index, so reordering items in an array will appear as changed positions instead of a move operation.

Use JSON Diff when you need to compare API responses between versions, inspect changes in request payloads, or review application configuration updates.

It is also helpful for debugging automated tests, checking CMS exports, comparing localization files, and validating that a transformation pipeline produced the expected output.

If you work with nested JSON objects often, a rendered diff view can reduce mistakes because it shows both structure changes and small value edits in one place.