Home

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:

handler.tsx

_22
import React from 'https://esm.sh/react@18.2.0'
_22
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
_22
_22
export default function handler(req: Request) {
_22
return new ImageResponse(
_22
(
_22
<div
_22
style={{
_22
width: '100%',
_22
height: '100%',
_22
display: 'flex',
_22
alignItems: 'center',
_22
justifyContent: 'center',
_22
fontSize: 128,
_22
background: 'lavender',
_22
}}
_22
>
_22
Hello OG Image!
_22
</div>
_22
)
_22
)
_22
}

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

index.ts

_10
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
_10
import handler from './handler.tsx'
_10
_10
console.log('Hello from og-image Function!')
_10
_10
serve(handler)

© Supabase Inc—ContributingAuthor StyleguideOpen SourceSupaSquad