From satori & next/og

satori turns JSX into an SVG string. next/og pairs an older satori with resvg to return a PNG. Takumi renders the same JSX to images, SVG, and more.

To switch, follow Migrate from satori or Migrate from next/og. To compare first, read How Takumi differs and Features.

Migrate from satoriCopy Anchor Link

renderSvg replaces satori(). It takes JSX and returns an SVG string. The built-in Latin font makes fonts optional.

import satori from "satori"; 
import { renderSvg } from "takumi-js"; 

const svg = await satori(<div style={{ display: "flex" }}>Hello</div>, { 
const svg = await renderSvg(<div style={{ display: "flex" }}>Hello</div>, { 
  width: 1200,
  height: 630,
  fonts: [{ name: "Inter", data: interBytes, weight: 400, style: "normal" }], 
});

For a bitmap, skip the SVG step. render returns encoded bytes in one call.

import { render } from "takumi-js";

const png = await render(<div tw="w-full h-full flex items-center justify-center">Hello</div>, {
  width: 1200,
  height: 630,
});

Migrate from next/ogCopy Anchor Link

ImageResponse follows the next/og API, including the emoji option. Swap the import.

import { ImageResponse } from "next/og"; 
import { ImageResponse } from "takumi-js/response"; 

export function GET() {
  return new ImageResponse(<div tw="w-full h-full flex items-center justify-center">Hello</div>, {
    width: 1200,
    height: 630,
  });
}

The Next.js guide covers the route handler setup.

FontsCopy Anchor Link

satori throws without a fonts entry. Takumi ships Geist (Latin, weights 300 to 800) as a last-resort font, so Latin text renders with no setup.

For other scripts, googleFonts loads families in one call. fonts also takes raw bytes, descriptors, or URL strings.

import { render } from "takumi-js";
import { googleFonts } from "takumi-js/helpers";

const png = await render(
  <div style={{ fontFamily: "Noto Sans TC" }} tw="w-full h-full flex text-7xl">
    你好，匠
  </div>,
  {
    width: 1200,
    height: 630,
    fonts: googleFonts([{ name: "Noto Sans TC", weight: 700 }]),
  },
);

satori 0.63 draws a variable font at its default instance. Takumi applies font-weight and font-variation-settings along the font's axes. See Fonts.

EmojiCopy Anchor Link

next/og resolves emoji through satori's loadAdditionalAsset callback. Takumi's ImageResponse and render take the same emoji option with the same values, and Image loading & emoji lists each set and where it comes from.

To draw emoji from a registered color font, set emoji: "from-font". See Emoji.

How Takumi differsCopy Anchor Link

Takumi is one Rust engine. Its text and inline layout port Chromium's Blink, and the same layout feeds three packages.

Compare rendered output across renderers at image-bench.kane.tw.

FeaturesCopy Anchor Link

satori changes quickly, so this table names versions. next/og in Next.js 16.4 bundles @vercel/og 1.0.1, which uses satori 0.29. The satori column follows the satori 0.63 README.

Takumi also takes HTML strings and node trees as input. See Parsing templates.

Rendering on a serverCopy Anchor Link

satori builds the SVG on the calling thread. On Node.js, Takumi's native binding runs each render as a background task, which has these effects:

• Renders leave the event loop free, and concurrent renders share the loaded fonts.
• Animation frames render in parallel and stream into the encoder, so it does not hold every raw frame.
• Images decode at their drawn size where the format allows it, and the decode cache reuses them across renders.
• Fonts load by coverage. googleFonts returns each family as unicode-range subsets, and a render downloads only the subsets its text uses.

Edge runtimes and browsers load Takumi as a WebAssembly binary. Count its download and compile time when you measure cold starts. See Performance for tuning.

Used in productionCopy Anchor Link

Dcard, TanStack, Fumadocs, and Luma render share images with Takumi. Nuxt OG Image ships it as a renderer. See more in the showcase.