HTML Diff
Paste two HTML snippets to diff their visible text — markup, classes, ids, and inline styles are stripped first.
About this tool
The HTML diff compares two snippets by the text a reader would see, not by markup. It strips tags, attributes, classes, ids, styles, and other HTML noise, then diffs the visible text at line or word granularity.
Use it when a CMS, email editor, markdown renderer, sanitizer, or template system rewrites markup but you only care whether the rendered copy changed. A class rename, wrapper <div>, or inline style update disappears; changed words and visible lines remain.
Choose line granularity for patch-style output with context lines, or word granularity for prose-style inline markers. Use JSON when another script needs structured operations and counts. The ignore-case and ignore-whitespace options affect matching only; output keeps the original visible tokens.
Worked example
Original HTML:
<p class="lead">The quick brown fox.</p>
Updated HTML:
<div><span style="color:red">The slow brown fox.</span></div>
With word granularity and unified output, the visible-text comparison ignores the wrapper, class, and style changes and reports the prose edit as The [-quick-] {+slow+} brown fox..
FAQ
Does this compare raw HTML source?
No. It intentionally ignores tag and attribute noise by converting each HTML snippet to visible text first. If you need to compare the actual markup tree, use a source/AST-oriented diff tool instead.
What output formats are available?
unified returns a patch-style diff for line granularity and a wdiff-style inline word diff for word granularity. json returns counts plus token operations for scripts or review bots.
When should I use word granularity?
Use word granularity for paragraphs, email copy, SEO snippets, and other prose where a full line replacement would hide the exact changed word. It marks removed words as [-old-] and added words as {+new+}.
What do ignore case and ignore whitespace change?
They affect matching only. If enabled, tokens that differ only by case or spacing are treated as equal, which helps suppress formatting churn. The output still echoes the original visible text where it appears.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool html-diff '<p class="a">the quick brown fox</p>' 'right=<div><span>the slow brown fox</span></div>'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/html-diff/?left=%3Cp%20class%3D%22a%22%3Ethe%20quick%20brown%20fox%3C%2Fp%3E&right=%3Cdiv%3E%3Cspan%3Ethe%20slow%20brown%20fox%3C%2Fspan%3E%3C%2Fdiv%3E&granularity=line&format=unified&ignore_case=true&ignore_whitespace=true&context=3Machine-readable descriptor: tool.json — title + parameters JSON Schema for agents.