Screenshot Command

The smippo capture command takes screenshots of URLs without capturing the full site. Perfect for quick visual captures, social media previews, or testing.

Basic Usage

smippo capture <url> [options]

Simple Screenshot

Take a basic screenshot:

smippo capture https://example.com

This creates a PNG screenshot in the current directory with an auto-generated filename.

Specify Output File

Save to a specific file:

smippo capture https://example.com -O screenshot.png
smippo capture https://example.com -O ./screenshots/example.png

Full-Page Screenshots

Capture the entire scrollable page:

smippo capture https://example.com --full-page

Full-page screenshots can get very large for long pages. Consider using --selector to capture specific sections instead.

Device Emulation

Simulate different devices:

# iPhone 13
smippo capture https://example.com --device "iPhone 13"

# iPad Pro
smippo capture https://example.com --device "iPad Pro"

# Pixel 5
smippo capture https://example.com --device "Pixel 5"

# Desktop HD
smippo capture https://example.com --viewport 1920x1080

Available Devices

Smippo supports a wide range of device presets, including:

Mobile: iPhone 12/13/14, Pixel 5/6/7, Galaxy S21
Tablet: iPad Pro, iPad Mini, Galaxy Tab
Desktop: Various viewport sizes

Element Selection

Capture a specific element:

# Capture by CSS selector
smippo capture https://example.com --selector ".hero-section"

# Capture navigation
smippo capture https://example.com --selector "nav"

# Capture by ID
smippo capture https://example.com --selector "#main-content"

This is useful for:

Component screenshots for documentation
Capturing specific sections without scrolling
A/B testing visual comparisons

Image Format

PNG (Default)

smippo capture https://example.com --format png

PNG is lossless and supports transparency.

JPEG

smippo capture https://example.com --format jpeg --quality 90

JPEG produces smaller files but with compression artifacts. Use --quality (1-100) to control compression.

Transparent Background

For PNG screenshots, you can capture with a transparent background:

smippo capture https://example.com --no-background

Transparent background only works with PNG format and when the page itself has transparent areas.

Wait Options

Control when the screenshot is taken:

Wait Strategy

# Wait for network to idle (default)
smippo capture https://example.com --wait networkidle

# Wait for DOM content loaded
smippo capture https://example.com --wait domcontentloaded

# Wait for full load
smippo capture https://example.com --wait load

Additional Wait Time

Add extra time for animations or slow content:

# Wait 3 seconds after load
smippo capture https://example.com --wait-time 3000

Timeout

Set maximum wait time:

smippo capture https://example.com --timeout 60000  # 60 seconds

Dark Mode

Capture with dark color scheme:

smippo capture https://example.com --dark-mode

This emulates the user's prefers-color-scheme: dark preference.

Complete Examples

Mobile Screenshot Collection

# iPhone screenshot
smippo capture https://example.com --device "iPhone 13" -O iphone.png

# Android screenshot
smippo capture https://example.com --device "Pixel 5" -O android.png

# Tablet screenshot
smippo capture https://example.com --device "iPad Pro" -O tablet.png

Full Marketing Page

smippo capture https://example.com \
  --full-page \
  --format png \
  --viewport 1440x900 \
  --wait-time 2000 \
  -O marketing-page.png

Dark Mode Comparison

# Light mode
smippo capture https://example.com -O light.png

# Dark mode
smippo capture https://example.com --dark-mode -O dark.png

Component Documentation

# Capture button component
smippo capture https://example.com/components \
  --selector ".button-primary" \
  -O docs/button.png

# Capture form component
smippo capture https://example.com/components \
  --selector "form.contact" \
  -O docs/form.png

All Options

Option	Description	Default
`-O, --out <file>`	Output file path	Auto-generated
`-f, --full-page`	Capture full scrollable page	`false`
`--format <type>`	Image format: `png` or `jpeg`	`png`
`--quality <n>`	JPEG quality (1-100)	`80`
`--viewport <WxH>`	Viewport size	`1920x1080`
`--device <name>`	Device to emulate	None
`--selector <css>`	CSS selector for element	None
`--wait <strategy>`	Wait strategy	`networkidle`
`--wait-time <ms>`	Additional wait time	`0`
`--timeout <ms>`	Page load timeout	`30000`
`--dark-mode`	Use dark color scheme	`false`
`--no-background`	Transparent background	`false`
`-v, --verbose`	Verbose output	`false`
`-q, --quiet`	Minimal output	`false`

Next Steps

Capture Command — Full site mirroring
Serve Command — View captured sites
Device Emulation — All device options