vite-plugin-realtime-diff

vite-plugin-realtime-diff

The open-source tool for pixel-perfect website migrations

Approach

Two URLs are layered on top of each other with CSS overlay techniques to analyze and understand their differences.

Use Cases:

• Compare two URLs to achieve a pixel-perfect match
• Ideal for website migrations to a new stack
• Attest your frontend skills using this
• Spot differences in similar-looking web pages
• Open-source and customizable
• Perform diffing in realtime without any hassle

Installation

Do visual testing yourself on your browser by just adding ?_diff=true command by using our vite plugin. This will show you the output directly and compare it with two base URLs that you provide.

npm install -D vite-plugin-realtime-diff

// 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
  };
});