Text Diff Online — How to Compare Two Texts Side by Side

A text diff tool compares two pieces of text and shows what changed — additions in green, deletions in red, unchanged lines in gray. It’s used for code review, document comparison, and spotting the difference between two versions of a config file.

Use the text compare tool to compare two texts side by side.

How text diff works

Diff tools use the Longest Common Subsequence (LCS) algorithm to find the largest block of unchanged text between two versions. Everything not in the LCS is either added or removed.

Version A:          Version B:
Line 1              Line 1
Line 2              Line 2 (modified)
Line 3              Line 3
Line 4              (deleted)

The diff output:

  Line 1
- Line 2
+ Line 2 (modified)
  Line 3
- Line 4

- = deleted, + = added, no symbol = unchanged.

Diff display modes

Unified diff

Shows changes inline with context:

@@ -1,4 +1,3 @@
 Line 1
-Line 2
+Line 2 (modified)
 Line 3
-Line 4

The @@ header shows line ranges: -1,4 means “starting at line 1, 4 lines from the original”; +1,3 means “starting at line 1, 3 lines in the new version.”

Side-by-side diff

Shows the two versions in parallel columns — easier to read for large changes:

Original                    | Modified
─────────────────────────── | ───────────────────────────
Line 1                      | Line 1
Line 2                      | Line 2 (modified)
Line 3                      | Line 3
Line 4                      |

Deleted lines appear on the left with no counterpart on the right; added lines appear only on the right.

Word-level and character-level diff

Some tools highlight specific words or characters that changed within a line:

-The quick brown fox jumps over the lazy dog.
+The quick brown fox leaps over the sleepy dog.

With word-level diff:

The quick brown fox [jumps → leaps] over the [lazy → sleepy] dog.

What diff is used for

Code review

Viewing the difference between branches or pull requests:

# Git shows diffs before committing:
git diff

# Compare two branches:
git diff main...feature-branch

# Show what changed in a specific commit:
git show abc1234

Configuration comparison

Spotting what changed between two config versions before deploying:

config.yaml (old)           config.yaml (new)
─────────────────────────── ───────────────────────────
database:                   database:
  host: localhost              host: prod-db.example.com
  port: 5432                   port: 5432
  pool: 5                      pool: 20
logging:                    logging:
  level: info                  level: warn

Document editing

Comparing draft versions of a document to track what an editor changed.

Debugging

Comparing the output of two program runs to find unexpected differences.

Whitespace handling

Most diff tools offer whitespace options:

• Ignore trailing whitespace — don’t flag lines that differ only in trailing spaces
• Ignore all whitespace — don’t flag lines that differ only in whitespace
• Ignore blank lines — skip changes that only add or remove empty lines

git diff -w          # ignore whitespace
git diff --ignore-blank-lines

Understanding diff output from git

diff --git a/config.js b/config.js
index 1a2b3c4..5d6e7f8 100644
--- a/config.js
+++ b/config.js
@@ -12,7 +12,8 @@ module.exports = {
   database: {
     host: process.env.DB_HOST,
-    port: 5432,
+    port: parseInt(process.env.DB_PORT || '5432'),
+    ssl: process.env.NODE_ENV === 'production',
   },
 };

Reading this:

• --- a/config.js = the original file
• +++ b/config.js = the new file
• @@ -12,7 +12,8 @@ = context: original lines 12–18, new lines 12–19
• - lines = removed
• + lines = added
• Context lines (no prefix) = unchanged, shown for orientation

Diff for non-code text

Text diff is just as useful for prose. When editing a blog post or document:

• See every word added or removed by an editor
• Verify that only intended changes were made
• Recover accidentally deleted paragraphs by seeing what was removed

Inline commenting on diffs (code review)

GitHub, GitLab, and Bitbucket let you leave comments on specific diff lines:

+    port: parseInt(process.env.DB_PORT || '5432'),
     ↑ Comment: should we handle NaN if DB_PORT is set to a non-number?

This is how code review discussion threads attach to specific changes.

Related tools

• Text Diff Tool — compare two texts online
• Diff Algorithm Explained — how LCS and Myers diff work
• Merge Conflict Resolution — resolving git conflicts