explaingit

kappaemme-git/site-post-screenshots

4JavaScriptAudience · writerComplexity · 2/5ActiveSetup · easy

TLDR

CLI that drives Playwright Chromium to capture desktop, mobile, and side-by-side composite screenshots of any URL, sized for X and social posts.

Mindmap

mindmap
  root((site-post-screenshots))
    Inputs
      Website URL
      Output folder
      Viewport flags
      Selector filters
    Outputs
      Desktop PNG
      Mobile PNG
      1600x900 social images
      Side by side composite
    Use Cases
      Make social post previews
      Generate blog hero images
      Capture specific page region
      Hide cookie banners
    Tech Stack
      Node
      Playwright
      Chromium
      JavaScript

Things people build with this

USE CASE 1

Generate social-ready desktop and mobile screenshots of a launch page

USE CASE 2

Capture a specific page section while hiding cookie banners

USE CASE 3

Batch-produce composite screenshots for a weekly site review newsletter

USE CASE 4

Take delayed screenshots to wait out animations before capture

Tech stack

NodePlaywrightChromiumJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Needs an extra npx playwright install chromium on first run if Chromium is not already present.

In plain English

site-post-screenshots is a small command-line tool that turns any live website into a set of polished screenshots ready to drop into a social media post. The author calls it out as targeted specifically at people who write about websites and want consistent, share-ready images without manually opening a browser, resizing the window, and cropping by hand. The headline usage is a single npx command: point it at a URL and an output folder, and the tool produces several PNG files. The default set includes a raw desktop capture, a raw mobile capture, two 1600 by 900 images sized for X (one desktop, one mobile), a 1600 by 1200 desktop image, and a composite that puts the desktop and mobile views side by side. The tool can be installed globally with npm install -g, after which it is available as either site-post-screenshots or the shorter alias site-post-shots. Under the hood it uses Playwright to drive Chromium, so a separate npx playwright install chromium step may be needed the first time if the browser is not yet on the machine. Several command-line options let the author tune the capture. Custom desktop and mobile viewport sizes can be passed with --desktop and --mobile in WxH form. A --delay flag waits before taking the shot, useful for sites with animations or lazy-loaded content. A --selector flag captures only a specific page region, and --hide-selectors takes a comma-separated list of CSS selectors to remove before capture, which the README suggests for hiding cookie banners and chat widgets. The README closes with publishing notes for anyone who wants to fork the project to npm: run npm run check, dry-run a pack to verify what would be uploaded, then npm login and npm publish under the public access flag. A reminder is included that the name on npm may already be taken, in which case the package.json name field needs changing before publishing.

Copy-paste prompts

Prompt 1
Wrap site-post-screenshots in a GitHub Action that runs on push and uploads the PNGs as artifacts
Prompt 2
Add a --format webp flag to site-post-screenshots and route through sharp for compression
Prompt 3
Write a shell loop that runs site-post-screenshots over a list of URLs from a CSV file
Prompt 4
Add a watermark step to site-post-screenshots using Jimp before saving the composite image
Prompt 5
Build a small Express server that exposes site-post-screenshots as an HTTP endpoint with query params
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.