Website Monitoring

Monitor websites for visual changes with automated screenshots and pixel-level diff detection.

How it works

1. Add a URL and set a check interval (1h, 6h, 12h, 24h, or weekly)
2. SnapSharp takes screenshots on schedule using a headless browser
3. Each new screenshot is compared pixel-by-pixel to the previous one
4. If changes exceed your threshold — email + webhook notification is sent
5. View the full screenshot timeline and side-by-side diff in the dashboard

Dashboard

Manage all monitors from /dashboard/monitors.

Each monitor card shows:

• Status — Active 🟢, Changed ⚠️, Error 🔴, Paused ⏸
• Timeline — last 7 screenshots as thumbnails with diff badges
• Stats — last run time, diff %, load time
• Actions — View detail, Run now, Pause/Resume, Delete

Plan limits

Monitor settings

When creating a monitor, you can configure:

Notifications

Email

Receive an email when a visual change exceeds your threshold:

Subject: ⚠️ Homepage changed (12% diff)

Visual change detected
"Homepage" has changed by 12%.
[View diff in dashboard →]

Webhook

A monitor.changed event is sent to all active webhooks:

{
  "event": "monitor.changed",
  "timestamp": "2026-03-27T14:23:00Z",
  "data": {
    "monitor_id": "uuid",
    "monitor_name": "Homepage",
    "url": "https://example.com",
    "diff_percent": 12
  }
}

Diff view modes

The detail page supports four viewing modes:

Maintenance windows

Schedule recurring maintenance windows to suppress false-positive alerts during deploys or planned downtime.

Maintenance windows are stored in a single maintenance_windows JSONB field as an array of window objects:

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

You can define multiple windows. Runs that fall within any maintenance window are still executed and stored, but notifications are suppressed and the diff is not counted as a "change" event.

Hide selectors

Exclude dynamic page elements from visual comparison to reduce false positives.

Configure hide_selectors with one or more CSS selectors. These elements are set to display: none before the screenshot is taken:

{
  "hide_selectors": [".cookie-banner", "#chat-widget", ".dynamic-ad"]
}

Common use cases:

• Cookie consent banners
• Live chat widgets
• Ad placements
• Timestamp or counter elements
• A/B test variants

Golden baseline

By default, each snapshot is compared to the previous one. With golden baseline, you pin a specific snapshot as the permanent reference.

Use cases:

• Compare against a signed-off design rather than tracking incremental drift
• Detect when a page reverts after a hotfix
• QA environments where the baseline is the staging build

Set it from the snapshot detail page → Pin as baseline, or via the API:

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

To unpin, set baseline_snapshot_id to null. Diff returns to previous-vs-current comparison.

Load time alerts

Monitor page performance alongside visual changes. Set alert_load_time_ms to get notified when a page takes longer than the threshold to load.

{
  "alert_load_time_ms": 3000
}

If the page loads in 4200ms when the threshold is 3000ms, you receive an email and/or webhook alert. Load time is measured as the time from navigation start to load event.

HTTP status change alerts

Enable notify_status_change to get notified when a monitored page's HTTP status code changes — e.g. from 200 to 500, 403, or 301.

{
  "notify_status_change": true
}

The previous status code is tracked in last_status_code. Status changes trigger notifications regardless of the visual diff threshold.

Threshold configuration

Fine-tune the diff_threshold (0–100) to control notification sensitivity.

The threshold applies to the percentage of pixels that differ between consecutive screenshots.

Export

Export monitor data for reporting and integration with external tools.

From the monitor detail page, click Export to download:

API endpoint: GET /api/monitors/{id}/export?format=csv

Public status page

Share a read-only status page with your team or clients.

Each monitor can generate a public status page with a unique shareable URL:

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

The status page displays:

• Current screenshot and status (up / changed / down)
• Uptime percentage over the last 7 / 30 / 90 days
• Screenshot timeline with change indicators
• No login required — anyone with the link can view

Enable it from the monitor settings by toggling Public status page and copying the generated link.

Auto-disable

If a monitor fails 5 consecutive times, it is automatically paused and you receive an email notification. Re-enable it from the dashboard after verifying the URL is accessible.

Storage

Screenshots are stored on the server at /app/storage/monitors/{monitorId}/{timestamp}.png. Thumbnails (300px wide) are generated for the timeline view. Diff overlay images are stored only when changes are detected.

Old snapshots beyond your plan's retention period are automatically deleted daily at 3 AM UTC.