Repolode
Enviar
vercel

vercel/satori

Biblioteca avanzada para convertir HTML y CSS en SVG a partir de JSX, con un motor de maquetación propio.

Ver en GitHubSitio web
Estrellas
14,121
Forks
392
Issues abiertos
152
Último commit
anteayer

¿Qué es?

Satori recibe un árbol de elementos JSX o objetos simples similares a los de React, junto con los datos de las fuentes y el tamaño del canvas, y devuelve una cadena SVG. Implementa su propio motor de maquetación sobre Taffy para Flexbox, Grid y la disposición en bloques, y usa HarfBuzz para dar forma al texto. Así, el resultado busca coincidir con lo que renderizaría un navegador para el subconjunto de HTML y CSS compatible.

No es un motor de navegador completo. Los elementos y las propiedades CSS compatibles aparecen en una tabla de compatibilidad; las propiedades no compatibles se ignoran o generan un error, según el caso. Satori solo acepta componentes puros y sin estado, por lo que no se pueden usar hooks de React como useState. Las fuentes en formatos TTF, OTF, WOFF y WOFF2 deben proporcionarse explícitamente.

Para generar archivos PNG, se puede pasar el SVG a Sharp, que lo rasteriza con librsvg. El proyecto es el motor que utiliza Vercel para generar imágenes Open Graph.

Funciones clave

  • 01Convierte JSX u objetos similares a los de React en cadenas SVG
  • 02Maquetación con Flexbox, Grid y bloques mediante Taffy
  • 03Da forma al texto con HarfBuzz, incluidas las funciones OpenType y la escritura de derecha a izquierda
  • 04Compatible con fuentes TTF, OTF, WOFF y WOFF2
  • 05Compatibilidad con hojas de estilo, selectores y consultas @media y @container
  • 06Canvas WebGL y transformaciones de perspectiva experimentales

Casos de uso

  • Generar imágenes Open Graph y tarjetas para redes sociales de forma dinámica, durante la compilación o al recibir una solicitud
  • Renderizar gráficos con mucho texto como SVG para flujos de procesamiento de imágenes del lado del servidor
  • Generar imágenes PNG pasando la salida SVG por Sharp

Inicio rápido

  1. 1

    Instala el paquete satori desde npm (el fragmento del README no muestra el comando de instalación).

  2. 2

    Llama a satori() con un elemento JSX, width, height y fonts, como en el ejemplo de Overview.

Antes de usarlo

  • Solo se admite un subconjunto de HTML y CSS, y el resultado puede no coincidir exactamente con el renderizado del navegador.
  • Tiene licencia MPL-2.0, que exige compartir los cambios de código fuente de los archivos modificados.

Temas

#svg#image-generation#jsx#og-image#layout-engine#typescript#css#image#image-generator#opengraph-images

Preguntas frecuentes

¿Qué es satori?
Biblioteca avanzada para convertir HTML y CSS en SVG a partir de JSX, con un motor de maquetación propio. Satori recibe un árbol de elementos JSX o objetos simples similares a los de React, junto con los datos de las fuentes y el tamaño del canvas, y devuelve una cadena SVG. Implementa su propio motor de maquetación sobre Taffy para Flexbox, Grid y la disposición en bloques, y usa HarfBuzz para dar forma al texto. Así, el resultado busca coincidir con lo que renderizaría un navegador para el subconjunto de HTML y CSS compatible.
¿satori es gratuito? ¿Qué licencia tiene?
satori es open source bajo la licencia MPL-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿satori sigue mantenido?
Mantenimiento activo. El último commit de satori fue el 20 oct 2026.
¿Para qué puedo usar satori?
Generar imágenes Open Graph y tarjetas para redes sociales de forma dinámica, durante la compilación o al recibir una solicitud Renderizar gráficos con mucho texto como SVG para flujos de procesamiento de imágenes del lado del servidor Generar imágenes PNG pasando la salida SVG por Sharp
¿Cómo se instala satori?
Instala el paquete satori desde npm (el fragmento del README no muestra el comando de instalación). Llama a satori() con un elemento JSX, width, height y fonts, como en el ejemplo de Overview.
¿Dónde consigo satori?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/vercel/satori

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados