Compare HTML source and rendered output
HTML Diff Checker compares the markup in the Before and After panels. Use Source diff to inspect changed lines, or switch to Rendered preview to inspect the sanitized versions in side-by-side sandboxed iframes. These are separate views; the tool does not map a source line to a rendered element or provide jump navigation.
What the results show
After you enter content in either panel, the page displays Similarity, Lines added, Lines removed, Lines unchanged, and Elements changed. Fill both panels for a meaningful two-version comparison. The source view highlights added and removed lines. In the preview view, Highlight structural changes can outline changed elements in the Before and After renders.
Structural comparison uses each element's tag name, id, sorted class list, and attribute count. Text or markup changes that do not change the compared element sequence may appear in the source diff without receiving a structural outline.
How to compare two HTML versions
- Paste the original HTML into Before and the modified HTML into After. You can also upload
.htmlor.htmfiles, or files with thetext/htmltype. - Wait for the comparison to update automatically after you edit either panel. The empty state remains until at least one panel has content; fill both panels to compare two versions.
- Choose Source diff for line changes or Rendered preview for the sanitized page output.
- In the preview, choose Full, Tablet, or Mobile, then adjust the shared Zoom slider.
- Use Highlight structural changes when you want changed elements outlined in the previews.
How preview sanitization works
Comparison and sanitization run in the browser. Before rendering, the tool removes script, iframe, object, embed, applet, link[rel=import], meta[http-equiv=refresh], and base elements. It also strips on* event-handler attributes, srcdoc, and javascript: values from inspected URL attributes including href, src, action, formaction, and xlink:href. The result loads in sandboxed iframes without script permission. Ordinary external resource URLs may remain, and the implementation does not document or block every possible browser request from them.
Known limitations
- No explicit user-facing maximum HTML size, file size, or line count is defined.
- Browser compatibility and behavior for malformed, very large, or resource-heavy HTML are not documented.
- Mobile is a generic preview width preset, not an emulator for specific mobile or email clients.
- Preview scroll synchronization is wired after a comparison loads, but may not reliably reattach after later comparisons.
- The implementation does not document a user-facing error message for oversized or invalid input.
Frequently Asked Questions
Is it safe to paste HTML from an untrusted source?
Before rendering, the tool removes script, iframe, object, embed, applet, import-link, refresh-meta, and base elements. It also removes event-handler attributes, srcdoc, and javascript: values from inspected URL attributes. The cleaned markup is shown in sandboxed iframes without script permission. Ordinary external resource URLs may remain.
What counts as a structural change?
The tool walks each rendered document's element tree and builds a signature for every element from its tag name, id, sorted classes, and attribute count. Comparing those signatures finds sequence changes between versions; changed elements can be outlined in the previews.
Why do the two previews scroll together?
The previews have one shared Zoom slider. Scroll synchronization is wired when a comparison's preview documents finish loading, but it may not reliably reattach after later comparisons.
Is this tool private?
The local implementation performs sanitizing, diffing, and rendering in your browser and does not upload entered text. Sanitized markup can retain ordinary external resource URLs, and the implementation does not document or block every possible browser network request from those resources.