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 - and regenerate them with one command whenever you need.

npx heroshot

First run opens a browser with a visual picker. Click what you want, name it, done. 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.

Learn More

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

Contributing

This is a community project aiming to solve screenshot automation end-to-end and any feedback is valuable. Open an issue for bugs, questions, or feature requests. Pull requests are more than welcome.

If you like it, give the repo a ⭐

License

MIT