JSON Diff Viewer

What this tool does

This tool compares two JSON documents and shows exactly how they differ. It parses both, then walks them together recursively, classifying every leaf path as one of three things: Added (present only in the right document), Removed (present only in the left), or Changed (the same path, a different value). Object keys are matched by name and array elements by index, so the comparison is structural rather than a line-by-line text diff. The results are grouped by change type, and a clear message confirms when the two documents are identical. Everything runs in your browser.

Why you might need it

API responses drift, config files get edited, and feature flags flip — and when something breaks, the first question is usually “what changed?” A plain text diff is noisy for JSON: reformatting, reordering keys or different indentation all light up as changes even though the data is the same. A structural diff cuts through that. It tells you that version went from 1 to 2, that a uploads key appeared, and that a region key was removed — and nothing else. That is exactly what you want when comparing two environments, reviewing a config change, or checking whether an API payload really changed between two runs.

How to use it

1. Paste the original JSON into the left pane.
2. Paste the JSON you want to compare against into the right pane.
3. Click Compare, or press Ctrl/Cmd + Enter.
4. Review the grouped results: Added in green, Removed in red, Changed in amber.
5. Use Copy diff summary to grab a plain-text list of every change.

The Load sample button fills both panes with two slightly different documents so you can see the diff format right away. If either pane is not valid JSON, a clear error tells you which side failed.

How the diff is computed

The comparison is a recursive deep diff. When both sides at a path are objects, the tool takes the union of their keys: a key only on the left is Removed, a key only on the right is Added, and a shared key is compared recursively. When both sides are arrays, they are compared index by index — extra trailing elements on either side are reported as Added or Removed. When the two values are scalars, or their types simply disagree (an object versus an array, say), the path is reported as Changed with both the old and new value shown. Identical values produce nothing.

Common pitfalls

The biggest surprise is array handling. Because arrays are compared by position, moving a single element down by one index makes every following element look changed. If the order of an array is not meaningful in your data, sort both arrays the same way before pasting them in, and the diff will collapse to the genuine differences. Also keep in mind that the diff is value-based: 1 and "1" are different (a number versus a string) and will show as Changed, which is usually what you want but can catch you off guard. Finally, both inputs must be valid JSON — a stray trailing comma in either pane stops the comparison.

Tips and advanced use

For comparing two environments, export the same config or the same API endpoint from each, paste them side by side, and the diff becomes your migration checklist. The copyable summary uses +, - and ~ prefixes, which pastes cleanly into a pull request description, a ticket or a chat message. When you only care about whether anything changed at all, the identical-documents message is a fast yes/no answer. And since both documents are parsed and diffed entirely on your device, you can safely compare payloads containing credentials or private data.