SnapSite - Website-Screenshot Tool
SnapSite ist ein Full-Stack-Tool, mit dem du eine Domain eingibst, Seiten automatisch entdeckst und in einem Lauf hochwertige Website-Screenshots erzeugst, prüfst und als ZIP exportierst.
Über das Projekt
SnapSite ist ein webbasiertes Tool für schnelle, reproduzierbare Website-Screenshots. Die Kernidee: Domain eintragen, Seiten automatisch finden, Capture-Lauf starten und Ergebnisse direkt im Browser prüfen oder gesammelt als ZIP herunterladen.
Das Projekt ist aus einem wiederkehrenden Praxisproblem entstanden: Für Reviews, Redesigns, Wettbewerbsanalysen und Content-Dokumentation braucht man viele Screenshots, aber klassische Workflows sind oft manuell, langsam und fehleranfällig.
Problemstellung
Viele Screenshot-Tools starten bei einer einzelnen URL. In der Praxis braucht man aber komplette Sets:
- Startseite plus Unterseiten
- Unterschiedliche Viewports
- Definierte Wartezeiten für Lazy Loading
- Konsistente Qualität für Vergleiche
Genau hier setzt SnapSite an: statt Einzelfoto ein strukturierter Capture-Workflow.
Lösungsansatz
SnapSite kombiniert drei Discovery-Strategien, bevor Screenshots erzeugt werden:
- robots.txt lesen und Sitemap-URLs extrahieren
- Häufige Sitemap-Pfade prüfen und Sitemap-Indexdateien auflösen
- Fallback-Crawl auf internen Links mit konfigurierbarer Tiefe
Wenn keine Seite gefunden wird, erstellt das Tool mindestens einen Screenshot der Startseite.
Technische Umsetzung
Frontend
- SvelteKit als UI-Layer für Domain-Eingabe, Job-Status und Galerie
- Tailwind CSS für ein klares, reduziertes Interface
- Live-Status und inkrementelles Rendern, während neue Screenshots ankommen
- Lightbox mit Tastatur-Navigation für schnelles QA-Review
Backend
- Express API für Discovery, Job-Steuerung und Download-Endpunkte
- Puppeteer für stabile Browser-Automation und Full-Page-Captures
- Cheerio, xml2js und Axios für robots.txt- und Sitemap-Verarbeitung
- Archiver für ZIP-Export kompletter Capture-Sets
Betriebsaspekte
- Docker-ready für reproduzierbare Deployments
- Support für localhost, private IP-Ranges und Entwicklungsumgebungen
- Konfigurierbare Parameter wie Viewport, Qualität, Delay und URL-Limit
Kernfeatures
- Automatische URL-Discovery über robots.txt, sitemaps und crawl fallback
- Multi-Viewport Capture (Desktop, Tablet, Mobile)
- Full-Page-Capture mit Scroll-Handling für lazy content
- Entfernen störender Overlays (z. B. Cookie-Banner) vor dem Screenshot
- Job-Historie und ZIP-Download pro Lauf
- Visuelle Vorschau pro Seite inkl. Einzel-Download
Ergebnis
Mit SnapSite lässt sich in wenigen Minuten ein kompletter visuell vergleichbarer Snapshot eines Webauftritts erzeugen. Das spart Zeit bei Audits, reduziert manuelle Fehler und verbessert die Kommunikation in Review- und Redesign-Phasen.
Ausblick
Die nächste Iteration fokussiert auf produktive Team-Workflows:
- Persistente Datenbank statt Mock-Store
- Geplante wiederkehrende Runs
- Vorher/Nachher-Vergleich für Regression Checks
- Optionales API-Key-Modell für externe Nutzung