HTML Site Comparator: How to Compare Two Websites File by File

By Bill Crawford  ·  March 2026  ·  7 min read  ·  Last updated March 02, 2026

Connect on LinkedIn →

Websites change constantly — new features ship, templates get updated, CSS is refactored, content is added or removed. But verifying exactly what changed between two versions of a site is surprisingly difficult without the right tooling. A site comparator solves this by taking two zip files, extracting every file, and showing you precisely what was added, deleted, and changed — down to the individual line.

What Is the HTML Site Comparator?

The HTML Site Comparator is a browser-based tool that accepts two zip files, each containing a version of a website, and compares every file between them. It categorises each file into four groups: unchanged (identical content), added (exists only in Site B), deleted (exists only in Site A), and changed (same path, different content).

For changed files, clicking through opens a line-by-line diff viewer — green lines are additions, red lines are deletions, grey lines are unchanged context. This gives you the same kind of insight that git diff provides, but for deployed website files that may never have been in a Git repository.

Why Compare Websites?

Most development teams use Git for source code, but the deployed output of a website is often very different from its source. Static site generators, CMS platforms, template engines, and build pipelines all transform source files into final HTML, CSS, and JavaScript. Comparing the actual deployed files catches issues that source-level diffs miss entirely.

Consider these scenarios:

• A CMS update changes template rendering. The template source looks identical, but the rendered HTML now includes an extra <div> wrapper on every page. A source diff shows nothing; a site diff catches it immediately.
• A build pipeline upgrade changes minification behaviour. Your JavaScript source is unchanged, but the minified output is different. A site comparator flags the affected bundles.
• Content editors added pages you were not aware of. A site diff shows every new file, not just changed ones.

How It Works Under the Hood

Zip Extraction

Both zip files are extracted entirely in the browser using JSZip. The tool reads every file in each archive into memory as text. If both zips share a common root folder (e.g., my-site/), the prefix is automatically stripped so that paths align correctly.

File Matching

The tool builds a set of all unique file paths across both archives. For each path, it checks whether the file exists in one or both zips and whether the content is identical. This produces four categories: unchanged, added, deleted, and changed.

Line-by-Line Diff

For changed files, the diff viewer uses a longest common subsequence (LCS) algorithm. This is the same fundamental approach used by Unix diff and by Git internally. It finds the longest sequence of lines that appear in both file versions in order, then marks everything outside that sequence as an addition or deletion.

Common Use Cases

Pre-Deployment Review

Before pushing a static site to production, zip the staging build and the current production build. Compare them to verify that only the intended changes are present. This catches accidental file deletions, unintended template changes, and configuration drift.

Template and CMS Auditing

After updating a CMS theme or WordPress plugin, export the rendered site before and after the update. The comparator shows every page affected by the change — not just the template files, but every page that uses them.

Migration Validation

Migrating from one hosting platform to another? From one static site generator to a different one? Compare the output HTML to confirm that the new platform produces equivalent results. Look for missing pages, altered markup, or lost metadata.

Collaboration Without Git

Not every team uses version control for their website. Freelancers, small businesses, and content teams often work with static HTML files directly. The comparator gives these teams a way to review changes before they go live.

Tips and Best Practices

• Format HTML before comparing. If your site output is minified, whitespace differences will dominate the diff. Use the HTML Formatter to pretty-print files before zipping so the diff focuses on actual content changes.
• Exclude generated files. Build hashes, source maps, and cache-busted filenames change on every build. Exclude these from your zip or expect them to appear as changed.
• Use consistent folder structure. Both zips should have the same root structure. If one has dist/ as a root folder and the other has build/, the tool will treat every file as added/deleted rather than changed.
• Check binary files manually. The tool flags changed images and other binary files, but the diff viewer is text-only. For image changes, compare the files directly.
• Compare staging vs production regularly. Make site comparison part of your deployment checklist. It takes seconds and catches issues that code review alone cannot.

Frequently Asked Questions

Why compare websites instead of using Git diff?

Git diff works at the source level, but many websites are built from templates, CMS systems, or static site generators where the deployed HTML is not in version control. Comparing the actual output files catches issues that source-level diffs miss, like template rendering bugs, minification changes, or CMS-injected content.

What types of files can the comparator diff?

The tool compares any text-based file: HTML, CSS, JavaScript, JSON, XML, SVG, Markdown, and plain text. Binary files like images are compared by content hash to detect changes, but the diff viewer shows text diffs only.

How accurate is the line-by-line diff?

The diff uses a longest common subsequence (LCS) algorithm, the same fundamental approach used by Unix diff and Git. It produces optimal diffs that minimise the number of reported changes.

Related Tools & Guides