heroshot

👆 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.

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.

Use in Your Docs

VitePress · Full guide

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

<script setup>
import { Heroshot } from 'heroshot/vue';
</script>

<Heroshot name="dashboard" alt="Dashboard" />

Docusaurus · Full guide

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

import { Heroshot } from 'heroshot/docusaurus';
<Heroshot name="dashboard" alt="Dashboard" />;

MkDocs · Full guide

# mkdocs.yml
plugins:
  - macros:
      modules: [heroshot]

{{ 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