Skip to content
Table of Contents
Choose a framework to optimize documentation to:

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

The package exposes an ImageResponse constructor, with the following parameters:

ImageResponse Interface
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>
  },
)
Parameter
Type
Default
Description
element
ReactElement
The React element to generate the image from.
options
object
Options to customize the image and HTTP response.
Parameter
Type
Default
Description
width
number
1200
The width of the image.
height
number
630
The height of the image.
emoji
twemoji blobmoji noto openmoji twemoji
The emoji set to use.
debug
boolean
false
Debug mode flag.
status
number
200
The HTTP status code for the response.
statusText
string
The HTTP status text for the response.
headers
Record<string, string>
The HTTP headers for the response.
Parameter
Type
Default
Description
name
string
The name of the font.
data
ArrayBuffer
The font data.
weight
number
The weight of the font.
style
normal italic'
The style of the font.

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

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

See the code examples for implementation details.

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.

Last updated on March 3, 2023