Industry
Personal
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 it for my own research and use it regularly.
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 something that does it in one shot.
Paste a URL. It finds pages through sitemap.xml. You get organized PNGs in folders that match the site structure. I use it regularly.
Personal tool that screenshots every page on a website at once, built so I could study how good sites are structured.
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
- 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 a small server. Puppeteer for headless screenshots. 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. Planning to open-source it once I clean up a few rough edges so I don't embarrass myself.
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. No pitch deck, no landing page ambitions. Sitemap, render, save. Boring on purpose, the site already tells you how it's organized, the tool just listens.