I spent last weekend comparing two config files — a 400-line nginx setup where I’d made changes across multiple servers. I opened Diffchecker.com, pasted both files, and immediately ran into the same frustrations I’ve had for years: the page uploaded my text to their server (privacy issue for config files), there were no keyboard shortcuts to jump between changes, and the character-level highlighting was either nonexistent or buried behind a Pro paywall.
So I built my own.
The Problem with Every Online Diff Tool
Here’s what bugs me about existing text comparison tools. I tested the top three before writing a single line of code:
Diffchecker.com — The default recommendation on every “best tools” list. It works, but your text gets sent to their servers. For comparing code, configs, or anything with credentials nearby, that’s a non-starter. They also paywall basic features like “find next difference” behind a $10/month subscription.
TextDiffViewer.com — Claims client-side processing, which is good. But the UI feels like it was built in 2012. No character-level highlighting within changed lines, no unified diff view, no keyboard shortcuts. If I’m comparing 2,000 lines, I need to jump between changes, not scroll manually.
DevToolLab’s Diff Checker — Clean UI, but limited. Only side-by-side view, no way to ignore whitespace or case differences, and no file drag-and-drop. Fine for small comparisons, frustrating for real work.
The pattern is clear: either the tool uploads your data (privacy problem) or it’s missing features that developers actually need (navigation, views, options).
What I Built: DiffLab
DiffLab is a single HTML file — no server, no dependencies, no uploads. Everything runs in your browser. Close the tab and your data is gone. Here’s what makes it different:
Three View Modes
Most diff tools give you side-by-side and call it a day. DiffLab has three views you can switch between with keyboard shortcuts:
- Side-by-side (press
1) — The classic two-column layout. Changed lines are paired, and character-level differences are highlighted within each line so you can see exactly what changed. - Unified (press
2) — Likegit diffoutput. Removed lines appear with a-prefix, added lines with+. Compact and scannable. - Inline (press
3) — Shows old → new on the same line with character highlighting. Best for reviewing small edits across many lines.
Keyboard Navigation Between Changes
This is the feature I wanted most. In a long file with changes scattered throughout, scrolling to find each difference is painful. DiffLab tracks every change “hunk” and lets you:
- Press
Jor↓to jump to the next change - Press
Kor↑to jump to the previous change - A floating indicator shows “Change 3 of 12” so you always know where you are
The current change gets a visible highlight so your eye can find it instantly after scrolling.
Character-Level Highlighting
When a line changes, DiffLab doesn’t just highlight the whole line red/green. It finds the common prefix and suffix of the old and new line, then highlights only the characters that actually changed. If you renamed getUserById to getUserByName, only Id and Name get highlighted — not the entire function call.
Comparison Options
Two toggles that matter for real-world comparisons:
- Ignore whitespace (
W) — Treatsa banda bas identical. Essential for comparing code with different formatting. - Ignore case (
C) — TreatsHelloandhelloas identical. Useful for config files where case doesn’t matter.
Both options re-run the diff instantly when toggled.
How It Works Under the Hood
The Diff Algorithm
DiffLab uses a Myers diff algorithm — the same algorithm behind git diff. It finds the shortest edit script (minimum number of insertions and deletions) to transform the original text into the modified text.
For inputs under 8,000 total lines, it runs the full Myers algorithm. For larger inputs, it switches to a faster LCS-based approach with lookahead that trades perfect minimality for speed. In practice, both produce identical results for typical comparisons.
The algorithm runs in your browser’s main thread. On my laptop, comparing two 5,000-line files takes about 40ms. The rendering is the bottleneck, not the diff calculation.
Character Diffing
For paired changed lines (a removed line followed by an added line at the same position), DiffLab runs a second pass. It finds the longest common prefix and suffix of the two strings, then wraps the changed middle section in highlight spans. This is simpler than running a full diff on individual characters, but it’s fast and catches the common case (a word or variable name changed in the middle of a line) perfectly.
Rendering Strategy
The diff output renders as an HTML table. Each row is a line, with cells for line numbers and content. I chose tables over divs because:
- Line numbers stay aligned with content automatically
- Column widths distribute properly in side-by-side mode
- Screen readers can navigate the structure
Changed lines get CSS classes (diff-added, diff-removed) that map to CSS custom properties. Dark mode support comes free through prefers-color-scheme media queries — the custom properties switch automatically.
Real Use Cases
I’ve been using DiffLab daily since building it. Here are the situations where it’s genuinely useful:
- Comparing deployment configs — Before pushing a staging config to production, paste both and verify only the expected values changed.
- Code review diffs — When a PR is too large for GitHub’s diff view, copy-paste specific files for focused comparison.
- Database migration scripts — Compare the current schema dump with the new one to make sure nothing got dropped accidentally.
- Documentation updates — Writers comparing draft versions to see what an editor changed.
- API response debugging — Compare expected vs actual JSON responses. The character-level highlighting catches subtle differences in values.
Privacy and Offline Use
DiffLab includes a service worker that caches everything on first visit. After that, it works completely offline — airplane mode, no internet, whatever. Your text never leaves the browser tab, and there’s no analytics tracking what you compare.
It also passes Chrome’s PWA install requirements. Click “Install” in your browser’s address bar and it becomes a standalone app on your desktop or phone.
Try It
DiffLab is live at difflab.orthogonal.info. Single HTML file, zero dependencies, works offline.
The keyboard shortcuts are the selling point: Ctrl+Enter to compare, J/K to navigate changes, 1/2/3 to switch views, W for whitespace, C for case, S to swap sides, Escape to clear.
If you compare text files regularly, give it a try. If you build developer tools, I’d love to hear what’s missing — reach out at [email protected].
If you spend hours comparing code and config files, a good ergonomic keyboard makes the typing between comparisons much more comfortable. I switched to a split keyboard last year and my wrists thank me daily.
For monitor setups that make side-by-side diffs actually readable, check out these ultrawide monitors for programming — the extra horizontal space is worth it.
And if you’re doing serious code reviews, a monitor arm to position your screen at the right height reduces neck strain during long sessions.
📧 Get weekly insights on security, trading, and tech. No spam, unsubscribe anytime.

Leave a Reply