Integration Guide

Cloudflare Workers + ShotLayer

Capture screenshots from Cloudflare Workers with a single fetch call. No Puppeteer, no Browser Rendering API quota, no headless browser dependencies.

Create a new Worker

Scaffold a new Cloudflare Worker project using the Wrangler CLI:

npm create cloudflare@latest shotlayer-screenshot -- --type=hello-world
cd shotlayer-screenshot

Add your API key as a secret

Store your ShotLayer API key as a Cloudflare secret so it's available at runtime:

npx wrangler secret put SHOTLAYER_API_KEY

Tip

Get a free API key at shotlayer.dev -- no credit card required.

Write the Worker

Replace the default worker code with a screenshot proxy that calls ShotLayer:

src/index.ts

export interface Env {
  SHOTLAYER_API_KEY: string;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const targetUrl = url.searchParams.get('url');

    if (!targetUrl)
      return new Response(
        'Missing url parameter', { status: 400 }
      );

    const response = await fetch(
      `https://api.shotlayer.dev/v1/screenshot?url=${encodeURIComponent(targetUrl)}`,
      {
        headers: {
          'Authorization': `Bearer ${env.SHOTLAYER_API_KEY}`,
        },
      }
    );

    return new Response(response.body, {
      headers: {
        'Content-Type': 'image/png',
        'Cache-Control': 'public, max-age=3600',
      },
    });
  },
};

Configure wrangler.toml

Make sure your wrangler.toml is set up with the correct settings:

wrangler.toml

name = "shotlayer-screenshot"
main = "src/index.ts"
compatibility_date = "2024-01-01"

Deploy and test

Deploy your Worker and test it with a simple curl command:

# Deploy
npx wrangler deploy

# Test it
curl "https://shotlayer-screenshot.your-subdomain.workers.dev/?url=https://example.com" \
  -o screenshot.png

Why ShotLayer over Browser Rendering API?

Cloudflare's Browser Rendering API requires a paid Workers plan and has limited concurrency. ShotLayer works on any plan, handles the browser infrastructure for you, and scales automatically.

Start capturing screenshots from Workers

Get a free API key and deploy your Worker in under 5 minutes.

Get API Key Free →

More integration guides

Next.js OG Images Dynamic OG images in 5 minutes Vercel Edge Functions Low-latency screenshots at the edge Supabase Edge Functions Screenshots for your Supabase app