Quick Start

Takumi is a high-performance image renderer in Rust, designed for JSX workflows across Node.js and WebAssembly.

Try Playground

Run Takumi instantly in the browser.

Rust Crate Docs

Browse low-level Rust APIs on docs.rs.

1. Install

npm i @takumi-rs/image-response

2. Pick your runtime

Node.js/Bun runtime: @takumi-rs/image-response (native, fastest default)
Edge/browser/Workers runtime: @takumi-rs/image-response/wasm + @takumi-rs/wasm

3. Return an `ImageResponse`

ImageResponse extends the standard Response, so you can use it in route handlers directly.

import {  } from "@takumi-rs/image-response";

export function () {
  return new (
    < ="w-full h-full flex items-center justify-center bg-white">
      < ="text-4xl font-bold">Hello Takumi</>
    </>,
    {
      : 1200,
      : 630,
      : "webp",
      : {
        "Cache-Control": "public, max-age=3600",
      },
    },
  );
}

4. Framework notes (only if needed)

Most setup issues come from bundling native modules or WASM assets.

next.config.ts


const nextConfig = {
  serverExternalPackages: ["@takumi-rs/image-response"],
};

export default nextConfig;

If you use pnpm or yarn with a virtual store, add this to .npmrc and reinstall:

.npmrc

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

Templates

Need a fast starting point? Use built-in Templates from the registry:

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

Continue

Migration

Move from Satori or Next.js ImageResponse.

Reference

Full API options and type details.

Troubleshooting

Fix bundling, fonts, and runtime issues.