vercel/satori

これは何？

主な機能

• 01JSXまたはReact風のオブジェクトをSVG文字列に変換
• 02TaffyによるFlexbox、Grid、ブロックレイアウト
• 03OpenType機能や右から左へのテキストに対応した、HarfBuzzによるテキスト整形
• 04TTF、OTF、WOFF、WOFF2形式のフォントに対応
• 05セレクター、@media、@containerクエリに対応したスタイルシート
• 06実験的なWebGLキャンバスと遠近変換

ユースケース

• ビルド時またはリクエスト時に、動的なOpen Graph画像やソーシャルカード画像を生成
• テキスト量の多いグラフィックをSVGとしてレンダリングし、サーバーサイドの画像処理パイプラインで利用
• SVG出力をSharpに渡してPNG画像を生成

クイックスタート

1. 1

   npm から satori パッケージをインストールします（README の抜粋にはインストールコマンドが記載されていません）。

2. 2

   Overview の例のように、JSX 要素、width、height、fonts を指定して satori() を呼び出します。

使う前に知っておきたいこと

• !HTML と CSS は一部のみサポートされており、出力はブラウザーでのレンダリングと完全には一致しない場合があります。
• !MPL-2.0 ライセンスの下で提供されており、変更したファイルのソース変更を共有する必要があります。

トピック

よくある質問

satori とは？

JSX入力と独自のレイアウトエンジンでHTMLとCSSをSVGに変換するライブラリ。 Satoriは、JSX要素ツリーまたはReact風のプレーンなオブジェクトに、フォントデータとキャンバスサイズを指定すると、SVG文字列を返します。Taffyを基盤にFlexbox、Grid、ブロックレイアウトを処理する独自のレイアウトエンジンを実装し、テキスト整形にはHarfBuzzを使用します。そのため、対応するHTMLとCSSの範囲では、ブラウザーで描画した場合に近い出力を目指しています。

satori は無料で使えますか？ライセンスは？

satori は MPL-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

satori は今もメンテナンスされていますか？

活発にメンテナンス中。satori の最終コミットは 2026年10月20日 です。

satori は何に使えますか？

ビルド時またはリクエスト時に、動的なOpen Graph画像やソーシャルカード画像を生成 テキスト量の多いグラフィックをSVGとしてレンダリングし、サーバーサイドの画像処理パイプラインで利用 SVG出力をSharpに渡してPNG画像を生成

satori のインストール方法は？

npm から satori パッケージをインストールします（README の抜粋にはインストールコマンドが記載されていません）。 Overview の例のように、JSX 要素、width、height、fonts を指定して satori() を呼び出します。

satori はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/vercel/satori