---
title: "Satori Renderer · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/satori"
last_updated: "2026-08-16T09:55:40.219Z"
meta:
  description: "Learn how to use the Satori renderer."
  "og:description": "Learn how to use the Satori renderer."
  "og:title": "Satori Renderer · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Renderers**

# **Satori Renderer**

[**~~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~~**](https://nuxtseo.com/docs/og-image/renderers/takumi).

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

## Installation

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

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

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

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

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

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

- [**~~Styling~~**](https://nuxtseo.com/docs/og-image/guides/styling)
- [**~~Icons and Images~~**](https://nuxtseo.com/docs/og-image/guides/icons-and-images)

**Was this page helpful?**

### **Related **

[**Takumi Renderer**](https://nuxtseo.com/docs/og-image/renderers/takumi)

[**Styling**](https://nuxtseo.com/docs/og-image/guides/styling)

[**Icons and Images**](https://nuxtseo.com/docs/og-image/guides/icons-and-images)

[**Takumi Renderer** The recommended renderer for OG image generation - 2-10x faster with comprehensive CSS support.](https://nuxtseo.com/docs/og-image/renderers/takumi) [**Browser Renderer** Learn how, when and why to use the Browser renderer.](https://nuxtseo.com/docs/og-image/renderers/browser)