For a long time, me and my team struggled with the same thing. We'd add screenshots to docs. They'd look great. Then we'd ship an update.
New styles. Different layout. Now the docs are lying to users.
The "fix" is brutal. Open browser. Navigate. Log in. Find the thing. Screenshot. Crop. Save. Commit. Do that for every image. Do it again next month.
I built something to never do that again.
One command
npx heroshot
Browser opens. I click the elements I want. Name them. Close.
Done. Screenshots captured:
heroshots/
├── dashboard-light.png
├── dashboard-dark.png
├── sidebar-light.png
├── sidebar-dark.png
Wait - light AND dark? Yeah. If your site has themes, you get both automatically.
The part I actually care about
Week later. App changed. New button, different colors.
npx heroshot
No browser. No clicking. Regenerates everything headlessly.
That's the whole point. Define once, update forever.
"But my app needs login"
This is where I usually give up on automation. Login scripts are fragile. Buttons move. Captchas appear.
Heroshot does something clever. First time you run it, you log in manually. Just once. It encrypts and saves your session.
Next time? Already authenticated. Headless captures just work.
One config, six screenshots
{
"name": "Hero",
"url": "http://localhost:3000",
"selector": ".hero",
"viewports": ["desktop", "tablet", "mobile"]
}
Desktop, tablet, mobile. Light and dark. Six files from one entry.
Quick one-offs
Sometimes I just need a screenshot NOW:
npx heroshot https://example.com --selector ".hero" --mobile --dark
No config. Just captures.
Automate completely
Set up a GitHub Action to run this on a schedule. Screenshots update themselves. You forget about it.
Top comments (0)