Text Diff Viewer – Side-by-Side & Inline Diff with Word-Level Highlighting

#webdev #tools #javascript #programming

Text Diff Viewer

A browser-based text diff tool with side-by-side and inline views, word-level change highlighting, and line numbers: devnestio.pages.dev/text-diff/

Features

Side-by-side mode — original left, modified right, aligned
Inline mode — unified view showing additions and deletions
Word-level diff — within changed lines, highlights exactly which words changed
Line numbers for both left and right sides
Swap button — flip original/modified instantly
Stats — added/deleted line counts at a glance
Zero dependencies — pure Vanilla JS

The Algorithm

Uses LCS (Longest Common Subsequence) based diff — the same foundation as git diff:

// Build LCS DP table
for (let i = 1; i <= n; i++) {
  for (let j = 1; j <= m; j++) {
    if (a[i-1] === b[j-1]) dp[i][j] = dp[i-1][j-1] + 1;
    else dp[i][j] = Math.max(dp[i-1][j], dp[i][j-1]);
  }
}
// Backtrack to generate eq/ins/del ops

The diff runs at line level first, then applies word-level diff within changed line pairs for precise highlighting.

Word-Level Diff

For lines that changed, we split by whitespace and run a second pass of the same LCS algorithm at the token level:

function wordLevelDiff(leftLine, rightLine) {
  const lw = leftLine.split(/(\s+)/);
  const rw = rightLine.split(/(\s+)/);
  const ops = myersDiff(lw, rw);
  // ops: eq → plain, del → <span class="hl-del">, ins → <span class="hl-add">
}