Website Change Detection in 2026

Three Detection Approaches

• Visual diff (pixel comparison) — screenshot → compare pixels → alert on visual change. Catches layout changes, new UI elements, color changes.
• Text content diff — scrape text → compare strings → alert on content change. Best for price monitoring, news, legal documents.
• DOM structure diff — compare HTML structure → alert on structural change. Catches element addition/removal without caring about content.

Visual Diff with pixelmatch

npm install pixelmatch pngjs node-fetch

import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';
import { readFile, writeFile, mkdir } from 'fs/promises';
import { existsSync } from 'fs';

const SNAPAPI_KEY = process.env.SNAPAPI_KEY;

async function captureScreenshot(url) {
  const res = await fetch('https://api.snapapi.pics/v1/screenshot', {
    method: 'POST',
    headers: { 'X-Api-Key': SNAPAPI_KEY, 'Content-Type': 'application/json' },
    body: JSON.stringify({ url, fullPage: true, format: 'png', blockAds: true }),
  });
  return Buffer.from(await res.arrayBuffer());
}

async function visualDiff(name, url, threshold = 0.01) {
  const baselineDir = './baselines';
  const diffsDir = './diffs';
  await mkdir(baselineDir, { recursive: true });
  await mkdir(diffsDir, { recursive: true });

  const currentBuffer = await captureScreenshot(url);
  const baselinePath = `${baselineDir}/${name}.png`;

  // First run — save baseline
  if (!existsSync(baselinePath)) {
    await writeFile(baselinePath, currentBuffer);
    return { name, changed: false, firstRun: true };
  }

  const baseline = PNG.sync.read(await readFile(baselinePath));
  const current  = PNG.sync.read(currentBuffer);
  const { width, height } = baseline;

  // Images must match dimensions — if different, page layout changed drastically
  if (current.width !== width || current.height !== height) {
    await writeFile(baselinePath, currentBuffer);
    return { name, changed: true, reason: 'dimensions changed', width: { from: width, to: current.width } };
  }

  const diff = new PNG({ width, height });
  const mismatch = pixelmatch(baseline.data, current.data, diff.data, width, height, { threshold: 0.1 });
  const changeRatio = mismatch / (width * height);

  if (changeRatio > threshold) {
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    await writeFile(`${diffsDir}/${name}-diff-${timestamp}.png`, PNG.sync.write(diff));
    await writeFile(`${diffsDir}/${name}-current-${timestamp}.png`, currentBuffer);
    await writeFile(baselinePath, currentBuffer);  // update baseline

    return {
      name, changed: true,
      changePercent: (changeRatio * 100).toFixed(2),
      diffPath: `${diffsDir}/${name}-diff-${timestamp}.png`,
    };
  }

  return { name, changed: false, changePercent: (changeRatio * 100).toFixed(2) };
}

Text Content Monitoring

import * as Diff from 'diff';  // npm install diff

async function scrapeText(url, selector = 'body') {
  const res = await fetch('https://api.snapapi.pics/v1/scrape', {
    method: 'POST',
    headers: { 'X-Api-Key': SNAPAPI_KEY, 'Content-Type': 'application/json' },
    body: JSON.stringify({ url, waitUntil: 'networkidle' }),
  });
  const { html } = await res.json();

  // Extract text from HTML (simple regex approach)
  return html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
}

async function textDiff(name, url) {
  const currentText = await scrapeText(url);
  const baselinePath = `./baselines/${name}.txt`;

  if (!existsSync(baselinePath)) {
    await writeFile(baselinePath, currentText, 'utf-8');
    return { name, changed: false, firstRun: true };
  }

  const baselineText = await readFile(baselinePath, 'utf-8');
  const changes = Diff.diffWords(baselineText, currentText);
  const hasChanges = changes.some(c => c.added || c.removed);

  if (hasChanges) {
    await writeFile(baselinePath, currentText, 'utf-8');
    const summary = changes
      .filter(c => c.added || c.removed)
      .slice(0, 5)
      .map(c => `${c.added ? '+' : '-'} "${c.value.slice(0, 60)}"`)
      .join('\n');
    return { name, changed: true, summary };
  }

  return { name, changed: false };
}