Website Monitoring: Automated Visual Diff Detection

Your marketing team pushed a CSS change. A third-party widget broke your layout. A deploy flipped the homepage to a 500 error. You found out from a customer tweet.

SnapSharp's Website Monitoring catches these before your users do.

How it works

Add a URL — set a name, viewport, interval, and diff threshold
SnapSharp takes screenshots on schedule (as often as every 15 minutes on Enterprise)
Pixel-level comparison using pixelmatch — every new screenshot is diffed against the previous one (or a golden baseline)
Alerts fire when changes exceed your threshold — via email, webhook, or both
Review in the dashboard — timeline thumbnails, side-by-side diff, overlay view

What makes it powerful

Golden baseline

Instead of comparing to the last screenshot, pin a "golden" reference. Useful when you want to detect drift from a signed-off design rather than track incremental changes.

{
  "baseline_snapshot_id": "550e8400-e29b-41d4-a716-446655440000"
}

Load time alerts

Monitor performance alongside visual changes. Set a threshold in milliseconds — get notified when page load exceeds it.

{
  "alert_load_time_ms": 3000
}

HTTP status change alerts

Get notified when a page's HTTP status code changes — 200 → 500, 200 → 301, anything. Catches backend failures and misconfigured redirects.

{
  "notify_status_change": true
}

Maintenance windows

Suppress alerts during deploy windows or planned downtime. Define recurring windows with day-of-week, time range, and timezone.

[
  {
    "label": "Deploy window",
    "days": [1, 2, 3, 4, 5],
    "start": "02:00",
    "end": "04:00",
    "tz": "UTC"
  }
]

Public status pages

Share a read-only status page with clients or your team. Shows current screenshot, uptime percentage (7/30/90 days), and a timeline with change indicators. No login required.

https://snapsharp.dev/status/{token}

Snapshot export

Download full monitor history as CSV, JSON, or PDF. Great for compliance reports, stakeholder updates, or archiving.

Four diff view modes

Mode	What you see
After	Current screenshot only
Before	Previous screenshot
Side by side	Both screenshots next to each other
Diff overlay	Red pixel overlay showing exactly what changed

Plan limits

Plan	Monitors	Min interval	Retention
Free	0	—	—
Starter	3	24h	7 days
Growth	10	6h	30 days
Business	50	1h	90 days
Enterprise	Unlimited	15 min	1 year

Real-world scenarios

E-commerce — monitor product pages, checkout flow, and pricing pages. Catch layout breaks before they cost you conversions.

SaaS — track your marketing site and app UI. Detect regressions from deploys, third-party script changes, or CDN failures.

Agency — monitor client websites. Share public status pages so clients see uptime without needing to log into your dashboard.

Compliance — automated visual records of your pages for regulatory or legal purposes. Export as PDF for audits.

Webhook integration

Every visual change fires a monitor.changed webhook event with the monitor name, URL, diff percentage, and snapshot IDs. Pipe it into Slack, PagerDuty, or any automation tool.

{
  "event": "monitor.changed",
  "data": {
    "monitor_id": "uuid",
    "monitor_name": "Homepage",
    "url": "https://example.com",
    "diff_percent": 12,
    "previous_snapshot_id": "...",
    "current_snapshot_id": "..."
  }
}

Get started

Monitoring is available on all paid plans. Set up your first monitor in under a minute from the dashboard.

Open Monitoring Dashboard → · Read the docs → · View pricing →

Website Monitoring: Automated Visual Diff Detection with SnapSharp