
# 

Generating OG Images

* * *

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[#](#code)

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

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

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

```
1import handler from './handler.tsx'23console.log('Hello from og-image Function!')45Deno.serve(handler)
```
