Generating OG Images

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


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

import React from 'https://esm.sh/react@18.2.0'
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'

export default function handler(req: Request) {
  return new ImageResponse(
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 128,
          background: 'lavender',
        Hello OG Image!

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

import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
import handler from './handler.tsx'

console.log('Hello from og-image Function!')

Need some help?

Not to worry, our specialist engineers are here to help. Submit a support ticket through the Dashboard.