PortShot

Automated portfolio screenshot toolkit — generate polished screenshots, mockups, and responsive previews from any URL.

Created and maintained by Impossible Solutions LLC.

Installation

pnpm add -g portshot

Requires Node.js 20+. Chromium is installed automatically during setup — no extra steps needed.

Quick Start

# Capture screenshots with default devices
portshot capture http://localhost:3000

# Interactive mode — run without flags and get prompted
portshot capture http://localhost:3000

# Specify devices and format
portshot capture https://example.com --devices desktop-hd,iphone-16 --format webp

Commands

portshot capture <url>

Capture screenshots of a URL across multiple device viewports.

portshot capture <url> [options]

Options:

Examples:

# Full-page capture in JPEG
portshot capture http://localhost:3000 --full-page --format jpeg

# All mobile devices with custom output dir
portshot capture https://example.com --devices mobile --output ./screenshots

# Multiple formats
portshot capture https://example.com --format png,webp

portshot devices

List all available device presets.

portshot devices

portshot init

Generate a portshot.config.ts file in the current directory.

portshot init

Interactive Mode

When you run portshot capture <url> without any flags in a TTY terminal, PortShot launches an interactive prompt flow:

1. Device selection — pick which devices to capture (checkboxes)
2. Format — choose PNG, JPEG, or WebP
3. Full page — toggle full-page capture
4. Output directory — set the output path

This is useful when you're exploring or don't want to remember flag names. If any flag is provided, interactive mode is skipped and the flags are used directly.

Interactive mode is automatically disabled in non-TTY environments (CI, pipes) to avoid hanging.

Config File

Create a portshot.config.ts for persistent settings:

portshot init

This generates:

import type { PortshotConfig } from "portshot";

const config: PortshotConfig = {
  // url: "http://localhost:3000",
  devices: ["desktop-hd", "ipad-pro", "iphone-16"],
  formats: ["png"],
  fullPage: false,
  waitUntil: "networkidle",
  delay: 500,
  output: "./portshot-output",
};

export default config;

Priority: CLI flags > config file > defaults.

Device Presets

You can also use category names (desktop, tablet, mobile) to select all devices in a category.

Output Structure

portshot-output/
  desktop/
    desktop-hd.png
  tablet/
    ipad-pro.png
  mobile/
    iphone-16.png

License

MIT — Impossible Solutions LLC