Satori

Qué es

Satori es una librería open source creada por Vercel que convierte marcado HTML y CSS (escrito como JSX) en imágenes SVG. Usa el motor de layout Yoga (el mismo de React Native) para calcular posiciones con Flexbox y genera el resultado sin necesidad de un navegador headless. Está escrita en TypeScript y es la tecnología que impulsa la generación de imágenes Open Graph de Vercel.

Para qué sirve

• Generar imágenes Open Graph dinámicas para previsualizaciones en redes sociales.
• Crear cards, banners o imágenes a partir de plantillas HTML/CSS en el servidor o en el edge.
• Producir SVG a partir de JSX sin depender de Puppeteer ni de un navegador.
• Renderizar texto multilingüe, emojis e imágenes dentro de las gráficas generadas.

Cuándo usarlo

Es ideal cuando necesitas generar imágenes de forma programática y rápida (por ejemplo OG images por petición) y quieres evitar el coste de arrancar un navegador headless como Puppeteer. Encaja muy bien en entornos serverless y edge. Si solo necesitas un PNG final, suele combinarse con resvg para rasterizar el SVG; en Next.js esa combinación viene empaquetada en @vercel/og.

Ejemplo

Instalación:

npm install satori

Uso básico generando un SVG a partir de JSX:

import satori from 'satori'

const svg = await satori(
  <div style={{ color: 'black', display: 'flex' }}>hola, mundo</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        data: robotoArrayBuffer,
        weight: 400,
        style: 'normal',
      },
    ],
  }
)

Puntos clave

• No requiere navegador headless: calcula el layout con Yoga (WASM) y produce SVG directamente.
• Acepta JSX sin estado (sin hooks de React) y un subconjunto de CSS: Flexbox, tipografía, transforms, fondos, máscaras y gradientes.
• Funciona en navegador, Node.js (16 o superior) y Web Workers, con soporte de fuentes TTF, OTF y WOFF, emojis y texto multilingüe.

Ten en cuenta

Satori solo implementa un subconjunto de CSS centrado en Flexbox, así que no admite todo el modelo de layout de un navegador (por ejemplo, grid). Hay que proporcionar siempre las fuentes manualmente. La salida es un SVG: si necesitas PNG deberás rasterizarlo aparte (con resvg) o usar @vercel/og, que ya integra ese paso. El proyecto se distribuye bajo licencia MPL-2.0 y se mantiene de forma activa.