Skip to content
Edge Functions

Generating OG Images

Generate Open Graph images with Deno and Supabase Edge Functions. View on GitHub.

Code#

Create a handler.tsx file to construct the OG image in React:

import { ImageResponse } from 'npm:@vercel/og@^0'
import React from 'npm:react@^19'
export default function handler(req: Request) {
  return new ImageResponse(
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 128,
        background: 'lavender',
      }}
    >
      Hello OG Image!
    </div>
  )
}

Create an index.ts file to execute the handler on incoming requests:

import { withSupabase } from 'npm:@supabase/server@^1'
import handler from './handler.tsx'
console.log('Hello from og-image Function!')
// Public image endpoint, so deploy with --no-verify-jwt.
export default { fetch: withSupabase({ auth: 'none' }, handler) }