heroshot

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

npm downloads npm version coverage quality gate docs

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.

Heroshot demo

## Use in Your Docs **VitePress** · [Full guide](https://heroshot.dev/docs/integrations/vitepress) ```ts // .vitepress/config.ts import { heroshot } from 'heroshot/plugins/vite'; export default defineConfig({ vite: { plugins: [heroshot()] } }); ``` ```vue ``` **Docusaurus** · [Full guide](https://heroshot.dev/docs/integrations/docusaurus) ```js // docusaurus.config.js plugins: [['heroshot/plugins/docusaurus', {}]]; ``` ```tsx import { Heroshot } from 'heroshot/docusaurus'; ; ``` **MkDocs** · [Full guide](https://heroshot.dev/docs/integrations/mkdocs) ```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
Desktop Light Desktop Dark
Tablet Light Tablet Dark
Mobile Light Mobile Dark

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

## Learn More | | | | ------------------- | ---------------------------------------------------------------------- | | **Documentation** | [heroshot.dev](https://heroshot.dev) | | **Getting Started** | [Quick start guide](https://heroshot.dev/docs/getting-started) | | **Configuration** | [Config options](https://heroshot.dev/docs/config) | | **CI/CD Setup** | [Automated updates](https://heroshot.dev/docs/guide/automated-updates) | | **CLI Reference** | [All commands & flags](https://heroshot.dev/docs/cli) | ## Support the Project Your suggestions and feedback are highly appreciated. Please feel free to [start a discussion](https://github.com/omachala/heroshot/discussions) or [create an issue](https://github.com/omachala/heroshot/issues) 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](https://github.com/omachala/heroshot/issues) or [pull request](https://github.com/omachala/heroshot/pulls) ## License MIT