---
A Original JSON (Left)
B Target JSON (Right)
Ready Highlight differences, supports deep nested comparison

Online JSON Diff - Highlight Added, Removed, and Changed Fields

This tool uses a recursive deep-traversal algorithm to scan the structural differences of two JSON data sets, supporting infinite depth nested object and array item-by-item comparison. Results are clearly presented in a path table format, with colors distinguishing the type of change. It is an efficient assistant for API debugging, data version checking, and configuration file review. All comparisons are executed locally in the browser, and data is never uploaded to the server.

Added Fields

Fields present in the right JSON but not in the left are highlighted in green. Common in scenarios like API upgrades adding response fields or configuration file expanded parameters.

Removed Fields

Fields present in the left JSON but removed from the right are highlighted in red. Common in scenarios like deprecated API fields or simplified data models.

Changed Values

Keys present on both sides but with different values are highlighted in yellow. Common in configuration parameter modifications or before-and-after data updates.

Steps to Use

  1. Paste the first JSON into the Left Panel (Original)
  2. Paste the second JSON into the Right Panel (Target)
  3. Click the Execute Diff button on the toolbar
  4. View the diff report: Path / Status / Before / After
  5. Click Swap Sides for reverse comparison

Typical Scenarios

  • API Debugging: Compare JSON returned by the same API in test/prod environments to quickly find field differences
  • Version Upgrades: Compare API v1 and v2 response structures to assess the impact of field changes
  • Config Management: Compare changes before and after modifying appsettings.json or package.json
  • Data Validation: Verify if two data collection results are consistent and locate abnormal fields

Frequently Asked Questions

Yes. The tool compares array elements item-by-item according to index position. If the two arrays have different lengths, the extra elements will be marked as "Added" or "Removed"; if the array elements are objects, the internal fields will be recursively compared.

Paths use a dot (.) to separate object hierarchies, and brackets ([0]) represent array indices. For example, settings.theme represents the theme field under the settings object, and features[2] represents the third element of the array.

No. All comparison logic runs entirely in your browser (JavaScript). Data is never sent to any server, making sensitive JSON safe to use. It works even offline.

Yes. The tool compares the semantic value of the JSON, not its textual form. Formatting differences like spaces, line breaks, and indentation are not considered "value changes". Only actual field additions/removals or content changes are marked.