Quick Start

Takumi is an image rendering engine written in Rust that provides various integrations. The design is mainly inspired by satori, but with a focus on portability and performance.

You can experience Takumi in Playground without any installation.

Installation

The fastest/simplest way to use Takumi is with the ImageResponse wrapper, it manages the internal state for font & image cache.

npm i @takumi-rs/image-response @takumi-rs/helpers @takumi-rs/core

Usage

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

It comes with pre-bundled Geist and Geist Mono as default fonts (OFL License).

import ImageResponse from "@takumi-rs/image-response";
import { createTailwindFn } from "@takumi-rs/helpers/jsx/create-tailwind-fn";
import { serve } from "bun";

serve({
  fetch() {
    return new ImageResponse(<div tw="text-2xl bg-white w-full h-full grid place-items-center">Hello</div>, {
      width: 1200,
      height: 630,
      format: "webp",
      jsx: {
        tailwindFn: createTailwindFn(), // It's optional, doing so allows tree-shaking to reduce bundle size.
      },
    });
  }
});

For detailed framework/runtime integration guide, check the Integrations category.

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).
• RTL support.
• Variable fonts support.
• WOFF2 font format support.
• PNG, JPEG, WebP, AVIF output support.
• WebP, APNG animation rendering support.