# @vercel/og
> Generate Open Graph Images dynamically from HTML/CSS without a browser
Latest version **1.0.3** (published 2026-09-22) · MPL-2.0 license · 0 weekly downloads
## Install
```sh
npm install @vercel/og
pnpm add @vercel/og
yarn add @vercel/og
bun add @vercel/og
```
## Health
**Score 65/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2026-09-22 |
| First published | 2022-07-06 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 2 |
| Unpacked size | 7.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | matheuss, matt.straka, vercel-release-bot, zeit-bot |
| Keywords | open graph image, open graph, og image, og:image, social, card, image |
## Links
- npm: https://www.npmjs.com/package/@vercel/og
- Repository: https://github.com/vercel/og
- Homepage: https://github.com/vercel/og#readme
- Issues: https://github.com/vercel/og/issues
- npm.io page: https://npm.io/package/@vercel/og
## Dependencies (2)
- [satori](https://npm.io/package/satori.md) 0.33.5
- [@resvg/resvg-wasm](https://npm.io/package/@resvg/resvg-wasm.md) 2.4.1
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2026-09-22
- 0.2.0-beta.0 (beta) — 2023-02-07
- 1.0.2 — 2026-08-24
- 1.0.1 — 2026-08-08
- 0.11.1 — 2026-03-05
- 0.11.0 — 2026-03-04
- 0.10.1 — 2026-03-03
- 0.10.0 — 2026-03-02
- 0.9.0 — 2026-02-24
- 0.8.6 — 2025-12-15
- 0.8.5 — 2025-07-24
- 0.8.4 — 2025-07-23
- 0.8.3 — 2025-07-23
- 0.8.2 — 2025-07-22
- 0.8.1 — 2025-07-21
- … 79 more at https://npm.io/package/@vercel/og/versions
## README
# Open Graph Image Generation
Generate Open Graph images with Vercel’s API route functions
## Quick Start
Install `@vercel/og`, then use it inside an API route in your Next.js project:
```jsx
// /pages/api/og.jsx
import { ImageResponse } from '@vercel/og'
export default function () {
return new ImageResponse(
(
Hello!
)
)
}
```
Then run `next dev` and access localhost:3000/api/og, the React element will be rendered and responded as a PNG from that endpoint:
Read more about the API, supported features and check out the examples in the following sections.
## API Reference
`@vercel/og` supports both [Node.js Runtime](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js) and [Edge Runtime](https://vercel.com/docs/concepts/functions/edge-functions/edge-runtime).
The package exposes an `ImageResponse` constructor, with the following options available:
```jsx
import { ImageResponse } from '@vercel/og'
// ...
new ImageResponse(
element: ReactElement,
options: {
width?: number = 1200
height?: number = 630
emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = '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
},
)
```
When running in production, these headers will be included by `@vercel/og`:
```jsx
'content-type': 'image/png',
'cache-control': 'public, immutable, no-transform, max-age=31536000',
```
During development, the `cache-control: no-cache, no-store` header is used instead.
### Supported HTML and CSS Features
Please refer to [Satori’s documentation](https://github.com/vercel/satori#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. Check the **Custom Font** example below for more details.
## Examples
- Basic · [_source_](/examples/next/pages/api/vercel.tsx) · [_demo_](https://og-examples.vercel.sh/api/vercel)
- Embed SVG Image · [_source_](/examples/next/pages/api/image-svg.tsx) · [_demo_](https://og-examples.vercel.sh/api/image-svg)
- Dynamic PNG Image Based on URL Queries · [_source_](/examples/next/pages/api/dynamic-image.tsx) · [_demo_](https://og-examples.vercel.sh/api/dynamic-image?username=vercel)
- Fetch External Data · [_source_](/examples/next/pages/api/external-data.tsx) · [_demo_](https://og-examples.vercel.sh/api/external-data?username=rauchg)
- Custom Font · [_source_](/examples/next/pages/api/custom-font.tsx) · [_demo_](https://og-examples.vercel.sh/api/custom-font)
- Emoji · [_source_](/examples/next/pages/api/emoji.tsx) · [_demo_](https://og-examples.vercel.sh/api/emoji)
- Languages · [_source_](/examples/next/pages/api/language.tsx) · [_demo_](https://og-examples.vercel.sh/api/language)
- Encrypted Token · [_source_](/examples/next/pages/api/encrypted.tsx) · [_demo_](https://og-examples.vercel.sh/encrypted/a)
## Development / Contributing
### Playground
- `pnpm i` inside the `playground/` directory
- `pnpm dev` to start the Next.js app
### Package
- `pnpm i` inside the root directory
- `pnpm build` to build the library
## Acknowledgements
This project will not be possible without the following projects:
- [Satori](https://github.com/vercel/satori)
- [Twemoji](https://github.com/twitter/twemoji)
- [Google Fonts](https://fonts.google.com) and [Noto Sans](https://www.google.com/get/noto/)
- [Resvg](https://github.com/RazrFalcon/resvg) and [Resvg.js](https://github.com/yisibl/resvg-js)
---
---
_Source: https://npm.io/package/@vercel/og · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._