JSON Diff Viewer
Compare two JSON objects and highlight added, removed, and changed keys. Runs entirely in your browser.
Pure browser JavaScript — no external libraries.
How to use this tool
- Paste the before JSON in box A and after JSON in box B.
- Click Compare.
- Green = added, red = removed, orange = changed.
Compare two JSON objects and highlight added, removed, and changed keys. Runs entirely in your browser.
How it works
The JSON Diff Viewer compares two JSON documents and highlights every difference between them: keys that were added, keys that were removed, and values that changed. The result is displayed as a colour-coded view so you can pinpoint changes at a glance.
Common uses include comparing API responses before and after a code change, auditing configuration file differences, reviewing what changed between two versions of a data export, or debugging why two objects that should be equal are not.
The tool deep-compares nested objects and arrays, not just top-level keys. It treats JSON semantically, so different whitespace or key ordering does not count as a difference -- two objects with the same keys and values in a different order are considered identical.
All processing happens in your browser. Paste sensitive JSON -- API tokens, user data, configuration secrets -- without concern about server-side logging.
Worked example
Compare two API response versions to find what changed
- Copy the JSON response from the current production API into the left pane.
- Copy the JSON response from the staging API into the right pane.
- Click Compare.
- Review highlighted differences: green for additions, red for removals, yellow for changed values.
- Investigate any unexpected changes (e.g. a missing field or a changed data type).
A colour-coded diff showing exactly which fields differ between the two responses.
Common mistakes to avoid
- Pasting JSON with a trailing comma (which is invalid JSON) -- the tool will show a parse error. Remove trailing commas first.
- Expecting array element reordering to be detected as a move rather than a remove+add -- most diff tools compare arrays by index position.
- Comparing the wrong pair of environments -- double-check you have pasted the intended version in each pane before interpreting the diff.
Key terms
- JSON diff
- A comparison of two JSON documents that identifies which keys were added, removed, or had their values changed.
- Deep comparison
- Comparing nested structures recursively, so differences inside nested objects or arrays are detected, not just top-level keys.
- Semantic equality
- Two JSON objects are semantically equal if they have the same keys and values, regardless of key order or whitespace formatting.
Frequently asked questions
- Does it handle nested objects?
- Yes — keys are flattened with dot notation so nested changes show the full path.