Industry
Developer Tools
Case Study
Web Screenshot Tool
I wanted to see how good sites are structured without opening every page by hand. Paste a URL, it reads the sitemap, you get PNGs in folders that match the site. I built the backend and a lightweight frontend for my own research.
Project Overview
I wanted to study well-built websites — how they structure pages, how deep their navigation goes — and feed that into my AI agents. Paid tools were slow or expensive. Clicking through every page manually doesn't scale. So I built a full-stack app that does it in one shot.
Paste a URL. It finds pages through sitemap parsing and organizes generated screenshots into a structured folder hierarchy. I use it regularly.
Full-stack tool that captures full-page website screenshots from a single URL, with automated page discovery through sitemap parsing.
Services
- UX/UI Design
- Web Development
- Product Strategy
Key Deliverables
- Responsive Design
- Custom Development
- User Experience Improvements
Platform Type
Web Platform
Tech Stack
- TypeScript
- Hono
- Vite
- Puppeteer
The Challenge
Good websites already expose their structure through sitemaps and URL patterns. I just needed something that reads that and captures every page without me babysitting a browser tab for an hour.
Without organized output, a folder of 200 random PNGs is useless for actually studying anything.
Approach
Three steps: find pages, render them, save them in order. Hono for the screenshot generation backend. Vite for a lightweight frontend. Puppeteer for headless full-page captures. sitemap.xml parsing to discover pages automatically.
Output mirrors the site — `/about/team` becomes a folder path with a PNG inside. No renaming, no manual sorting.
Built for my own workflow. AI-assisted tools helped me move faster, but I owned the architecture and product decisions.
The Solution
Drop in a URL, the tool reads the sitemap, lists every page, queues them up. You watch progress: which page it's on, how many done, roughly how long left.
Each page gets a full-page screenshot. Sticky headers, lazy-loaded content, weird layouts — handled as well as Puppeteer allows.
You end up with a file tree you can browse, with thumbnails that match the site's actual structure.
Key Challenges
-
full-page captures on sites that lazy-load content or have infinite scroll — not every layout cooperates
-
sitemaps that don't exist, are malformed, or split across multiple index files
-
not running out of memory or patience on sites with hundreds of pages
The Outcome
I use it whenever I want to study a site's structure or feed captures into AI work. Paste URL, get organized screenshots, move on.
Open source coming once it's polished enough to share.
Context
Personal project. I built it because I needed it. Backend services, frontend interface, sitemap discovery — boring on purpose. The site already tells you how it's organized, the tool just listens.