Quick Start

Takumi is an image rendering engine written in Rust. The design is mainly inspired by satori, but with a focus on portability and performance (2-10x compared to next/og in Image Bench).

You can try Takumi in Playground without any installation.

If you are looking for Rust crate documentaiton, please visit docs.rs.

Installation

The fastest/simplest way to use Takumi is with the ImageResponse API. It handles the internal state for font & image cache and it tries to be compatible with Next.js ImageResponse API.

npm i @takumi-rs/image-response

Additional Bundler Setup

Takumi offers two types of bindings for different environments. @takumi-rs/core for Node.js and @takumi-rs/wasm for WebAssembly.

Node.js Runtime

public-hoist-pattern[]=@takumi-rs/core-*

Edge Runtime / Browser

Usage

Since ImageResponse extends standard Response class, you can plug it into anywhere you want.

It comes with pre-bundled full axis (which means 100-900 weights available) Geist and Geist Mono as default fonts. Tailwind CSS is also supported out of the box.

import { ImageResponse, type ImageResponseOptions } from "@takumi-rs/image-response";
import { serve } from "bun";

serve({
  fetch() {
    return new ImageResponse(<Hello />, {
      width: 1200,
      height: 630,
      format: "webp",
      headers: {
        "Cache-Control": "public, max-age=3600",
      },
    });
  },
});

function Hello() {
  return (
    <div tw="bg-white w-full h-full flex items-center justify-center">
      <h1 tw="text-4xl font-bold">Hello</h1>
    </div>
  );
}

Templates

If you don't have any idea about where to start, or just want quick and easy way to get started, you can use our built-in Templates.

They are available via our Shadcn-compatible Registry and can be added to your project with a single command:

npx shadcn@latest add https://takumi.kane.tw/templates/registry/docs-template.json

We need your help to improve and create more templates! Please feel free to submit PRs to add more templates to the takumi-template folder.

Examples

Check out the example folder for different framework usages.

Learn More

Why build a satori alternative?

Takumi's focus is on how to rasterize images fast, while satori outputs SVG.

• All in one. No need to output SVG then have resvg-js rendering it again to output PNG.
• Inline layout support (display block or inline).
• Tailwind CSS support out of the box.
• RTL support.
• Variable fonts support.
• COLR font support (e.g. twemoji-colr).
• WOFF2 font format support.
• PNG, JPEG, WebP output support.
• WebP, APNG animation rendering support.