Satori Renderer

Satori converts Vue components to SVG, then rasterizes to PNG via resvg. It has more CSS limitations than Takumi.

Installation

Satori 0.47.1 or later is required. If you upgrade from v6, follow the Satori migration notes.

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

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

# Node.js
yarn add -D satori @resvg/resvg-js

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

# Node.js
npm install -D satori @resvg/resvg-js

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

Usage

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

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
• CSS support includes block, inline, flexbox, grid, transforms, and 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.

If you find Satori too difficult to work with, consider Takumi which has broader CSS support and better performance, or Browser for full CSS support.

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

• Styling
• Icons and Images