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.

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

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 } from "@takumi-rs/image-response";
import { serve } from "bun";

serve({
  fetch() {
    return new ImageResponse(<Hello />, {
      width: 1200,
      height: 630,
      format: "webp",
    });
  },
});

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>
  );
}

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

  // Check the additional bundler setup section for more details.
import module from "@takumi-rs/wasm/next";

export default {
  fetch() {
    return new ImageResponse(<Hello />, {
      width: 1200,
      height: 630,
      format: "webp",
      module,
    });
  },
}

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 the built-in templates.

npm i @takumi-rs/template

import DocsTemplateV1 from "@takumi-rs/template/docs-template-v1";
import { ImageResponse } from "@takumi-rs/image-response";
import { Axe } from "lucide-react";

export function GET() {
  return new ImageResponse(
    <DocsTemplateV1 
      title="Hello" 
      description="World" 
      icon={<Axe />} 
      primaryColor="hsla(354, 90%, 54%, 0.3)" 
      primaryTextColor="hsl(354, 90%, 60%)" 
      site="Takumi" 
    />, 
    {
      width: 1200,
      height: 630,
      format: "webp",
    },
  );
}

You can find all the templates in the takumi-template folder.

We need your help to improve and create more templates! Please feel free to submit PRs to add more templates.

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, AVIF output support.
• WebP, APNG animation rendering support.