heroshotfree, open-source screenshot automation framework

Your UI changes constantly. Heroshot updates every screenshot in your docs with a single command.

Get Started

View on GitHub

Never Outdated

Screenshots regenerate when your UI changes. Documentation that stays true to your product, automatically.

Set up CI

Point and Click

Visual picker generates the config. No YAML files, no DevTools, no manual CSS selectors.

Try the picker

Light & Dark Mode

Capture both color schemes in one run. Pixel-perfect backgrounds that match your UI theme.

Color scheme options

Viewport Variants

One config, multiple sizes. Desktop, tablet, mobile - all generated automatically from a single definition.

Viewport presets

CI/CD Ready

Run heroshot in your pipeline. Screenshots update on every deploy.

GitHub Actions setup

Self-Hosted

Own your screenshots. No vendor lock-in, no monthly fees. Everything runs on your machine or CI.

How it works

Persistent Auth

Encrypted sessions let you log in once and capture protected pages headlessly.

Session handling

Visual Editor

Refine your screenshots with adjustable padding, margins, and borders - all without touching code.

Padding & masking

Pick Screenshots Visually

Visit any URL, select any element

One Config, Many Variants

This screenshot of the hero section above is captured by Heroshot - desktop, tablet, mobile, light and dark.
Resize your browser or toggle the theme - the matching variant loads automatically.

That's 6 image variants from a single config entry - always in sync with the live site.

Try it yourself

Works With Your Docs

Install

bash

npm install heroshot
heroshot

Configure

docusaurus.config.ts

plugins: [
  ['heroshot/plugins/docusaurus', {}]
]

Use

tsx

import { Heroshot } from 'heroshot/docusaurus';

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

Full Docusaurus Guide