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:

1
import React from 'https://esm.sh/react@18.2.0'
2
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
3
4
export default function handler(req: Request) {
5
  return new ImageResponse(
6
    (
7
      <div
8
        style={{
9
          width: '100%',
10
          height: '100%',
11
          display: 'flex',
12
          alignItems: 'center',
13
          justifyContent: 'center',
14
          fontSize: 128,
15
          background: 'lavender',
16
        }}
17
      >
18
        Hello OG Image!
19
      </div>
20
    )
21
  )
22
}

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

1
import handler from './handler.tsx'
2
3
console.log('Hello from og-image Function!')
4
5
Deno.serve(handler)