From Satori
Migrate from Satori to Takumi with your existing components.
Takumi aims to create a universal image generation library that can be used in any environment and not just limited to JavaScript runtime.
We provide helper functions like fromJsx to bridge the gap between JSX and Takumi nodes without refactoring the codebase.
Takumi renders your nodes/components to rasterized images directly, we don't support rendering to SVG at this moment.
Installation
npm i @takumi-rs/core @takumi-rs/helpersMake sure to mark @takumi-rs/core as external if you are using a bundler like Vite or Webpack.
Code changes
- import satori from "satori";
- import { Resvg } from "@resvg/resvg-js";
+ import { fromJsx } from "@takumi-rs/helpers/jsx";
+ import { Renderer } from "@takumi-rs/core";
+ // You can use variable fonts with Takumi!
+ // Takumi comes with full axis Geist and Geist Mono by default,
+ // if this is what you want, you can just remove fonts array.
const fonts = [
{
name: "Inter",
data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
style: "normal",
weight: 400
}
];
function OgImage({ title }: { title: string }) {
return (
<div>
<h1>Hello from {title}!</h1>
</div>
);
}
+ const renderer = new Renderer({
+ fonts,
+ });
- const svg = await satori(<OgImage title="Satori" />, {
- fonts,
- });
- const png = new Resvg(svg).render().asPng();
+ const node = await fromJsx(<OgImage title="Takumi" />);
+ const png = await renderer.renderAsync(node, {
+ width: 1200,
+ height: 630,
+ format: "png", // "webp" is recommended too.
+ });Now you have Takumi setup!
If theres any issues or unexpected behavior, please open an issue on our GitHub repository.