From Satori

Takumi aims to create a universal image generation library that can be used in any environment and not just limited to JavaScript runtime.

If you are migrating from next/og, check out the From Next.js ImageResponse guide instead.

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/helpers

Make 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" as const,
    weight: 400
  }
];

const svg = await satori(<OgImage title="Satori" />, {
  fonts,
});
const buffer = new Resvg(svg).render().asPng();

const renderer = new Renderer({
  fonts,
});

const node = await fromJsx(<OgImage title="Takumi" />);
const png = await renderer.render(node, {
  width: 1200,
  height: 630,
  format: "png", // "webp" is recommended as well.
});

function OgImage({ title }: { title: string }) {
  return (
    <div>
      <h1>Hello from {title}!</h1>
    </div>
  );
}

Now you have Takumi setup!

If theres any issues or unexpected behavior, please open an issue on our GitHub repository.

Installation

Code changes

On this page