Heroshot – Define screenshots once, regenerate with one command

I built Heroshot to solve a problem I kept hitting: documentation screenshots go stale and updating them manually is tedious.

With Heroshot you define what to capture in a JSON config (URLs, CSS selectors, viewports, light/dark mode), run `npx heroshot`, and get a browser with a visual picker. Click elements to configure captures, close the browser, run `heroshot capture`, and you're done.

Features that have been useful in practice: - Visual picker - click elements on a live page instead of writing selectors by hand - Per-domain element hiding - suppress cookie banners, chat widgets globally per domain - Dark/light mode - captures both variants in one run - Annotations - arrows, boxes, highlights baked into the PNG - Native integrations for SvelteKit, Next.js, Nuxt, VitePress - components that serve the right variant (dark/light, viewport) automatically - CI/CD ready - GitHub Actions workflow in one command

Two open-source projects adopted it: gander-tools/diff-voyager (replaced a custom Playwright script) and MRI-Lab-Graz/prism-studio (MRI research docs, even mentioned it in their JOSS paper).

Happy to answer questions about the design decisions.