JSON Diff Checker: Find Changed Fields Online

When comparing two JSON documents, scanning line by line can miss a change buried inside a nested object. Paste the original and updated data into the online JSON diff checker to list added, removed, and changed values locally in your browser, complete with a path and before-and-after values.

What Differences Can the JSON Diff Checker Find?

The tool supports objects, arrays, strings, numbers, booleans, and null. Consider these two configuration documents.

Original JSON:

{
  "name": "Yaya",
  "enabled": true,
  "theme": "light",
  "limits": { "daily": 100 },
  "tags": ["free", "online"]
}

New JSON:

{
  "name": "Yaya Tools",
  "enabled": true,
  "version": 2,
  "limits": { "daily": 200 },
  "tags": ["online", "free"]
}

The comparison produces three kinds of results:

The summary reports both the total and the counts for each type. This gives you a quick sense of the change size while the paths locate values inside nested objects and arrays.

Compare Two JSON Documents in Three Steps

1. Open the JSON diff checker and paste the baseline into “Original JSON”
2. Paste the updated document into “New JSON”
3. Select “Compare” to inspect every path and its old and new values

If either side is invalid, the page identifies which input could not be parsed. Run it through the JSON formatter first to find missing quotes, trailing commas, or mismatched brackets.

“Swap” reverses the two inputs and recalculates immediately. An added field becomes removed, a removed field becomes added, and the values in changed items trade places. This is useful when reviewing a rollback from the opposite direction.

How to Read JSON Difference Paths

Every result begins at the root path $ and locates the changed value:

• $.user.name means the name field inside user
• $.items[2].price means price in the third item of the items array
• $["user-name"] represents a key containing a hyphen
• $["display name"] represents a key containing a space

This notation resembles common JSONPath expressions, but the page only emits location strings. It does not implement a complete JSONPath query engine.

For a large API response, locate a path in the diff and then search for that field in the JSON formatter and syntax highlighter. You can also use the JSON to TypeScript converter to infer frontend types from a sample, but type generation and value comparison solve separate problems.

Why Object Key Order Normally Does Not Matter

These objects contain the same keys and values in a different order:

{"name":"Yaya","enabled":true}

{"enabled":true,"name":"Yaya"}

With “Ignore object key order” enabled by default, the checker reports no difference. This matches the usual interpretation of JSON objects. RFC 8259 defines an object as an unordered collection of name-value pairs.

In the current page implementation, the checkbox changes the order in which object keys are traversed, while corresponding values are always found by key. Consequently, unchecking it still does not create a diff when only the key order changes. Do not treat this option as a strict object-property ordering detector.

Why Reordered Arrays Appear as Changes

Arrays are compared by index. Changing:

["free", "online"]

to:

["online", "free"]

produces changed entries at $[0] and $[1]. The checker does not infer that the same values merely moved, and it does not match arrays of objects by an id field.

That rule is appropriate for ordered data such as checkout steps, rankings, and time series. For a tag collection where order has no business meaning, sort both arrays using the same stable rule before comparing them. Otherwise, a harmless reorder can look like multiple value changes.

Copy and Reuse the Difference JSON

After differences are found, “Copy Diff JSON” writes the result array to the clipboard. Each item contains:

• type: added, removed, or changed
• path: the location of the difference
• before: the removed or previous value
• after: the added or new value

This export works well in bug reports, code review notes, or test evidence. It is the checker's own summary format, not a JSON Patch document defined by RFC 6902, so it cannot be applied directly as a patch.

Practical JSON Comparison Scenarios

Compare Old and New API Responses

Save responses before and after a change, then inspect added fields, removed fields, and type changes. Timestamps, request IDs, and other dynamic values may legitimately differ on every request, so interpret them against the API contract.

Review Environment Configuration

When comparing staging and production configuration, focus on nested paths and values. Although the tool processes data locally, replace secrets, tokens, and real user information with placeholders whenever possible.

Validate a Data Migration Sample

Export small JSON samples before and after migration to inspect missing fields, defaults, and array order. Use automated tests for large datasets; an online checker is best suited to a quick review of representative samples.

FAQ

Is My JSON Uploaded?

No. Both documents are parsed and compared recursively in the current browser.

Do Whitespace and Indentation Count as Differences?

No. The checker parses the text into JSON values before comparing structures, so formatting whitespace does not create a difference.

Are the Number 1 and the String "1" Equal?

No. They have different types and are reported as a changed value with both versions shown.

Can the Checker Ignore Array Order?

No. The current implementation always compares arrays by index. If order is irrelevant in your use case, sort both arrays by a stable rule first.

Can It Generate an Applicable Patch?

No. The copied diff is intended for reading and documentation; it is not JSON Patch.

Summary

Useful JSON comparison is about locating structural additions, removals, and changes rather than finding a different line of text. Validate both inputs, follow the reported paths through objects and arrays, and interpret reordered arrays or dynamic fields according to the actual data contract before calling a difference a defect.