I automated my Gumroad product screenshots with Playwright

I automated my Gumroad product screenshots with Playwright

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?