How Compare Text is built
Compare Text diffs two pasted texts line by line, entirely client-side. The diff algorithm itself is one function call to a well-established library; the details worth writing up are a specific correctness gotcha in how that library treats the very last line of a file, and a couple of small choices about what the diff looks like once it’s computed.
Tech used
Line diffing with jsdiff
The tool uses diff (jsdiff)‘s diffLines function — a mature, dependency-free MIT-licensed implementation of line-level diffing — rather than hand-rolling an LCS algorithm. The scope is deliberately line-level only for this tool; word- or character-level diffing is a different, more granular kind of comparison and was left out entirely rather than bolted on as a secondary mode, to keep the tool doing one legible thing.
The trailing-newline gotcha
diffLines treats each line as a token, and by default a line’s last occurrence in a file — one with no trailing newline — is a different token from the exact same text appearing earlier in the file with a trailing newline. In practice, that meant a small, simple change near the end of a text (a pure one-line addition, say) could render as a much larger remove-and-re-add block than the actual edit, because the file’s final line no longer matched anything and the diff had to explain that mismatch somehow. Passing ignoreNewlineAtEof: true fixes it — verified by constructing exactly that “append near the end” case and confirming the diff shows a small, precise addition instead of a large one, both before and after the flag.
Not relying on color to say “added” or “removed”
Added and removed lines are shown with a background color, but the color isn’t the only signal: each line is also prefixed with a literal + or - character, and removed lines get a strikethrough — both real, readable content, not decoration hidden from assistive technology. A diff that only communicates “changed” through a color pairing would fail for anyone who can’t distinguish that color pairing, so the axe-core pass in this tool’s e2e suite is checking a design decision, not just a contrast ratio.
Implementation & operational notes
The diff itself is debounced (150ms) after typing stops, so two large textareas stay responsive while you’re actively editing either side; a separate, immediate warning appears for very large inputs regardless of the debounce, since that check is cheap enough not to need one.
Rendering is capped, computation isn’t. computeDiff always returns the complete, accurate result — the summary counts and the copy-to-clipboard output are never truncated — but the DOM only renders the first 20,000 line-rows of a pathologically large, all-unique diff, with a note that more exist. That split keeps a huge worst-case diff from choking the page without ever showing an incomplete or misleading count anywhere else.
Both sides accept a dropped .txt file as a bonus alongside pasting text directly, using small per-textarea drop handlers rather than this catalog’s usual full-page drop overlay — that shared overlay assumes “add files to a list,” which doesn’t fit “load this file into this specific side.”
Try it / source
- Tool: Compare Text
- Source: github.com/GeppettoAndRomero/compare-text