ORIGINAL (A)
MODIFIED (B)
// compare HTML files and highlight every change
Compare two HTML files side-by-side. Highlights additions in green, removals in red, and changed lines in yellow with inline word-level diffs. Browser-based, free, no sign-up.
Paste the original HTML in the left panel and the modified version in the right panel. Any HTML works — full pages, templates, components.
The diff engine runs and highlights additions in green, removals in red, and modified lines in yellow. Switch between Split and Unified views using the toolbar tabs.
Use the Prev / Next buttons to jump between each change block, or click the change summary chips to jump directly to a specific change.
HTML Diff Viewer uses the Myers diff algorithm to compare two HTML files line-by-line and produce a colour-coded diff. Added lines are green, removed lines are red, and changed lines are highlighted in yellow with word-level inline diff showing exactly which words changed — entirely in your browser, free, no data sent anywhere.
The tool uses the Myers diff algorithm, which is the same algorithm used by Git. It finds the longest common subsequence between the two files and represents the differences as minimal edit operations — insertions, deletions, and equal regions. The result is the shortest possible diff that accurately describes the transformation from one file to the other.
When a line is modified rather than completely replaced, the word-level diff highlights the specific words within the line that changed. Words that were removed are shown with a darker red background inside the yellow changed line. Words that were added are shown with a darker green background. This makes it easy to spot a single changed attribute value or text edit without scanning the entire line.
Split view shows both files side by side, with the original on the left and the modified version on the right. Corresponding lines align horizontally and scroll synchronously. Unified view shows a single column with removed lines in red (prefixed -) and added lines in green (prefixed +), interleaved in the order they appear in the diff. Split is better for visual comparison; unified is the standard format used by Git diff output.
When "Ignore whitespace" is enabled, lines that differ only in leading indentation, trailing spaces, or internal whitespace are treated as equal. This is useful when comparing HTML that has been reformatted or re-indented — you see only the structural and content changes rather than indentation noise. The underlying whitespace differences are still visible in the inline line display.
There is no hard limit enforced by the tool, but very large files (thousands of lines) may cause the diff computation to take a noticeable amount of time, as the Myers algorithm has O(ND) complexity where N is the file size and D is the number of differences. For typical HTML files — even large page templates — the diff runs in milliseconds.
Yes. The diff engine operates on plain text lines and does not require the input to be valid HTML. You can compare any two text files — CSS, JavaScript, JSON, plain text, configuration files — and the diff will work correctly. The tool is labelled as an HTML diff viewer because that is its primary use case, but the underlying algorithm is generic.
Comparing two versions of an HTML file is a routine task in web development. Whether reviewing the output of a code generator, auditing template changes before deployment, checking that a minification process did not alter structure, or comparing email templates across campaigns, a diff viewer surfaces every change immediately without requiring you to scroll through both files manually.
The Myers algorithm, published by Eugene Myers in 1986, is the foundation of virtually all modern diff tools including Git, GNU diff, and most code review systems. It finds the shortest edit script — the minimum number of insertions and deletions — needed to transform one sequence into another. This produces diffs that feel intuitive to read because they group related changes together rather than scattering them across many individual edits.
A line-level diff treats each line as an atomic unit. Lines that are identical in both files are shown without highlighting. Lines present only in the original are shown in red as removals. Lines present only in the modified version are shown in green as additions. Lines that were modified — containing small changes to one or more words — are shown in yellow with the specific changed words highlighted at a finer granularity. This two-level approach makes it easy to understand both the scope and the specific nature of each change.
The split view is the most natural format for visual review: both versions are shown simultaneously with the original on the left and the modified version on the right. Lines are aligned horizontally across the two columns, allowing direct visual comparison of corresponding regions. The unified view is the traditional format used by command-line diff tools and Git output, showing a single annotated stream with removed lines in red and added lines in green.
Template comparison is one of the most common use cases. When a content management system or code generator produces HTML output, comparing the output from two different configurations or two different runs quickly reveals unexpected changes. Email HTML comparison is equally valuable — email clients are highly sensitive to structural changes, and a diff viewer immediately shows whether a template update changed anything that might affect rendering. Code review workflows benefit from being able to quickly paste two versions of a component and visualise the changes without setting up a repository.