Skip to content
Last updated on March 3, 2023
2 min read

@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:


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:


'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.