How to Ensure Pixel-Perfect Comparisons Between Websites?

So here at Builder.io, my first task was to ensure that we migrated our site from Next.js to 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, 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.

To streamline this, I developed a Vite plugin called 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.

Getting Started with the plugin,

Install the plugin in your Vite project:

npm install -D vite-plugin-realtime-diff

and add this to your vite.config,

// 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 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. 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