Diff Checker Online — Compare Files and Text Side by Side

Diff Checker Online

A diff checker online tool compares two text blocks and shows exactly what changed — added lines in green, removed lines in red, and the unchanged context around them. No terminal, no git diff, no editor setup. Paste and compare.

This guide covers how diff algorithms work, how to use diff in code, and the best free tools for everyday code comparison tasks.

---

What Is a Diff?

A diff computes the minimum set of changes needed to transform one text into another. The output marks each line as:

• Added (+) — exists in the second version only
• Removed (-) — exists in the first version only
• Unchanged — exists in both versions

Example: Simple Diff

Version A:

function greet(name) {
  console.log("Hello, " + name);
  return true;
}

Version B:

function greet(name, greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
  return true;
}

Diff output:

- function greet(name) {
+ function greet(name, greeting = "Hello") {
-   console.log("Hello, " + name);
+   console.log(`${greeting}, ${name}!`);
    return true;
  }

---

The Myers Diff Algorithm

Most diff tools use the Myers algorithm (1986), which finds the shortest edit script — the minimum number of insertions and deletions needed to transform one text into another.

The algorithm is efficient: it runs in O(ND) time, where N is the sum of lengths and D is the size of the diff. For mostly-similar files, this is very fast.

Modern tools like Git extend the basic algorithm with heuristics to make diffs more readable — grouping related changes together and avoiding splitting code blocks at awkward points.

---

Diff in Code

JavaScript with diff Library

import { createTwoFilesPatch, diffLines } from 'diff';

const oldCode = `function add(a, b) {
  return a + b;
}`;

const newCode = `function add(a, b, c = 0) {
  return a + b + c;
}`;

// Get line-by-line diff
const changes = diffLines(oldCode, newCode);
changes.forEach(part => {
  const prefix = part.added ? '+' : part.removed ? '-' : ' ';
  process.stdout.write(prefix + ' ' + part.value);
});

// Generate unified diff patch
const patch = createTwoFilesPatch(
  'add.js',
  'add.js',
  oldCode,
  newCode,
  'before',
  'after'
);
console.log(patch);

Python with difflib

import difflib

old = """def add(a, b):
    return a + b
"""

new = """def add(a, b, c=0):
    return a + b + c
"""

# Unified diff (same format as git diff)
diff = difflib.unified_diff(
    old.splitlines(keepends=True),
    new.splitlines(keepends=True),
    fromfile='add_old.py',
    tofile='add_new.py',
)
print(''.join(diff))

# HTML diff for visual display
html_diff = difflib.HtmlDiff()
html_output = html_diff.make_file(
    old.splitlines(),
    new.splitlines(),
    'Old Version',
    'New Version'
)

Command Line with diff and git diff

# Basic diff between two files
diff old.txt new.txt

# Unified diff format (used by git)
diff -u old.txt new.txt

# Show context around changes (3 lines by default)
diff -u -U5 old.txt new.txt

# Ignore whitespace
diff -w old.txt new.txt

# git diff for staged changes
git diff --staged

# git diff for two commits
git diff HEAD~1 HEAD

# Word-level diff
git diff --word-diff HEAD~1 HEAD

---

JSON Diff

Comparing JSON objects is a common use case — checking API response changes, config diffs, and data migrations.

import { createPatch } from 'diff';

// Normalize JSON for comparison (consistent key order, indentation)
function jsonDiff(obj1, obj2) {
  const str1 = JSON.stringify(obj1, null, 2);
  const str2 = JSON.stringify(obj2, null, 2);
  return createPatch('data.json', str1, str2);
}

const before = { name: "Alice", role: "user", age: 30 };
const after  = { name: "Alice", role: "admin", lastLogin: "2026-03-24" };

console.log(jsonDiff(before, after));

Output:

-  "role": "user",
-  "age": 30
+  "role": "admin",
+  "lastLogin": "2026-03-24"

For visual JSON diffs, the JSON Diff Viewer displays the tree structure with highlighted changes.

---

Diff Formats Explained

Unified Diff (most common)

@@ -10,6 +10,7 @@
 unchanged line
 unchanged line
-removed line
+added line
+another added line
 unchanged line

The @@ header shows line numbers: -10,6 means "starting at line 10 in the old file, 6 lines shown"; +10,7 means "starting at line 10 in the new file, 7 lines shown".

Context Diff

Similar to unified diff but uses ! for changed lines and shows old and new separately.

Side-by-Side Diff

Shows old and new versions in parallel columns — easier to read for large changes, harder to scan for many small changes.

---

Use Cases for Online Diff Checkers

Code Review Without Git

Paste two versions of a function to see exactly what changed before committing.

Checking Configuration Changes

Compare environment configs before deploying:

# Before
database:
  host: localhost
  port: 5432
  pool_size: 10

# After
database:
  host: db.production.example.com
  port: 5432
  pool_size: 25

API Response Comparison

Catch unexpected changes in API responses after a refactor:

// Before: user object
{ "id": 1, "name": "Alice", "created_at": "2026-01-01" }

// After: same endpoint
{ "id": 1, "username": "Alice", "createdAt": "2026-01-01T00:00:00Z" }

A diff immediately shows the field renames and format changes.

Data Migration Validation

After transforming a dataset, diff a sample row before and after to verify the transformation is correct.

---

Free Online Diff Checkers

DevPlaybook Code Diff — Side-by-side comparison with syntax highlighting for JavaScript, Python, JSON, YAML, and more. Runs in your browser.

JSON Diff Viewer — Specialized for JSON comparison with collapsible tree structure and color-coded changes.

Diff Checker v2 — Character-level diff for catching single-character typos and whitespace issues.

---

Summary

A diff checker online is the fastest way to compare text, code, or configuration without switching to a terminal or Git client. Key points:

• Unified diff format (+/-) is standard across Git, code review tools, and patch files
• For JSON, normalize formatting before diffing for clean results
• Character-level diffs find typos; line-level diffs work better for code review
• Always diff config files before deploying to production

Use DevPlaybook's Code Diff tool for instant, private comparisons.

---

Ship Cleaner Code Faster

The Developer Productivity Bundle includes 5 GitHub Actions CI/CD workflow templates — Node.js, Python, Docker, Vercel, and Release — so your code review and deployment pipeline runs on autopilot. $29, one-time.

---

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.