👆 This hero shot of heroshot.sh is taken by heroshot ⚡️

Like Heroshot? Share your story — X/Twitter · LinkedIn · Reddit ❤️

Your app changes constantly. New features, design tweaks, bug fixes. Meanwhile, the screenshots in your README and docs quietly become lies.

The manual fix is tedious: open browser, navigate, log in, screenshot, crop, save, commit. Now do that for every image. Now do it again next month.

Heroshot fixes this. Define your screenshots once - point and click, no CSS selectors. Style them with the visual editor, add annotations to highlight what matters, and regenerate everything with one command.

``bash
npx heroshot
`

First run opens a browser with a visual editor. Pick elements, adjust padding, style borders, edit text, and add annotations (arrows, rectangles, callouts). Screenshots land in heroshots/, config saves to .heroshot/config.json. Next run regenerates everything headlessly.

https://github.com/user-attachments/assets/1636d404-1e5f-4151-9aba-d5676ed3ff2a

Use in Your Docs

VitePress · Full guide

`ts
// .vitepress/config.ts
import { heroshot } from 'heroshot/plugins/vite';
export default defineConfig({ vite: { plugins: [heroshot()] } });
`

`vue



`

Docusaurus · Full guide

`js
// docusaurus.config.js
plugins: [['heroshot/plugins/docusaurus', {}]];
`

`tsx
import { Heroshot } from 'heroshot/docusaurus';
;
`

MkDocs · Full guide

`yaml


mkdocs.yml


plugins:
- macros:
modules: [heroshot]
`

`jinja
{{ heroshot("dashboard", "Dashboard overview") }}
``

One component/macro, all variants - light/dark mode switches automatically, responsive sizes via srcset.

One Screenshot - All Variants

6 screenshots from one config entry - always in sync with the live site.

Learn More

| | |
| ------------------- | --------------------------------------------------------------------- |
| Documentation | heroshot.sh |
| Getting Started | Quick start guide |
| Configuration | Config options |
| CI/CD Setup | Automated updates |
| CLI Reference | All commands & flags |

Support the Project

Your suggestions and feedback are highly appreciated. Please feel free to start a discussion or create an issue to share your experience with the tool or to discuss a feature/issue.

If you find heroshot useful, saves you a lot of work, and lets you sleep much better, then consider supporting the project by any of the following means:

- Star the repo — it helps others discover heroshot
- Spread the word — share the project on social media or with friends
- Report bugs or propose solutions — open an issue or pull request

License

MIT