The latest articles on DEV Community by Hiralasa (@yui058766). https://dev.to/yui058766 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3978639%2F15d021de-ab44-4513-9db2-a3738fdbcfe3.png https://dev.to/yui058766 en Hiralasa Thu, 11 Jun 2026 03:32:26 +0000 https://dev.to/yui058766/i-automated-my-gumroad-product-screenshots-with-playwright-5518 https://dev.to/yui058766/i-automated-my-gumroad-product-screenshots-with-playwright-5518 <p>I automated my Gumroad product screenshots with Playwright</p> <p>I recently started packaging a few small frontend projects as digital products, and one surprisingly annoying part was preparing product screenshots.</p> <p>Manual screenshots quickly became messy:</p> <ul> <li>different browser sizes</li> <li>inconsistent cropping</li> <li>blurry images</li> <li>mobile screenshots were easy to get wrong</li> <li>Gumroad needed a square thumbnail</li> <li>every update meant taking screenshots again</li> </ul> <p>So I built a small local screenshot workflow with Next.js and Playwright.</p> <p>The workflow captures:</p> <ul> <li>desktop screenshots</li> <li>mobile screenshots</li> <li>square thumbnail images</li> <li>consistent PNG outputs</li> <li>route status checks</li> <li>basic console error reporting</li> <li>basic horizontal overflow checks</li> </ul> <p>The basic command flow is:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm run build npm run start npm run screenshots </code></pre> </div> <p>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.</p> <p>For example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>screenshots/gumroad/ landing.png dashboard.png template-preview.png mobile-preview.png thumbnail.png </code></pre> </div> <p>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.</p> <p>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.</p> <p>I packaged the workflow as a small Gumroad product here:</p> <p><a href="https://remix410.gumroad.com/l/screenshot-automation-kit" rel="noopener noreferrer">https://remix410.gumroad.com/l/screenshot-automation-kit</a></p> <p>Curious how other developers handle product screenshots. Do you take them manually, use Playwright/Puppeteer, or use a design tool workflow?</p> nextjs webdev playwright javascript