---
title: "Satori Renderer"
description: "Learn how to use the Satori renderer."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/satori"
last_updated: "2026-05-06T18:45:56.356Z"
---

[Satori](https://github.com/vercel/satori) converts Vue components to SVG, then rasterizes to PNG via [resvg](https://github.com/yisibl/resvg-js). It has more CSS limitations than [Takumi](/docs/og-image/renderers/takumi).

<note>

For new projects, we recommend [Takumi](/docs/og-image/renderers/takumi) - it's 2-10x faster with more complete CSS support.

</note>

## Installation

<code-group>

```sh [pnpm]
# Node.js
pnpm i -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
pnpm i -D satori @resvg/resvg-wasm
```

```bash [yarn]
# Node.js
yarn add -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
yarn add -D satori @resvg/resvg-wasm
```

```bash [npm]
# Node.js
npm install -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
npm install -D satori @resvg/resvg-wasm
```

</code-group>

## Usage

The component filename suffix determines the renderer. Create your component with a `.satori.vue` suffix:

```bash
components/OgImage/MyTemplate.satori.vue
```

The module automatically detects the renderer from the filename - zero-config.

## Pros

- Fast rendering
- Works on all environments including edge runtimes
- Good CSS support (flexbox, fonts, colors, gradients)
- 11 emoji families supported
- Google Fonts integration

## Cons

- Some CSS limitations (see below)
- Requires learning Satori's constraints

## Limitations

It's important to familiarize yourself with Satori before you make more complex templates.

<warning>

Satori has CSS limitations. For complex templates, consider the [Browser renderer](/docs/og-image/renderers/browser).

</warning>

If you find Satori too difficult to work with, consider [Takumi](/docs/og-image/renderers/takumi) which has broader CSS support and better performance, or [Browser](/docs/og-image/renderers/browser) for full CSS support.

To learn more about the limitations and working around them, see:

- [Styling](/docs/og-image/guides/styling)
- [Icons and Images](/docs/og-image/guides/icons-and-images)