• Stars
    star
    139
  • Rank 262,954 (Top 6 %)
  • Language
    TypeScript
  • Created over 1 year ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

SSDiff

The open-source tool for pixel-perfect website migrations

Diff

Features

  • Outputs a folder showing visual differences comparing images
  • Out of the box feature to compare different sized screenshots by resizing them
  • Debug logging and output logging can be enabled by config
  • Configurable for multiple use cases
  • Helps in determining the most different pathnames by providing a sorted result map as output

Use Cases:

  • Compare screenshots to achieve a pixel-perfect match
  • Ideal for website migrations to a new stack
  • Spot differences in similar-looking web pages
  • Open-source and customizable

Installation

npm install ssdiff

Config

    export interface SSDiffConfig {
      url1: string; // url of domain1
      url2: string; // url of domain2
      pathnames: string[]; // array of pathnames to be compared
      browserConfig?: BrowserConfig; // config passed to puppeteer.launch
      screenshotConfig?: ScreenshotConfig; // config passed to page.screenshot
      pageConfig?: PageConfig; // config passed to page.goto
      failInCaseOfDifferentSize?: boolean; // if true, the comparison will fail if the images are of different sizes
      debug?: boolean; // if true, debug logs will be printed
      outputFile?: boolean; // if true, output logs will be printed
    }

Dependencies

  1. The tool uses puppeteer to open browser in headless mode visit pages and take screenshots.
  2. It uses pixelmatch to compare the screenshots and return a result map.
  3. It uses sharp to resize the screenshots, in case they are of different sizes.

Local setup

  1. Clone the repo
  2. npm install
  3. npm run dev - to run ts scripts with runtime build using ts-node
  4. Modify and test example based on the changes made in src/ folder.

Contribution guide

  1. Create an issue or assign yourself an existing one
  2. Fork the repo
  3. git checkout -b branch_name
  4. Make the changes
  5. run linting and formatting scripts
  6. Make a PR and associate it with the issue

Example usage

An example can be found here

Example Flow

Flow

Basic architecture of the tool

Architecture

More Repositories

1

qwik

Instant-loading web apps, without effort
TypeScript
20,052
star
2

gpt-crawler

Crawl a site to generate knowledge files to create your own custom GPT from a URL
TypeScript
18,484
star
3

partytown

Relocate resource intensive third-party scripts off of the main thread and into a web worker. πŸŽ‰
TypeScript
12,971
star
4

mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
TypeScript
12,266
star
5

builder

Visual Development for React, Vue, Svelte, Qwik, and more
TypeScript
7,258
star
6

ai-shell

A CLI that converts natural language to shell commands.
TypeScript
4,068
star
7

figma-html

Builder.io for Figma: AI generation, export to code, import from web
TypeScript
3,117
star
8

micro-agent

An AI agent that writes (actually useful) code for you
TypeScript
2,663
star
9

gpt-assistant

An experiment to give an autonomous GPT agent access to a browser and have it accomplish tasks
TypeScript
512
star
10

hydration-overlay

Overlay for hydration errors with explicit diff between renders.
CSS
477
star
11

framework-benchmarks

Test each framework for it's performance cost
TypeScript
473
star
12

nextjs-shopify

The ultimate starter for headless Shopify stores
TypeScript
441
star
13

vscode

Builder.io for VSCode - turn designs into code!
TypeScript
174
star
14

build.

A new visual programming language that reads and writes Typescript and Javascript
TypeScript
128
star
15

builder-shopify-hydrogen

Builder.io Visual CMS + page builder example with Shopify Hydrogen
TypeScript
77
star
16

gatsby-starter-builder

Gatsby example with drag and drop page building
JavaScript
68
star
17

nextjs-edge-personalization-ab-testing

High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io
TypeScript
58
star
18

snap

The fastest web framework
TypeScript
50
star
19

ts-lite

Compiled TypeScript. Generates Go, Swift, Kotlin, WASM, Binary
JavaScript
50
star
20

gatsby-builder-shopify

A starter for Gatsby + Shopify + Builder.io
TypeScript
32
star
21

qwik-city-build

`@builder.io/qwik-city` build artifacts from https://github.com/organizations/BuilderIO/qwik
JavaScript
25
star
22

qwik-tw-vercel-starter-kit

A starter kit for Qwik on Vercel
TypeScript
19
star
23

demo-editor

JavaScript
12
star
24

nextjs-builder-edge-personalization

TypeScript
11
star
25

nextjs-builder-starter

TypeScript
11
star
26

edge-personalize

Personalize and a/b test your static pages at the edge. Static speed with dynamic optimizations!
TypeScript
9
star
27

headlessapp.store

TypeScript
8
star
28

react-design-system-demo

JavaScript
8
star
29

sfcc-composable-storefront-example

SFCC + Builder.io Composable Storefront
JavaScript
8
star
30

qwik-city-e2e

Use to test Qwik City on each server
HTML
6
star
31

qwik-docs-es

TypeScript
6
star
32

this-package-uses-fetch

6
star
33

qwik-build

Build artifacts from https://github.com/organizations/BuilderIO/qwik
JavaScript
6
star
34

blog-example

Builder.io blog example
JavaScript
6
star
35

jsx-qwik-worker-post

A repo showing worker$
JavaScript
6
star
36

perf-experiments

Performance experiments
Astro
6
star
37

http-debug-proxy

This project contains a set up to create a HTTP proxy for the https://cdn.builder.io/ endpoint.
JavaScript
6
star
38

qwik-react-framer-motion

A demo for React Framer Motion inside a Qwik application
TypeScript
5
star
39

resumable-react-post

The code for the blog post: "Resumable React: How To Use React Inside Qwik"
TypeScript
5
star
40

builder-fiddle-demos

Demos of fun stuff for Builder fiddles
TypeScript
5
star
41

nextjs-app-router-example

TypeScript
5
star
42

vcp-design-systems-examples

Starters for experimenting with VCP and different design systems
TypeScript
5
star
43

builder-qwik-example

An example project using Builder.io's drag and drop headless CMS with Qwik
TypeScript
4
star
44

personalization-utils

TypeScript
3
star
45

mitosis-build

Build artifacts from https://github.com/BuilderIO/mitosis
3
star
46

qwik-create-cli-build

JavaScript
3
star
47

kibocommerce-nextjs-starter

A KiboCommerce + Builder.io store built on NextJS
TypeScript
3
star
48

builder-swift

Swift SDK for Builder.io
Swift
3
star
49

nextjs-elasticpath

TypeScript
2
star
50

qwik-raw-data

1
star
51

qase-for-qwik

A demo repo to showcase Qwik
TypeScript
1
star
52

gatsby-builder-transform-images

JavaScript
1
star
53

block-publish

CLI tool to block directly using npm publish
JavaScript
1
star
54

qwik-docs

WIP Qwik-docs
JavaScript
1
star
55

unified-demo

Unified Demo of builder use cases with next.js app router
TypeScript
1
star
56

qwik-labs-build

Continues build artifacts
JavaScript
1
star