Skip to content

@vercel/og only supports the Edge Runtime. The default Node.js runtime will not work.

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

pages/api/og.tsx
import { ImageResponse } from '@vercel/og'

// ...
new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = '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>
  },
)

By default, these headers will be included by @vercel/og:

included-headers

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

Review the code examples for implementation details.

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

By default, @vercel/og only has the Noto Sans font included. If you need to use other fonts, you can pass them in the fonts option. View the custom font example for more details.