DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

JSON Diff Viewer Online: Compare JSON Objects and Find Differences Instantly

#json #webdev #programming #devtools

JSON Diff Viewer Online: Compare JSON Objects and Find Differences Instantly

When you're debugging an API response that changed unexpectedly, comparing two config files, or validating a data migration, a JSON diff viewer is the fastest way to find exactly what changed.

Try the DevPlaybook JSON Diff Viewer →

What Is a JSON Diff Viewer?

A JSON diff viewer compares two JSON documents and highlights the differences: added keys, removed keys, changed values, and structural changes. Unlike a plain text diff, a JSON-aware diff understands the structure — it won't flag cosmetic differences like key reordering or extra whitespace.

When to Use JSON Diff

API debugging: Compare the API response you expected with what you actually received. Useful when testing API changes or debugging regression issues.

Config management: Compare production.json with staging.json to see which settings differ between environments.

Data migration validation: After migrating data from one system to another, diff a sample of before/after records to verify correctness.

Code review: When reviewing PRs that change JSON configs or fixtures, a diff view is clearer than reading raw JSON.

How JSON Diff Works

A good JSON diff tool recursively compares two JSON objects:

// Original
{
  "name": "Alice",
  "age": 30,
  "role": "admin"
}

// Updated
{
  "name": "Alice",
  "age": 31,
  "email": "alice@example.com"
}
Enter fullscreen mode Exit fullscreen mode

A JSON diff would show:

  • age: changed from 30 to 31
  • email: added ("alice@example.com")
  • role: removed

Compare JSON in JavaScript 

// Deep diff using structuredClone + recursive comparison
function jsonDiff(a, b, path = '') {
  const diffs = [];

  const keysA = Object.keys(a || {});
  const keysB = Object.keys(b || {});
  const allKeys = new Set([...keysA, ...keysB]);

  for (const key of allKeys) {
    const fullPath = path ? `${path}.${key}` : key;

    if (!(key in (a || {}))) {
      diffs.push({ type: 'added', path: fullPath, value: b[key] });
    } else if (!(key in (b || {}))) {
      diffs.push({ type: 'removed', path: fullPath, value: a[key] });
    } else if (typeof a[key] === 'object' && typeof b[key] === 'object') {
      diffs.push(...jsonDiff(a[key], b[key], fullPath));
    } else if (a[key] !== b[key]) {
      diffs.push({ type: 'changed', path: fullPath, from: a[key], to: b[key] });
    }
  }

  return diffs;
}

const original = { name: "Alice", age: 30, role: "admin" };
const updated = { name: "Alice", age: 31, email: "alice@example.com" };

console.log(jsonDiff(original, updated));
// [
//   { type: 'changed', path: 'age', from: 30, to: 31 },
//   { type: 'added', path: 'email', value: 'alice@example.com' },
//   { type: 'removed', path: 'role', value: 'admin' }
// ]
Enter fullscreen mode Exit fullscreen mode

Compare JSON in Python 

import json
from deepdiff import DeepDiff

original = {"name": "Alice", "age": 30, "role": "admin"}
updated = {"name": "Alice", "age": 31, "email": "alice@example.com"}

diff = DeepDiff(original, updated)
print(diff)
# {
#   'values_changed': {"root['age']": {'new_value': 31, 'old_value': 30}},
#   'dictionary_item_added': ["root['email']"],
#   'dictionary_item_removed': ["root['role']"]
# }
Enter fullscreen mode Exit fullscreen mode

Install with: pip install deepdiff

Compare JSON on the Command Line

Using jq 

# See what changed
diff <(jq -S . original.json) <(jq -S . updated.json)

# The -S flag sorts keys, so only real value changes appear
Enter fullscreen mode Exit fullscreen mode

Using json-diff (npm) 

npm install -g json-diff
json-diff original.json updated.json
Enter fullscreen mode Exit fullscreen mode

Using Python's json.tool 

# Normalize formatting first, then diff
python3 -m json.tool original.json > original_formatted.json
python3 -m json.tool updated.json > updated_formatted.json
diff original_formatted.json updated_formatted.json
Enter fullscreen mode Exit fullscreen mode

Common JSON Diff Scenarios

API Response Drift

You added a feature and now the API response has new fields. Use JSON diff to create a changelog:

// Automated test to catch unexpected API changes
async function checkApiDrift(endpoint, baseline) {
  const response = await fetch(endpoint);
  const current = await response.json();
  const diffs = jsonDiff(baseline, current);

  if (diffs.length > 0) {
    console.warn('API response changed:', diffs);
    // Alert, log, or fail CI
  }
}
Enter fullscreen mode Exit fullscreen mode

Config Environment Comparison 

# Compare all environment configs
for env in staging production; do
  echo "=== $env vs development ==="
  json-diff config.development.json config.$env.json
done
Enter fullscreen mode Exit fullscreen mode

Schema Validation After Migration 

import json
from deepdiff import DeepDiff

with open('before_migration.json') as f:
    before = json.load(f)
with open('after_migration.json') as f:
    after = json.load(f)

diff = DeepDiff(before, after, ignore_order=True)

# Should be empty if migration was lossless
if diff:
    print("Data loss detected:", diff)
else:
    print("Migration verified — no data loss")
Enter fullscreen mode Exit fullscreen mode

Tips for Better JSON Comparison

Sort keys before comparing: Key order doesn't matter in JSON semantically. Use jq -S or sort programmatically to avoid false positives.

Ignore specific fields: Timestamps, IDs, and other auto-generated fields change every time. Exclude them from comparison.

Use semantic diff, not text diff: Plain diff treats JSON as text and flags whitespace, indentation, and key order as differences. A JSON-aware diff only shows meaningful changes.

Set a tolerance for floats: 1.000001 vs 1.0 may not be a meaningful difference. Use a comparison library that supports configurable tolerance.

Best JSON Diff Tools

Tool Platform Best For
DevPlaybook JSON Diff Browser Quick online comparison
jq + diff CLI Scripting and automation
deepdiff (Python) Python Programmatic comparison with detailed output
json-diff (npm) Node.js CLI and CI/CD integration
VS Code Compare IDE Side-by-side file comparison

Conclusion

A JSON diff viewer is an essential debugging tool for any developer working with APIs, configs, or data pipelines. Whether you're comparing two API responses in the browser or diffing environment configs in CI, the key is using a JSON-aware diff that ignores cosmetic differences and highlights what actually changed.

Open JSON Diff Viewer →

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)