supabase/apps/docs/content/guides/functions/examples/og-image.mdx

---
id: 'examples-og-image'
title: 'Generating OG Images'
description: 'Generate Open Graph images with Deno and Supabase Edge Functions.'
video: 'https://www.youtube.com/v/jZgyOJGWayQ'
---

<YouTube id="jZgyOJGWayQ" title="Generating OG images with Edge Functions" />

Generate Open Graph images with Deno and Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/opengraph).

## Code

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

```tsx handler.tsx
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:

```ts index.ts
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) }
```