Repolode
Enviar
vercel

vercel/satori

Biblioteca para converter HTML e CSS em SVG usando entrada JSX e um mecanismo de layout próprio.

Ver no GitHubSite
Estrelas
14,121
Forks
392
Issues abertas
152
Último commit
anteontem

O que é?

Satori recebe uma árvore de elementos JSX ou objetos simples no estilo React, além de dados de fontes e do tamanho do canvas, e retorna uma string SVG. Ele implementa seu próprio mecanismo de layout sobre o Taffy para Flexbox, Grid e layout em blocos, e usa HarfBuzz para o shaping de texto. Assim, a saída busca corresponder ao que um navegador renderizaria para o subconjunto de HTML e CSS compatível.

Satori não é um mecanismo de navegador completo. Os elementos e as propriedades CSS compatíveis estão listados em uma tabela de compatibilidade; propriedades sem suporte são ignoradas ou geram erros, dependendo do caso. Satori aceita apenas componentes puros e sem estado, portanto hooks do React, como useState, não estão disponíveis. É necessário fornecer explicitamente fontes nos formatos TTF, OTF, WOFF e WOFF2.

Para gerar arquivos PNG, o SVG pode ser enviado ao Sharp, que o rasteriza com o librsvg. O projeto é o mecanismo por trás da geração de imagens Open Graph da Vercel.

Recursos principais

  • 01Converte JSX ou objetos no estilo React em strings SVG
  • 02Layout Flexbox, Grid e em blocos por meio do Taffy
  • 03Shaping de texto com HarfBuzz, incluindo recursos OpenType e texto da direita para a esquerda
  • 04Suporte a fontes TTF, OTF, WOFF e WOFF2
  • 05Suporte a folhas de estilo com seletores e consultas @media e @container
  • 06Canvas WebGL experimental e transformações de perspectiva

Casos de uso

  • Gerar imagens dinâmicas Open Graph e cards para redes sociais no build ou no momento da requisição
  • Renderizar gráficos com muito texto como SVG em pipelines de imagens no servidor
  • Gerar imagens PNG passando a saída SVG pelo Sharp

Início rápido

  1. 1

    Instale o pacote satori pelo npm (o trecho do README não mostra o comando de instalação).

  2. 2

    Chame satori() com um elemento JSX, width, height e fonts, como no exemplo de Overview.

Antes de usar

  • Apenas um subconjunto de HTML e CSS é compatível, e o resultado pode não corresponder exatamente à renderização do navegador.
  • Licenciado sob MPL-2.0, que exige o compartilhamento das alterações no código-fonte dos arquivos modificados.

Tópicos

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

Perguntas frequentes

O que é satori?
Biblioteca para converter HTML e CSS em SVG usando entrada JSX e um mecanismo de layout próprio. Satori recebe uma árvore de elementos JSX ou objetos simples no estilo React, além de dados de fontes e do tamanho do canvas, e retorna uma string SVG. Ele implementa seu próprio mecanismo de layout sobre o Taffy para Flexbox, Grid e layout em blocos, e usa HarfBuzz para o shaping de texto. Assim, a saída busca corresponder ao que um navegador renderizaria para o subconjunto de HTML e CSS compatível.
satori é gratuito? Qual é a licença?
satori é open source sob a licença MPL-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
satori ainda é mantido?
Manutenção ativa. O último commit de satori foi em 20 de out. de 2026.
Para que posso usar satori?
Gerar imagens dinâmicas Open Graph e cards para redes sociais no build ou no momento da requisição Renderizar gráficos com muito texto como SVG em pipelines de imagens no servidor Gerar imagens PNG passando a saída SVG pelo Sharp
Como instalar satori?
Instale o pacote satori pelo npm (o trecho do README não mostra o comando de instalação). Chame satori() com um elemento JSX, width, height e fonts, como no exemplo de Overview.
Onde consigo satori?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/vercel/satori

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados