I automated my Gumroad product screenshots with Playwright

#nextjs #webdev #playwright #javascript

I recently started packaging a few small frontend projects as digital products, and one surprisingly annoying part was preparing product screenshots.

Manual screenshots quickly became messy:

different browser sizes
inconsistent cropping
blurry images
mobile screenshots were easy to get wrong
Gumroad needed a square thumbnail
every update meant taking screenshots again

So I built a small local screenshot workflow with Next.js and Playwright.

The workflow captures:

desktop screenshots
mobile screenshots
square thumbnail images
consistent PNG outputs
route status checks
basic console error reporting
basic horizontal overflow checks

The basic command flow is:

npm run build
npm run start
npm run screenshots

The script reads a simple config file, opens the configured local routes, captures each screenshot with consistent viewport settings, and exports the images into a predictable folder.

For example:

screenshots/gumroad/
  landing.png
  dashboard.png
  template-preview.png
  mobile-preview.png
  thumbnail.png

I found this especially useful when preparing Gumroad product galleries, because I could regenerate all product images after every UI change instead of taking screenshots manually.

This is not a hosted screenshot service. It is just a local source-code workflow for people who want to generate product screenshots from their own Next.js pages.

I packaged the workflow as a small Gumroad product here:

https://remix410.gumroad.com/l/screenshot-automation-kit

Curious how other developers handle product screenshots. Do you take them manually, use Playwright/Puppeteer, or use a design tool workflow?