Comparing two versions of text manually is tedious. I built a free, browser-only Text Diff Viewer that highlights additions and deletions instantly — plain text focused, no server needed.
Live Tool
👉 https://devnestio.pages.dev/text-diff/
What it does
- Side-by-side view — original on the left, modified on the right, aligned by line
- Inline view — unified diff showing additions/deletions in one column
- Line-level highlighting — added lines in green, removed lines in red
- Word-level diff — highlights changed words within modified lines
-
Line count summary — shows
+N lines added, -N lines removed - Plain text focused — unlike JSON diff tools, handles any text (code, prose, configs)
- 100% client-side — nothing is sent to a server
How the diff works
Implemented the Myers diff algorithm in ~100 lines of Vanilla JS:
- Build an edit graph from the two sequences
- Find the shortest edit script (SES) using dynamic programming
- Trace back through the edit graph to produce the diff hunks
- Apply word-level diff within changed lines using the same algorithm recursively
Tech stack
- Pure Vanilla JS (zero dependencies)
- Single HTML file
- CSS Grid for side-by-side layout
- Hosted on Cloudflare Pages
Testing
84 tests, all passing ✅
Tests cover:
- Empty input edge cases
- Identical text (zero diff)
- Single-line changes
- Multi-line additions and deletions
- Word-level diff accuracy
- Line count summary correctness
- View toggle (side-by-side ↔ inline)
- Copy output functionality
- SEO and accessibility meta
Why not use an existing diff library?
Libraries like diff (npm) are great but bring in dependencies. For a single-file browser tool, implementing the Myers algorithm directly keeps the file self-contained, loads faster, and removes any supply-chain risk.
All tools at devnestio.pages.dev — free browser-only developer utilities.
Feedback welcome in the comments!
Top comments (0)