Introduction
Reshot is a visual documentation engine that automates the creation of screenshots and videos for your software. It combines an interactive recorder, a visual management UI (Studio), and a headless automation engine to ensure your documentation assets are always up-to-date with your code.
The Problem We Solve
Every product team struggles with the same documentation challenges:
- Outdated Screenshots: Screenshots become stale within days of product updates
- Inconsistent Styling: Documentation screenshots have varying sizes, zoom levels, and visual treatments
- Manual Overhead: Recapturing visuals is time-consuming and error-prone
How Reshot Works
Reshot operates through an integrated 3-component system:
| Component | Description |
|---|---|
| Interactive Recorder | Launch Chrome in debug mode and record interactions with robust selectors |
| Studio (Local UI) | A React-based dashboard at localhost:4300 for managing scenarios and assets |
| Headless Engine | Re-run recorded scenarios in CI/CD to generate fresh assets automatically |
Core Concepts
| Term | Definition |
|---|---|
| Scenario | A named sequence of steps (e.g., "User Login") defined in docsync.config.json |
| Step | A single action (Click, Type, Wait) or an explicit Capture command |
| Asset | The output file (PNG/MP4) generated by a Capture step |
| Variant | Different versions of the same scenario (e.g., "Dark Mode", "German") |
| Capture Key | A unique identifier for a specific image within a scenario |
Quick Start Walkthrough
Here's the basic workflow to get visuals into your documentation:
1
Select Scenario
Choose the scenario you want to capture from the list.
initial
2
Check Scenario
Select the scenario checkbox to include it in the capture run.
click
3
Run Capture
Click Run to generate fresh screenshots and videos.
click
Next Steps
Ready to get started? Continue to the Installation Guide to set up the CLI.