Comparing two API responses or config files by eye is tedious and error-prone, especially once nesting gets involved. A proper JSON diff tells you exactly what changed and where, without you scanning line by line.
What Is the JSON Diff Viewer?
Paste an original JSON document on the left and a changed version on the right, and the tool recursively compares every key and array element, reporting each difference as added, removed, or changed, complete with the exact path to that value using dot and bracket notation.
How to Use It
- Open the tool at /tools/json-diff-viewer.
- Paste your original JSON into the left field.
- Paste the changed JSON into the right field.
- Read the differences list — it updates live as you edit either side.
Key Features
- Order-independent object key comparison, so reordering keys with identical values shows no diff.
- Index-based array comparison, correctly reporting added/removed elements at specific positions.
- Full path reporting for every difference, using readable dot/bracket notation like
user.address.cityoritems[2].price. - Fully client-side, nothing ever leaves your browser.
When to Use This Tool
- Comparing API response payloads across versions or environments.
- Reviewing config file changes before deploying.
- Debugging state management issues by comparing before/after snapshots of application state.
Try It Now
Open JSON Diff Viewer directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the JSON Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.