Screenshot API

Capture screenshots of any website from Cloudflare's edge network using Browser Rendering and Puppeteer.

API ReferenceCopy Anchor Link

GET /screenshotCopy Anchor Link

Captures a PNG screenshot of the specified URL.

Example RequestCopy Anchor Link

curl "https://your-worker.workers.dev/screenshot?url=https://www.cloudflare.com" \
  --output screenshot.png

Success ResponseCopy Anchor Link

Returns a PNG image with the following headers:

Content-Type: image/png
Cache-Control: public, max-age=60

Error ResponseCopy Anchor Link

error string

Human-readable error message

code string

Error code indicating the failure type

{
  "error": "Missing or invalid query parameter: url",
  "code": "INVALID_URL"
}

Error CodesCopy Anchor Link

• 400 - Missing or invalid url parameter (not http/https)
• 502 - Screenshot operation failed (navigation timeout, unreachable site, rendering error)

Implementation DetailsCopy Anchor Link

The API uses the following configuration:

• Viewport: 1280x800 pixels
• Wait condition: networkidle0 (waits until network is idle)
• Navigation timeout: 20 seconds
• Image format: PNG

Use CasesCopy Anchor Link

• Capture visual snapshots of web pages from the edge
• Generate thumbnails or previews for link-sharing tools
• Archive how a page looked at a point in time
• Learn Browser Rendering with Puppeteer on Workers

LimitationsCopy Anchor Link

• Requires Browser Rendering enabled on your Cloudflare account
• Fixed 1280×800 viewport; no custom dimensions in this experiment
• 20-second navigation timeout; networkidle0 may fail on busy sites
• Local development needs npx wrangler dev --remote

Use in your projectCopy Anchor Link

import { ALLOWED_SCHEMES } from "../constants/defaults";export function validateUrl(input: string | undefined): string | null {  if (!input || typeof input !== "string") return null;  const trimmed = input.trim();  if (!trimmed) return null;  try {    const url = new URL(trimmed);    if (!ALLOWED_SCHEMES.includes(url.protocol as (typeof ALLOWED_SCHEMES)[number])) {      return null;    }    return url.href;  } catch {    return null;  }}

DeploymentCopy Anchor Link

Local DevelopmentCopy Anchor Link

cd apps/experiments/screenshot-api
npm install
npx wrangler dev --remote

Test locally:

curl "http://localhost:8787/screenshot?url=https://www.cloudflare.com" \
  --output test.png

Cloudflare Features UsedCopy Anchor Link

• Workers - Edge compute runtime
• Browser Rendering - Headless Chromium via Puppeteer
• Fetch API - Network requests within the browser