Compare · JSON Diff

JSON Diff — Compare Two JSON Documents

Compare two JSON documents side by side with IDE-style highlighting — or in one unified, color-coded panel — plus a change list that names every added, removed, and modified value by path. Runs in your browser.

No sign-up to start · Runs in your browser

JSON Diff
Open changed JSON in editor
Original Changed
Loading diff editor…

Runs entirely in your browser — nothing is uploaded.

{"order":{"id":"ord_9412","status":"pending","total":184.5,"items":[{"sku":"tee","qty":2}],"customer":{"name":"Ada","vip":true}}}
{"order":{"id":"ord_9412","status":"paid","total":199,"items":[{"sku":"tee","qty":2},{"sku":"mug","qty":1}],"customer":{"name":"Ada"}}}
A JSON diff compares two documents and shows what actually changed. JSON Copilot gives you the IDE experience: paste the original and changed JSON into two side-by-side panels and the differences are highlighted line by line — or switch to a single unified panel with color-coded changes. Below the view, a structural change list names every difference by dot-notation path, ignoring key order and formatting. Everything runs in your browser; neither document is uploaded anywhere.

JSON diff example: before and after an order update

Original vs Changed
// Original
{
  "order": {
    "id": "ord_9412",
    "status": "pending",
    "total": 184.5,
    "items": [{ "sku": "tee", "qty": 2 }],
    "customer": { "name": "Ada", "vip": true }
  }
}

// Changed
{
  "order": {
    "id": "ord_9412",
    "status": "paid",
    "total": 199,
    "items": [
      { "sku": "tee", "qty": 2 },
      { "sku": "mug", "qty": 1 }
    ],
    "customer": { "name": "Ada" }
  }
}
Change list (4 differences — 2 changed · 1 added · 1 removed)
~ order.status: "pending" → "paid"
~ order.total: 184.5 → 199
+ order.items[1]: {"sku":"mug","qty":1}
- order.customer.vip (was true)

In the diff view these lines are highlighted in place — side by side or inline — while the change list below names each difference by path. The id and the first item are identical, so they produce nothing. The Changed document’s different formatting causes no noise because the comparison is structural.

How to compare two JSON documents

  1. 1

    Paste both documents

    Drop the "before" version into the left (Original) panel and the "after" version into the right (Changed) panel — or start from the loaded example. Both sides are editable.

  2. 2

    Pick your view

    Side by side shows the two documents as parallel panels with IDE-style highlighting, like a code review. Inline merges them into one panel with color-coded added and removed lines.

  3. 3

    Compare

    Both documents are pretty-printed and the changed lines light up. The comparison itself is structural, so identical data in a different key order or formatting produces no differences.

  4. 4

    Read the change list below

    Under the diff view, every difference is one line: ~ for a changed value with before → after, + for added, - for removed — always with the full path, like order.items[1].sku.

  5. 5

    Open the changed JSON in the editor

    Send the newer document into the full editor to format, validate, explore it as a tree or mind map, and ask the AI copilot about it.

Why use this JSON diff

IDE-style highlighting

Two side-by-side panels with changed lines highlighted — the same diff view you know from VS Code, right on the page.

Side-by-side or inline

Toggle between parallel panels and a single unified panel where additions and removals are color-coded in one column.

Runs in your browser

Both documents are compared 100% client-side. Nothing is uploaded, no account is needed.

Structural change list

Below the view, every difference is named by full dot-notation path — order.customer.vip, items[2].sku — and classified: "4 differences — 2 changed · 1 added · 1 removed".

No formatting noise

Compare parses and pretty-prints both sides, so key order, indentation, and whitespace never produce false differences — and type changes are caught as a single entry.

Validity check included

Both sides are parsed first, so a malformed document is reported by name (Original or Changed) instead of producing a garbage diff.

Structural diff vs text diff

A text diff — what git or a generic diff tool gives you — compares lines of characters. For JSON that is fragile: reorder two keys, change indentation from two spaces to four, or minify one side, and a text diff lights up every line even though the data is identical. A structural diff parses both documents first and compares the resulting values, so it answers the question you actually have: did the data change?

JSON Copilot walks both parsed documents together. Objects are compared key by key, regardless of the order the keys appear in the text. When a key exists on both sides, its values are compared recursively; when it exists on only one side, that is reported as an added or removed entry. Scalars — strings, numbers, booleans, null — are compared by value, and a value that changes type (say an object replaced by an id string) is reported as one changed entry rather than a cascade of noise.

The output is deliberately compact: one line per difference, prefixed ~ for changed, + for added, - for removed, with the full path and the values involved. Long values are truncated in the report so a single big blob does not drown out the list. Two structurally identical documents produce an explicit "No differences" result — a useful assertion in itself when you expected two payloads to match.

