OG Image Generation
@vercel/og

@vercel/og Reference

Last updated July 18, 2025

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>  }, )

Main parameters

ParameterTypeDefaultDescription
elementReactElement—The React element to generate the image from.
optionsobject—Options to customize the image and HTTP response.

Options parameters

ParameterTypeDefaultDescription
widthnumber1200The width of the image.
heightnumber630The height of the image.
emojitwemoji blobmoji noto openmoji twemojiThe emoji set to use.
debugbooleanfalseDebug mode flag.
statusnumber200The HTTP status code for the response.
statusTextstring—The HTTP status text for the response.
headersRecord<string, string>—The HTTP headers for the response.

Fonts parameters (within options)

ParameterTypeDefaultDescription
namestring—The name of the font.
dataArrayBuffer—The font data.
weightnumber—The weight of the font.
stylenormal 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',

Supported HTML and CSS features

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.

Acknowledgements

Previous
OG Image Generation
Next
Examples

Was this helpful?