Documentation
shotlist takes annotated UI screenshots. You describe each screenshot in a YAML file called a recipe; shotlist drives your site with Playwright, captures a region, draws callouts on it, and writes the image to a location you choose.
The documentation is organized into four parts. Each part answers a different kind of question, so the fastest route to an answer is to pick the part that matches what you are doing.
Installation
shotlist requires Node.js 20 or later, and Playwright 1.48 or later as a peer dependency. Install both as development dependencies:
npm i -D shotlist playwrightpnpm add -D shotlist playwrightyarn add -D shotlist playwrightAdd shotlist to a project covers this in full, including editor and agent support. To learn on a prepared application instead, follow Your first screenshot, which begins by downloading one. For why Playwright is separate, see Why Playwright is a peer dependency.
Tutorials
Lessons that take you through a complete piece of work, step by step.
Start here if you have never used shotlist.
How-to guides
Directions for solving one specific problem, assuming you already know the basics.
Come here when you have a task in front of you.
- Add shotlist to a project
- Start the site automatically
- Check files without a browser
- Capture a page after interaction
- Capture inside an iframe
- Share setup between recipes
- Capture a page behind a sign-in
- Annotate an existing image
- Hide data that changes
- Undo what a shot changed
- Use a custom label font
- Run shotlist in CI
Reference
Complete descriptions of every command, file and key.
Consult this when you need to look something up.
Explanation
Background on why shotlist works the way it does.
Read these when you want to understand a design decision.