OnSumoTools

JSON Diff Viewer

This tool compares two JSON payloads and highlights the exact differences between them: added keys, removed keys, changed values, and structural changes. Paste a "before" JSON on the left and an "after" JSON on the right, and the tool shows a color-coded diff with annotations. The comparison happens entirely in your browser. No data is sent to any server.

JSON A

JSON B

Added 1Removed 0Changed 5Unchanged 2

  • name

    JSON A

    "Acme"

    JSON B

    "Acme Corp"

  • plan

    JSON A

    —

    JSON B

    "pro"

  • tags[0]

    JSON A

    "alpha"

    JSON B

    "beta"

  • tags[1]

    JSON A

    "beta"

    JSON B

    "alpha"

  • user.email

  • user.role

    JSON A

    "viewer"

    JSON B

    "admin"

JSON comparison runs in your browser. Nothing is sent to a server.

How does the JSON Diff Viewer work step by step?

The JSON diff viewer compares two JSON objects or arrays and surfaces structural and value differences in a side-by-side view. Before diffing, the tool normalizes key order in both inputs, because JSON objects are semantically unordered, so a key moved to a different position without a value change is not a meaningful difference and is not flagged. Only actual value changes, added keys, and removed keys appear. Added keys are highlighted green, removed keys red, and changed values amber. Nested paths are shown in dot notation (e.g., user.address.city) so you can locate a change in a deep structure without manually traversing the tree. A summary shows the total count of changed, added, and removed paths. Key assumption: both inputs must be valid JSON. The tool validates and pretty-prints each side on paste, flagging syntax errors before running the diff. Edge case: arrays are order-sensitive by default because array position carries semantic meaning in most data formats. If Array A contains [1, 2, 3] and Array B contains [3, 1, 2], the tool flags all three positions as changed. Toggle the array-sort option to treat arrays as unordered sets when element order is not meaningful, such as a list of permission strings where sequence does not matter.

What does a typical JSON Diff Viewer result look like?

You need to see what changed between staging and production API responses. Paste both JSON bodies, scan the summary bar, and expand nested paths like user.address.city.

Frequently asked questions

  • Does this tool send my JSON to a server?

    No. Both payloads are parsed and compared entirely in your browser using JavaScript. Nothing is transmitted over the network. This matters when your JSON contains authorization tokens, PII, internal API payloads, or any data that should not leave your device.

  • What happens if one of the JSON inputs is invalid?

    The tool parses each side independently before attempting a diff. If either side has a parse error, it reports the error with a line and column number on that side and does not attempt to diff the two payloads. Fix the invalid side, then run the diff.

  • How does it handle key order differences in objects?

    JSON objects are unordered key-value maps per the spec. The tool treats objects as unordered. Two objects with the same keys and values in different order are reported as identical. Only actual value differences trigger a \\\\\\\"changed\\\\\\\" annotation. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

  • How does it handle arrays?

    Arrays are compared by index position. If the same value appears at a different index (because an item was inserted before it), the tool reports a change at the shifted index, not a semantic \\\\\\\"item moved.\\\\\\\" For large arrays with many insertions, the diff can appear noisy. Format both arrays consistently before diffing.

  • Can I diff JSON that contains deeply nested structures?

    Yes. The comparison recurses through all levels of nesting. For very deep structures (10+ levels of nesting), the indented diff view collapses unchanged sections to keep the output readable. You can expand any collapsed section to inspect it.

  • Is there a way to ignore certain keys in the diff?

    Yes. The tool includes an \\\\\\\"ignore keys\\\\\\\" field where you can list key names to exclude from the comparison. This is useful for timestamps, request IDs, or session tokens that change on every request but are not meaningful for the comparison.

Related tools

Compare two JSON objects without squinting

API responses change. Config files drift between environments. A test fails and you need to know what's different between the expected payload and the real one. Eyeballing two walls of JSON is how mistakes slip through.

Paste both versions and the viewer colors every difference. Added keys, removed keys and changed values each look different, and a report you can copy sums it all up.

How the comparison works

The tool parses both inputs and walks through them key by key. A key that only exists on the right side is marked added. A key that only exists on the left is removed. A key present on both sides with different values is changed, and you see the old and new value together.

Nested objects are compared all the way down, so a single changed field deep in the structure is easy to find. You don't have to expand and collapse by hand to hunt for it.

Key order doesn't matter

In JSON, {"a":1,"b":2} and {"b":2,"a":1} are the same object. The viewer treats them that way, so reordered keys don't show up as noise. Only real differences do.

How arrays are handled

Arrays are different, because order carries meaning. Items are compared by position. Insert an item at the start of a long list and everything after it may look changed. That's worth remembering when you read the result. If your arrays hold records with IDs, sort them the same way in both inputs before comparing and the diff gets much cleaner.

Invalid JSON

If either side isn't valid JSON, the tool tells you instead of producing a half-right diff. The usual culprits are trailing commas, single quotes, unquoted keys and comments. JSON allows none of them. Fix the syntax and compare again.

What it doesn't do

There's no option to ignore specific keys. If timestamps or request IDs change on every call and drown out the real differences, delete those fields from both inputs first. It takes a moment and the diff becomes far easier to read.

Your JSON is compared in the browser and isn't sent to a server. That's useful when the payload holds customer data or internal tokens. Very large documents depend on your device, so keep an eye on speed with files in the many-megabyte range.

The copyable report

Copy the diff report into a pull request, a bug ticket or a message to a teammate. A plain list of what changed beats a screenshot, since people can search it and quote it.

Good moments to reach for this: checking a staging response against production, reviewing a changed config, confirming an API upgrade didn't break the shape of the data, or writing a clear bug report.