NuxtSEO
You're viewing OG Image v6 beta documentation. For stable docs, switch to v5. Release Notes
Renderers

Satori Renderer

Last updated by Harlan Wilton in feat!: rename chromium renderer to browser, add cloudflare support (#461) * feat!: rename chromium renderer to browser, add cloudflare support BREAKING CHANGES: - Renamed `chromium` renderer to `browser` - Component suffix `.chromium.vue` → `.browser.vue` - Config `chromium: 'playwright'` → `browser: { provider: 'playwright' }` - Internal: `useChromiumRenderer()` → `useBrowserRenderer()` New features: - Cloudflare Browser Rendering support via `@cloudflare/puppeteer` - New config: `browser: { provider: 'cloudflare', binding: 'BROWSER' }` - Auto-fallback for cloudflare provider: chrome-launcher (dev), playwright (prerender), cloudflare (runtime) - Playwright/Puppeteer API compatibility layer in screenshot.ts * docs: add chromium→browser migration and cloudflare support docs - Add chromium→browser rename section to v6 migration guide - Document cloudflare browser rendering setup in browser renderer docs - Add configuration examples for cloudflare provider * fix: resolve type errors for browser renderer refactor - Update ProviderName type: 'chromium' → 'browser' in dependencies.ts - Add BrowserConfig import and browser property to ModuleOptions - Update createBrowser type declaration to accept optional H3Event - Fix cloudflare binding to use lazy-loaded puppeteer with local types - Fix colorPreference comparison (remove impossible 'no-preference' check) - Update defineOgImageScreenshot renderer to 'browser' - Update client/pages/index.vue chromium → browser in templates * chore: remove working files that should not be committed.

Nuxt OG Image uses Satori as the default renderer. It converts Vue components to SVG, then rasterizes to PNG.

Installation

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

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

Usage

The renderer is determined by the component filename suffix. Create your component with a .satori.vue suffix:

components/OgImage/MyTemplate.satori.vue

The module automatically detects the renderer from the filename — no configuration needed.

Pros

  • Fast rendering
  • Works on all environments including edge runtimes
  • Good CSS support (flexbox, fonts, colors, gradients)
  • 6 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.

If you find Satori too difficult to work with, you can use Takumi for simpler templates or Browser for full CSS support.

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

Edit this page
Markdown For LLMs
Did this page help you?

Overview

Choose the right renderer for your OG images.

Takumi Renderer

Learn how to use the Takumi renderer for faster OG image generation.