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 →
Frequently Asked Questions
What diff threshold should I set for my monitors?
Start at 2% for content-heavy pages (homepage, product listings) where minor copy changes are expected. Drop to 0.5–1% for static pages (pricing, legal) where any visible change matters. If you get too many false positives, raise by 0.5% at a time. Below 0.1% you'll catch font anti-aliasing differences, which is usually noise.
How does SnapSharp ignore dynamic elements (carousels, ads, timestamps)?
Use hide_selectors on the monitor config to exclude elements before capture — e.g. .carousel, .timestamp, [data-ad]. The hidden elements are invisible in both the baseline and the current capture, so they don't contribute to the diff percentage.
Can I get alerts in Slack instead of email?
Yes, via webhooks. Set notify_webhook on the monitor to a Slack incoming webhook URL, or pipe monitor.changed events through a Zapier/n8n step that formats a Slack message. See Real-Time Webhooks for Screenshots.
What's the difference between a golden baseline and the previous snapshot?
Default comparison uses the most recent snapshot — drift accumulates gradually and may not trigger alerts. Golden baseline pins a reference (e.g. design sign-off) and diffs every new capture against it, catching cumulative drift. Use golden for design compliance; use previous for fast anomaly detection.
Why did my monitor alert during a planned deploy?
You didn't set a maintenance window. Add a recurring window covering your deploy schedule: SnapSharp suppresses alerts inside the window but keeps capturing snapshots so you have the full timeline. See the maintenance window JSON example above.
Does monitoring count against my regular screenshot quota?
Yes — each scheduled capture counts as one screenshot against your plan's monthly request count. If you have a Growth plan (25,000/month) and 10 monitors running every hour, that's ~7,200 requests/month for monitoring, leaving 17,800 for your application use.
Related: Monitoring docs · Real-Time Webhooks for Screenshots