vercel/satori

这是什么？

核心功能

• 01将 JSX 或类 React 对象转换为 SVG 字符串
• 02通过 Taffy 实现 Flexbox、Grid 和块级布局
• 03基于 HarfBuzz 的文字排版，支持 OpenType 特性和从右到左的文字
• 04支持 TTF、OTF、WOFF 和 WOFF2 字体
• 05支持样式表，包括选择器、@media 和 @container 查询
• 06提供实验性的 WebGL 画布和透视变换

适用场景

• 在构建或请求时动态生成 Open Graph 和社交卡片图片
• 在服务端图片流程中渲染以文字为主的 SVG 图形
• 结合 Sharp 将 SVG 输出为 PNG 图片

快速上手

1. 1

   从 npm 安装 satori 包（README 摘录中未给出安装命令）

2. 2

   按照概览示例，传入 JSX 元素、width、height 和 fonts 调用 satori()

使用前须知

• !仅支持部分 HTML 和 CSS，输出结果可能与浏览器渲染不完全一致。
• !采用 MPL-2.0 许可证，修改过的文件需要公开源代码。

标签

常见问题

satori 是什么？

将 HTML 和 CSS 转换为 SVG 的 JSX 渲染库，常用于生成社交分享图。 Satori 接收 JSX 元素树或类 React 的普通对象，加上字体数据和画布尺寸，输出 SVG 字符串。它基于 Taffy 实现 Flexbox、Grid 和块级布局，并借助 HarfBuzz 进行文字排版，目标是让支持范围内的 HTML 和 CSS 渲染结果尽量与浏览器一致。

satori 可以免费使用吗？用的什么许可证？

satori 以 MPL-2.0 许可证开源。用于商业产品前，请先确认许可证条款。

satori 还在维护吗？

活跃维护中。satori 最近一次提交是在 2026年10月20日。

satori 适合用来做什么？

在构建或请求时动态生成 Open Graph 和社交卡片图片 在服务端图片流程中渲染以文字为主的 SVG 图形 结合 Sharp 将 SVG 输出为 PNG 图片

satori 怎么安装和运行？

从 npm 安装 satori 包（README 摘录中未给出安装命令） 按照概览示例，传入 JSX 元素、width、height 和 fonts 调用 satori()

在哪里获取 satori？

源代码和安装说明在 GitHub 上：https://github.com/vercel/satori