Integration Guide

Supabase Edge Functions + ShotLayer

Generate screenshots from Supabase Edge Functions using Deno. Send a URL and dimensions, get back a PNG -- perfect for thumbnails, previews, and social images in your Supabase-powered app.

Create the Edge Function

Scaffold a new Supabase Edge Function using the CLI:

supabase functions new screenshot

Write the function

Replace the default function code with a screenshot handler that accepts a JSON body with url, width, and height parameters:

supabase/functions/screenshot/index.ts

import { serve } from 'https://deno.land/std/http/server.ts';

serve(async (req) => {
  const { url, width, height } = await req.json();

  if (!url)
    return new Response(
      JSON.stringify({ error: 'url required' }),
      {
        status: 400,
        headers: { 'Content-Type': 'application/json' },
      }
    );

  const params = new URLSearchParams({ url });
  if (width) params.set('width', String(width));
  if (height) params.set('height', String(height));

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

  return new Response(response.body, {
    headers: {
      'Content-Type': 'image/png',
    },
  });
});

Set your API key and deploy

Add your ShotLayer API key as a secret and deploy the function in a single command:

supabase secrets set SHOTLAYER_API_KEY=your_key_here
supabase functions deploy screenshot

Tip

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

Call it from your app

Invoke the edge function from your frontend or backend using the Supabase client:

your-app.ts

const { data, error } = await supabase.functions
  .invoke('screenshot', {
    body: {
      url: 'https://example.com',
      width: 1280,
      height: 720,
    },
  });

// data is a Blob containing the PNG image
const imageUrl = URL.createObjectURL(data);

Use case

This is perfect for generating link previews, PDF thumbnails, or social images and storing them in Supabase Storage alongside your other assets.

Add screenshots to your Supabase app

Get a free API key and deploy your edge function in 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 Cloudflare Workers Screenshots without Puppeteer