HTML Compare
Compare two HTML documents: source line diff plus a rendered side-by-side preview.
Load file
Load file
Comparison: 5 lines added, 4 removed, 7 unchanged.
Source Line Diff
Added: +5 linesRemoved: -4 linesUnchanged: 7 lines
How HTML Compare works
This tool compares two HTML documents entirely in your browser using a line-based Myers diff algorithm, the same approach used by git diff. Nothing you paste is uploaded anywhere — both the diffing and the rendering happen locally on your device.
Switch to Source Diff to see line-by-line additions and removals highlighted side by side, or Rendered Preview to see both documents rendered visually next to each other inside sandboxed <iframe sandbox> elements — scripts are disabled in both previews, so it's safe to compare markup from an untrusted source.
Common use cases
- Template revisions: spot exactly what changed between two versions of an email template or landing page.
- CMS output diffing: compare HTML exported before and after a content edit or plugin update.
- Visual regression checks:confirm a markup change doesn't unexpectedly alter the rendered layout.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Finding what changed between two versions of a page when the rendered output looks identical.
- Checking whether a template change altered markup structure or only whitespace.
- Comparing a cached copy against a live one after a deployment.
- Seeing the rendered effect of a diff alongside the source change.
- Confirming that a sanitiser removed exactly what you expected and nothing more.
Frequently Asked Questions
- How is this different from a plain text diff?
- It compares structure — elements, attributes and text — so reordered attributes and reformatted whitespace do not register as changes. A text diff reports both as differences when neither changes the page.
- Does attribute order matter in HTML?
- No. Two elements with the same attributes in different orders are identical to a parser, which is why a structural comparison normalises them and a line diff does not.
- Which whitespace differences are real?
- Whitespace between inline elements renders as a space and therefore matters; whitespace between block elements does not. That is the distinction that makes HTML diffing more than string comparison.
- What is this useful for?
- Confirming what a build step, a CMS or a sanitiser actually changed — and checking that a refactor of a template produces identical output, which is far easier to verify structurally than by reading.
Common errors and gotchas
- Comparing formatted against unformatted markup, where whitespace noise buries the real difference.
- Reading an attribute reorder as a change, when attribute order carries no meaning.
- Assuming identical source renders identically, which ignores CSS and script that are not in the file.
- Diffing documents with different line endings and marking every line as changed.
- Expecting the rendered preview to match a real browser exactly when external assets are not loaded.
Related Formatters & Validators tools
JSON Formatter
Format, validate, and beautify JSON payloads.
Text Diff / Compare
Side-by-side or unified line/character diff comparison tool.
XML Formatter
Beautify and indent XML strings.
Minifier Suite
Minify HTML, CSS, and JS by stripping comments and whitespace.
Markdown Converter
Convert Markdown to HTML with live preview.
CSS Formatter
Beautify and indent minified or messy CSS.
HTML Formatter
Beautify and indent raw HTML markup.
SQL Formatter
Format SQL queries with keyword casing and indentation.