How paths and arrays are reported

Every difference carries the full path from the root, in dot notation: order.customer.vip means the vip key inside customer inside order. Array elements use bracket indexes — items[1] is the second element, and paths keep nesting through them, so items[1].sku is precise even in deeply nested structures. A change at the document root (for example, comparing two bare numbers) is reported with the path $.

Arrays are compared by position: the first element of the original against the first element of the changed document, and so on. Elements past the shorter array’s length are reported as added or removed. This is the right model for ordered data — appending an item to the end shows up as exactly one addition.

The by-index model has one consequence worth knowing: if an element is inserted at the front or the list is reordered, every following position shifts, and the diff reports each shifted position as changed rather than recognizing a move. That is inherent to positional comparison — JSON arrays are ordered, and the tool does not guess at element identity. When the noise gets in the way, diff a version of the data keyed by id (an object keyed by identifier instead of an array), or compare the specific elements you care about.

When to reach for a JSON diff

The most common use is API regression checking: capture a response before a deploy and after, diff them, and you immediately see the fields that changed, appeared, or vanished — including subtle ones like a number becoming a string, which is exactly the kind of change that breaks clients quietly. The path in each report line tells you where to look in the code that builds the payload.

Config drift is the second big one. Two environments that should be identical rarely are: diff the staging config export against production and the report is a checklist of what differs, with none of the false noise that a text diff of two differently formatted files would produce. The same applies to package manifests, feature-flag dumps, and infrastructure state exported as JSON.

It also earns its keep while debugging webhooks and events. When yesterday’s payload worked and today’s does not, diffing the two shows the shape change in seconds — the removed field or the object that became an array — instead of eyeballing two walls of text. And because the comparison runs locally in your browser, it is safe to paste payloads that contain customer data: neither document leaves your device.

Tips for cleaner comparisons

You do not need to format or normalize before diffing — parsing takes care of whitespace and key order. Two documents that differ only in indentation, trailing newlines, or the order keys were serialized in will compare as identical. That means you can paste one minified document and one pretty-printed document directly.

If you want a canonical text version for other tools — git, code review, snapshot files — combine this with the Sort JSON tool: sort both documents’ keys, format them, and line-based tools will then behave almost like a structural diff. For one-off comparisons, the structural diff here is faster and more precise.

After comparing, the funnel button opens the Changed document in the full editor, where you can format it, validate it against a JSON Schema, explore it as a collapsible tree or an interactive mind map, and use the AI copilot to explain unfamiliar fields — useful when the diff surfaces a new field you have never seen before.

Frequently asked questions

How do I compare two JSON files online?

Paste the original document into the left panel and the newer one into the right panel, then click Compare. Changed lines are highlighted IDE-style in both panels, and a change list below names every added, removed, and changed value with its exact path. Everything runs in your browser.

What is the difference between the side-by-side and inline views?

Side by side shows the two documents as parallel panels with changes highlighted across them — best on wide screens. Inline merges both into one panel where removed lines and added lines are color-coded in a single column — best on narrow screens or for reading changes top to bottom. Toggle between them any time; nothing is recomputed.

Is the JSON diff free and private?

Yes. The comparison is 100% client-side with no account and no upload — neither document leaves your device, which makes it safe for payloads containing real customer data.

Does key order matter?

No. Both documents are parsed before comparing, so key order, indentation, and whitespace are ignored. Only genuine value differences are reported — a reordered but otherwise identical document yields "No differences".

How are arrays compared?

By position: element 0 against element 0, element 1 against element 1, and so on. Extra trailing elements are reported as added or removed. An insertion at the front shifts every later position, so it appears as a series of changes — positional comparison cannot detect moves.

What do the ~, +, and - prefixes mean?

~ marks a changed value and shows before → after; + marks a key or array element that exists only in the Changed document; - marks one that exists only in the Original. The status bar totals them, e.g. "4 differences — 2 changed · 1 added · 1 removed".

What happens if one side is not valid JSON?

The tool parses both sides first and reports which one failed — "Original (left) input is not valid JSON" or the same for Changed — instead of producing a misleading diff. Fix the syntax and compare again.

How is this different from a text diff like git diff?

A text diff compares lines, so formatting and key order create false differences. This diff compares parsed values, so only real data changes are reported. For line-based tools, you can approximate the same effect by running both documents through Sort JSON and the formatter first.

Can it handle large or deeply nested JSON?

Yes — the comparison walks arbitrarily nested objects and arrays, and long values are truncated in the report so the change list stays readable. Very large documents are limited only by your browser’s memory, since nothing is sent to a server.

Related tools

Compare your JSON now

Open the Editor