@vercel/og Reference

This reference provides information on how the @vercel/og package works on Vercel.
Table of Contents

@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>
elementReactElementThe React element to generate the image from.
optionsobjectOptions to customize the image and HTTP response.
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.
statusTextstringThe HTTP status text for the response.
headersRecord<string, string>The HTTP headers for the response.
namestringThe name of the font.
dataArrayBufferThe font data.
weightnumberThe weight of the font.
stylenormal italic'The style of the font.

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

'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 February 22, 2024