Open Graph Image Generation

Generate Open Graph images with Deno and Netlify Edge Functions. This is a fork of the awesome @vercel/og, ported to run on Deno.

Usage

To use on Netlify, create the following Edge Function:

// /netlify/edge-functions/og.tsx

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

export default async function handler(req: Request) {
    return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 128,
          background: 'lavender',
        }}
      >
        Hello!
      </div>
    )
  )
}

Then create a netlify.toml file with the following:

[[edge_functions]]
function = "og"
path = "/og"

Then run netlify dev and load http://localhost:8888/og, the React element will be rendered and responded as a PNG.

To use with the Deno CLI or Deno Deploy, create a file with the following:

// /og.tsx

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import React from "https://esm.sh/react@18.2.0";
import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'

async function handler(req: Request) {
    return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 128,
          background: 'lavender',
        }}
      >
        Hello!
      </div>
    )
  )
}

serve(handler);

Then run deno run --allow-net=:8000 --allow-env og.tsx

Read more about the API, supported features and check out the examples in the following sections.

API Reference

The package exposes an ImageResponse constructor, with the following options available:

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

// ...
new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false

    // Options that will be passed to the HTTP response
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

When running in production, these headers will be included by og_edge:

'content-type': 'image/png',
'cache-control': 'public, immutable, no-transform, max-age=31536000',

During development, the cache-control: no-cache, no-store header is used instead.

Supported HTML and CSS Features

Please refer to Satori’s documentation for a list of supported HTML and CSS features.

By default, og_edge only has the Noto Sans font included. If you need to use other fonts, you can pass them in the fonts option. Check the Custom Font example below for more details.

Examples

Embed SVG Image · source · demo
Dynamic PNG Image Based on URL Queries · source · demo
Custom Font · source · demo
Emoji · source · demo
Languages · source · demo

Development / Contributing

Acknowledgements

Basically all of the credit for this goes to shuding. I just ported it to Deno and added a few tweaks.