# Screenshot API (/docs/experiments/screenshot-api)



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

## API Reference [#api-reference]

### GET /screenshot [#get-screenshot]

Captures a PNG screenshot of the specified URL.

<TypeTable
  type="{
  url: {
    description: &#x22;The website URL to screenshot (must be http or https)&#x22;,
    type: &#x22;string&#x22;,
    required: true,
  },
}"
/>

#### Example Request [#example-request]

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

#### Success Response [#success-response]

Returns a PNG image with the following headers:

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

#### Error Response [#error-response]

**`error`** `string`

Human-readable error message

**`code`** `string`

Error code indicating the failure type

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

#### Error Codes [#error-codes]

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

## Implementation Details [#implementation-details]

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 Cases [#use-cases]

* 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

## Limitations [#limitations]

* 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`

## Deployment [#deployment]

<Steps>
  <Step>
    ### Click the deploy button [#click-the-deploy-button]

    [![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/shrinathsnayak/cloudflare-experiments/tree/main/apps/experiments/screenshot-api)
  </Step>

  <Step>
    ### Enable Browser Rendering [#enable-browser-rendering]

    This experiment requires Cloudflare Browser Rendering to be enabled on your account. Visit the [Browser Rendering docs](https://developers.cloudflare.com/browser-rendering/) for setup instructions.
  </Step>

  <Step>
    ### Deploy [#deploy]

    Follow the deployment wizard to deploy the Worker to your Cloudflare account.
  </Step>
</Steps>

## Local Development [#local-development]

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

<Callout>
  Use `--remote` flag to access a real browser instance. Local development without this flag will not work as Browser Rendering requires Cloudflare infrastructure.
</Callout>

Test locally:

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

## Cloudflare Features Used [#cloudflare-features-used]

* **[Workers](https://developers.cloudflare.com/workers/)** - Edge compute runtime
* **[Browser Rendering](https://developers.cloudflare.com/browser-rendering/)** - Headless Chromium via Puppeteer
* **[Fetch API](https://developers.cloudflare.com/workers/runtime-apis/fetch/)** - Network requests within the browser