webscreenshotter

A CLI tool to capture screenshots of websites across multiple viewports, light/dark mode, and full-page or above-the-fold shots. Built with Puppeteer.

Features

• 3 viewport presets — mobile (390px), macbook (1440px), desktop (1920px)
• Light and dark mode support via localStorage toggle
• Fold (above-the-fold) and full-page shots
• Multiple URLs in one command
• Multiple pages per domain with --pages
• Parallel shooting with configurable concurrency
• Skip existing files to avoid re-shooting
• JPG output with configurable quality
• Auto-opens output folder when done (Mac/Windows/Linux)
• Outputs into per-site subfolders with readable filenames

Install

npm install -g webscreenshotter

Puppeteer will download a bundled version of Chrome on install (~170MB). No separate browser installation needed.

Usage

webscreenshotter <url1> <url2> ... [options]

URLs can be passed with or without https:// or www.:

webscreenshotter example.com
webscreenshotter www.example.com
webscreenshotter https://example.com

Options

| Flag | Description | Default | |------|-------------|---------| | --pages | Paths to shoot on every domain | / | | --out <dir> | Output directory | ./screenshots | | --viewports <...> | Comma-separated: mobile,macbook,desktop | all three | | --modes <...> | Comma-separated: light,dark | light | | --full | Also capture full-page shots | off | | --delay <ms> | Extra wait after page load | 2000 | | --quality <0-100> | JPG output quality | 90 | | --concurrency <n> | Max pages shot in parallel | 3 | | --skip-existing | Skip files already on disk | off | | --no-open | Don't open output folder when done | off | | --help | Show help | |

Examples

# Single site, all viewports, light mode, fold only
webscreenshotter example.com

# Multiple sites at once
webscreenshotter site1.com site2.com site3.com

# Specific pages on every domain
webscreenshotter example.com --pages / /services /about /contact

# Dark mode
webscreenshotter example.com --modes dark

# Both light and dark
webscreenshotter example.com --modes light,dark

# Full-page shots (macbook + desktop only, mobile is always fold)
webscreenshotter example.com --full

# Mobile only
webscreenshotter example.com --viewports mobile

# Custom output folder
webscreenshotter example.com --out ~/Desktop/shots

# Skip files already captured in a previous run
webscreenshotter example.com --skip-existing

# Combine options
webscreenshotter site1.com site2.com --pages / /services --modes light,dark --full --viewports macbook,desktop

Output

Screenshots are saved to ./screenshots/<domain>/ by default. Filenames follow this pattern:

<domain>--<page>--<viewport>--<mode>--<type>.jpg

Examples:

screenshots/
└── example/
    ├── example--home--mobile--light--fold.jpg
    ├── example--home--macbook--light--fold.jpg
    ├── example--home--macbook--light--full.jpg
    ├── example--home--desktop--light--fold.jpg
    ├── example--services--macbook--dark--fold.jpg
    └── ...
└── mysite/
    ├── mysite--home--mobile--light--fold.jpg
    └── ...

Re-running overwrites existing files. Use --skip-existing to preserve previous shots.

Dark Mode

Dark mode is activated using the localStorage approach — the tool sets localStorage.setItem("theme", "dark") before the page loads, so your site's own detectColorScheme() function picks it up on its own. It also emulates prefers-color-scheme: dark at the OS level as a fallback, and calls enableDarkMode() directly if it's available in scope.

Notes

• Mobile is always fold-only. Full-page shots are available on macbook and desktop via --full.
• Full-page mode automatically reduces concurrency to 1 to avoid Chrome memory crashes on large pages.
• Lazy-loaded images are handled by scrolling through the page before shooting (full-page only) and waiting for network activity to settle.
• Scroll-animated navbars are preserved correctly on fold shots — the page is never scrolled before a fold screenshot.