Industry
Developer Tools
Case Study
Web Screenshot Tool
I wanted to study complete website structures without opening every page manually. Paste one URL and the tool follows sitemap indexes, captures each page, streams progress, and stores PNGs in folders that mirror the site's URL hierarchy.
Project Overview
Studying a website page by page is slow, and a flat folder of screenshots removes the structure that made the site useful to analyze. I built this tool for repeatable design research and AI-assisted analysis.
The interface stays deliberately small: plain TypeScript, HTML, and CSS bundled directly with Bun.build.
A Bun and Hono tool that discovers pages through sitemap traversal, captures 1920-pixel full-page screenshots, and streams live progress to a lightweight TypeScript interface.
Services
- UX/UI Design
- Web Development
- Product Strategy
Key Deliverables
- Responsive Design
- Custom Development
- User Experience Improvements
Platform Type
Web Platform
Tech Stack
- TypeScript
- Bun
- Hono
- Puppeteer
- Server-Sent Events
The Challenge
A starting URL may point to a sitemap, a sitemap index containing more sitemaps, or a site with no sitemap at all. The capture process must discover what it can, handle failures, and preserve the URL hierarchy in its output.
Long batches also need visible progress without opening a separate socket service or launching a browser instance for every page.
Approach
Hono receives the URL, xml2js parses sitemap XML, and recursive traversal expands sitemap indexes into a page list. If discovery fails, the homepage becomes the fallback target.
One Puppeteer browser instance processes pages sequentially. The backend sends status events through a streaming HTTP response while the frontend reads the stream and updates current page, completed count, total count, and state.
The Solution
The tool exposes a Server-Sent Events workflow at POST `/api/screenshot/stream`. Each discovered page is captured as a 1920-pixel-wide full-page PNG and written into a folder path derived from its URL.
The browser interface is intentionally small: Vanilla TypeScript, HTML, and CSS compiled directly by Bun. This keeps the product focused on discovery, capture reliability, structured output, and progress rather than a frontend framework.
Key Challenges
-
traversing nested sitemap indexes without duplicating URLs
-
handling missing or malformed sitemaps with a useful fallback
-
capturing lazy-loaded and unusually tall pages within browser limits
-
reporting batch progress while keeping browser memory predictable
The Outcome
The result is a focused research tool: provide one URL, watch discovery and capture progress, then inspect screenshots in the same hierarchy as the original website.
Reusing one browser and streaming progress through Server-Sent Events keeps long runs understandable without adding a heavier frontend or realtime infrastructure.
Context
The site's own sitemap provides the structure. The tool preserves that structure instead of reducing the result to an unordered image dump.
Related case studies
Other projects with related architecture decisions, platforms, or product challenges.
Social Carousel Generator
A cross-platform desktop pipeline that turns structured content and brand rules into deterministic carousels, posts, and highlight graphics.
Python · FastAPI · Playwright · PyWebView · Pillow
View case study →Story Content Generator
A local desktop editor for drafting, reviewing, and exporting deterministic 1080 by 1920 story sequences from structured content.
Python · FastAPI · Playwright · PyWebView · Pillow
View case study →Multilingual Professional Services Website
A bilingual Astro website with typed content, translation-aware routing, publishing guards, and production-safe technical SEO.
TypeScript · Astro 5 · Content Collections · Zod
View case study →