Quick Start

Takumi is a high-performance image renderer in Rust, featuring JSX support and portable runtimes. This guide will get you up and running with the high-level ImageResponse API in just a few steps.

1. Install

npm i takumi-js

Extra bundlers config for Node.js

For Next.js users, before the PR merged, you would need to mark Takumi's Node.js bindings as external so it bundles correctly.

const config: NextConfig = {
  serverExternalPackages: ["@takumi-rs/core"],
};

export default config;

2. Return an ImageResponse

ImageResponse extends the standard Response, so you can use it in any environment you want.

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

export function GET() {
  return new ImageResponse(
    <div tw="w-full h-full flex items-center justify-center bg-white">
      <h1 tw="text-4xl font-bold">Hello Takumi 👋😁</h1>
    </div>,
    {
      width: 1200,
      height: 630,
      format: "webp",
      emoji: "twemoji",
      headers: {
        "Cache-Control": "public, max-age=3600",
      },
    },
  );
}

Internally, Takumi will tries to load the native bindings for your platform. If it fails, it will fallback to the WebAssembly version, which is slightly slower but works everywhere.

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