HTML Compare
About the HTML Compare Tool
Diffing HTML sounds simple until you try to compare two versions of a template that was auto-generated by a CMS. Attribute order changes, whitespace shifts, comments appear and disappear — and none of it matters semantically, but it all shows up as a diff. Most diff tools treat HTML as plain text and drown you in noise.
Our compare tool is designed for HTML specifically. It normalizes whitespace before comparison, so you see structural changes — not just formatting differences. This is the tool I wish I had when tracking down a regression introduced by a theme update that changed 200 files but only broke one component.
Features
- Side-by-side visual diff — added lines highlighted green, removed lines in red
- Whitespace normalization — formatting-only changes filtered out (optional)
- Line-level diff — see exactly which lines changed
- Character-level highlighting — within changed lines, see the exact characters that differ
- Change summary — total added, removed, and unchanged line counts
- Paste or upload — compare clipboard content or .html files
- No data sent to server — fully private, runs in browser
Real Use Cases
Code reviews: Before merging a template change, paste the old and new versions to see exactly what changed — without the noise of whitespace reformatting.
CMS updates: Compare a page's HTML before and after a WordPress/Shopify update to catch unexpected template changes.
Email template QA: HTML emails go through multiple systems (ESP, mail client rendering). Compare the sent source vs. your original to find what got stripped or added.
A/B testing verification: Confirm that the only differences between two page variants are the intentional changes, not accidental drift.
How the Diff Algorithm Works
We use a line-based Longest Common Subsequence (LCS) algorithm — the same approach used by Git. It finds the maximum set of lines that appear in both versions in the same order, then marks everything else as added or removed. This is more accurate than simple line-by-line comparison for HTML because it handles block insertions and deletions gracefully.