How to use the JSON Diff
- Paste or drop the original JSON on the left and the modified JSON on the right.
- Fix any syntax error the tool points out — both sides must be valid JSON.
- Choose how array items should be matched: detect insertions, by position, or by a key field such as id.
- Read the changes in the tree, the full list of paths, or a side-by-side view, then copy the report or download it as text or as a PDF with all three views.
What does this tool do?
A text diff of two JSON files is noisy: re-indenting a file, reordering keys or moving one comma can make every line look different. This tool parses both documents first and compares their structure, so formatting never counts as a change and each difference is reported once, at its exact path — for example $.variants[1].stock or $.user["first name"].
Objects are compared by key, so the same keys in a different order are equal (switch on “Report key-order changes” if order matters to you). Arrays keep their order, because order is meaningful in JSON. By default, items are lined up the way a text diff lines up lines, so inserting one item at the start of a list shows one addition rather than a change to every item after it. For lists of records, match items by a field such as id or sku instead.
Values are compared by type as well as value: the number 79.99 and the string "79.99" are reported as a type change, which is often the bug you're looking for. Volatile fields such as timestamps or request IDs can be skipped with the ignore list.
Why use it?
- Structural comparison: indentation, whitespace and key order don't create false differences.
- Every change has a copyable path, from $.a.b to $.items[3].price.
- Three ways to match arrays, including by ID for lists of records.
- Warnings for duplicate keys and integers too large for exact comparison.
- PDF report with the tree, every change and the side-by-side view — ready to attach to a ticket.
Use cases
- Check what changed between two versions of a config file (package.json, tsconfig, app settings).
- Review changes to fixtures, translations or feature-flag files before committing them.
- Compare an expected API payload with the one you actually received.
Example
Comparing a product before and after an edit (load it with “Try an example”) reports:
| Path | Change | Before | After |
|---|---|---|---|
| $.name | changed | "Wireless Headphones" | "Wireless Headphones Pro" |
| $.price | type changed | 89.99 (number) | "79.99" (string) |
| $.tags[0] | item added | — | "sale" |
| $.variants[1].sku | changed | "WH-WHT" | "WH-BLU" |
| $.warranty | property added | — | {"years":2} |
Common mistakes
- Comparing a pretty-printed file with a minified one in a text diff — here that's fine, because only structure is compared.
- Expecting reordered array items to be equal. Arrays are ordered in JSON; if your list is really a set of records, match items by a key field.
Accuracy and limits
- Numbers are parsed as JavaScript numbers. Integers larger than 9,007,199,254,740,991 lose precision; the tool warns you when it sees one.
- If a key appears twice in the same object, only its last value is used — exactly what JSON.parse and most libraries do. The tool warns you about these too.
- Everything runs in your browser; nothing you paste or open is uploaded.
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
Does key order matter?
Not by default. JSON objects are unordered, so {"a":1,"b":2} equals {"b":2,"a":1}. Tick “Report key-order changes” to list objects whose keys appear in a different order.
How are arrays compared?
In order. “Detect inserts” finds added and removed items like a text diff does; “By position” compares item 0 with item 0 and so on; “By key field” pairs objects that share a value such as an id, wherever they are in the list.
Can I ignore fields like timestamps?
Yes. Type key names (updatedAt) to ignore them anywhere, or paths ($.meta.requestId, $.items[*].etag) to ignore specific places. Separate entries with commas.
How is this different from the Diff Checker?
The Diff Checker compares any text line by line. JSON Diff understands JSON, so it ignores formatting and reports changes per property with its path.
Last reviewed by the M2Toolkit team.