Skip to content
Search...
⌘K
Last updated on March 3, 2023
2 min read

@vercel/og Reference

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

Supported HTML and CSS Features

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.

Acknowledgements