How to Ensure Pixel-Perfect Comparisons Between Websites?
Tags: webdev, vite, javascript, frontend
Published: 2024-02-03 15:26:00

So here at [Builder.io](https://builder.io/), my first task was to ensure that we migrated our site from Next.js to [Qwik](https://github.com/BuilderIO/qwik) with a 100% pixel match. We aimed to utilize the power of Qwik to enhance our site's performance to unprecedented levels.

> Spoiler: We began the migration, and you might think it's just a matter of adjusting HTML and CSS, right? But no, we use Builder CMS to serve our data, meaning we rely on custom components and components from the Builder SDK to make it work. This presented a challenge because you cannot directly change any CSS or other elements that appear different, as they are linked to something else.

We reached a point where it was “almost” ready, and I kept saying it was “almost matching.” Fortunately, Builder had already developed a tool called [SSDiff](https://github.com/BuilderIO/SSDiff), which facilitated the comparison of our websites, highlighting both the matches and the differences.

However, the major limitation for me was the extensive back-and-forth during development. It was cumbersome to switch to another project, run the diff, it will take a screenshot, compare them, and determine the differences. Repeatedly updating CSS and checking for matches became a tedious process.

![vite-plugin-realtime-diff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvdet0zh2dxtonqsglzv.png)

To streamline this, I developed a Vite plugin called [**vite-plugin-realtime-diff**](https://www.npmjs.com/package/vite-plugin-realtime-diff) that allows direct in-browser diffing by simply adding **`?_diff=true`** to the URL. This significantly simplified my workflow, **enabling real-time reflection of local changes in the browser.**

![In action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30i2x7ca4zsv87oxp9t7.png)

### Getting Started with the plugin,

Install the plugin in your Vite project:

```bash
npm install -D vite-plugin-realtime-diff
```

and add this to your vite.config,

```javascript
// vite.config.ts
import { realtimeDiff } from "vite-plugin-realtime-diff";

export default defineConfig(() => {
  return {
    plugins: [
       ...,
       realtimeDiff("https://builder.io/"), // the base url you want to target the diff to
     ], 
  };
});
```

Now go to `http://localhost:5173/any-path?_diff=true` to diff it with the url you provided to the plugin (for example here: https://builder.io/any-path).

### Approach

So its just a simple approach, imagine taking two websites (hint: iframe) and sandwich them one upon the other and then apply CSS overlay to learn the diff. This method proved so effective that I decided to share it and [contributed](https://github.com/BuilderIO/SSDiff/pull/6) to the SSDiff project by adding this there. Especially for those undergoing a site migration using a different framework or looking to demonstrate their front-end development skills (imagine someone asking you, do this in pixel perfect fashion and you’re hired: you know what to use now). Essentially, this tool can help you achieve a 100% pixel match in realtime which can save you hours to explain why your margin padding are not matching.

### Conclusion

If you're interested in contributing, please feel free to reach out; we are open to expanding this project further. For example, in the future we can support for CORS and create pipelines to check frontend snapshots. If you want to take a look at the tool, it has been added into the SSDiff project at Builder within a monorepo [here](https://github.com/BuilderIO/SSDiff). Thank you!

If you want to reach me:
Email : sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11