Screenshot API

Capture full-page screenshots of any URL. Choose from basic HTTP rendering, full browser rendering, or design-analysis mode — which also extracts the page's color palette, layout structure, and typography.

POST /v1/screenshot

POST https://api.webpeel.dev/v1/screenshot
Authorization: Bearer wp_live_xxxx
Content-Type: application/json

{
  "url": "https://example.com",
  "mode": "browser",
  "fullPage": true,
  "format": "png"
}

Parameters

Parameter	Type	Default	Description
`url`	string	required	The URL to capture
`mode`	string	`browser`	Capture mode: `basic`, `browser`, or `design-analysis`
`fullPage`	boolean	`false`	Capture the full scrollable page (not just the viewport)
`format`	string	`png`	Image format: `png` or `jpeg`
`width`	number	`1280`	Viewport width in pixels
`height`	number	`800`	Viewport height in pixels

Mode Options

Mode	Description
`basic`	Fast HTTP-only render. No JavaScript execution. Good for static pages.
`browser`	Full Chromium render with JavaScript. Works on SPAs, React, Vue apps.
`design-analysis`	Browser render + extracts color palette, layout structure, and typography details. Returns a `design` object in the response.

Design Analysis Mode

Use mode: "design-analysis" to extract the visual design system of any page alongside the screenshot. Useful for competitive analysis, brand audits, or feeding design context to an AI.

POST https://api.webpeel.dev/v1/screenshot
Authorization: Bearer wp_live_xxxx
Content-Type: application/json

{
  "url": "https://stripe.com",
  "mode": "design-analysis",
  "fullPage": false
}

Response Format

Basic / Browser mode

{
  "image": "data:image/png;base64,iVBORw0KGgo...",
  "url": "https://example.com",
  "elapsed": 1240,
  "width": 1280,
  "height": 800
}

Design Analysis mode

{
  "image": "data:image/png;base64,iVBORw0KGgo...",
  "url": "https://stripe.com",
  "elapsed": 2100,
  "width": 1280,
  "height": 800,
  "design": {
    "palette": ["#635BFF", "#0A2540", "#FFFFFF", "#F6F9FC", "#425466"],
    "fonts": ["Sohne", "Inter", "system-ui"],
    "layout": "single-column hero with 3-column feature grid",
    "primaryColor": "#635BFF",
    "backgroundColor": "#FFFFFF"
  }
}

Field	Description
`image`	Base64-encoded image (data URL)
`url`	Final URL after redirects
`elapsed`	Capture time in milliseconds
`design.palette`	Top 5 colors as hex codes
`design.fonts`	Font families detected on the page
`design.layout`	Plain-English layout description
`design.primaryColor`	Dominant brand color
`design.backgroundColor`	Primary background color

Code Examples

curl — Full-page PNG

curl -X POST "https://api.webpeel.dev/v1/screenshot" \
  -H "Authorization: Bearer wp_live_xxxx" \
  -H "Content-Type: application/json" \
  -d '{"url":"https://example.com","mode":"browser","fullPage":true}'

Node.js — Design analysis

const response = await fetch('https://api.webpeel.dev/v1/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer wp_live_xxxx',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://linear.app',
    mode: 'design-analysis',
    fullPage: false,
    width: 1440
  })
});

const data = await response.json();
console.log('Colors:', data.design.palette);
console.log('Fonts:', data.design.fonts);

Python — Save screenshot to file

import requests, base64

response = requests.post(
    'https://api.webpeel.dev/v1/screenshot',
    headers={'Authorization': 'Bearer wp_live_xxxx'},
    json={
        'url': 'https://example.com',
        'mode': 'browser',
        'fullPage': True,
        'format': 'png'
    }
)
data = response.json()

# Strip the data URL prefix and decode
img_data = data['image'].split(',')[1]
with open('screenshot.png', 'wb') as f:
    f.write(base64.b64decode(img_data))

print(f"Saved screenshot in {data['elapsed']}ms")

Advanced Screenshot Endpoints

WebPeel offers several advanced screenshot capabilities beyond basic capture:

Filmstrip — Capture loading sequence frames
Multi-Viewport — Capture at multiple screen sizes simultaneously
Visual Diff — Compare before/after screenshots
Design Audit — Automated design quality checks
Design Analysis — Extract colors, fonts, and layout data
Animation Capture — Record animated screenshots

→ Full Advanced Screenshots documentation