Takumi Overview

Takumi is a tool for rendering JSX to images without needing a browser, providing an efficient alternative to using headless Chromium, which typically requires about 300 MB and a cold start for generating an OG card. Instead, Takumi operates with a simple function call.

Key Features

• Easy Implementation: Takumi can be initialized with bun i takumi-js, allowing for quick setup and immediate use.
• Code-Driven Design: The code itself acts as the design file, enabling a seamless integration with JSX.
• Browser-Free Rendering: It generates images directly, bypassing the need for a browser, and supports output at standard dimensions like 1200×630.

Usage Example

Takumi lets users render cards by creating design files in a format like JSX. An example design integrates styled components and text to render directly to an image:

export default function DemoCard() {
  return (
    <div tw="flex h-full w-full flex-col justify-between bg-[#16130f] p-14 text-white">
      <div tw="flex items-center justify-between">
        <span tw="text-2xl text-[#a8a29a]">takumi.kane.tw</span>
        <span tw="h-10 w-10 bg-[#ff4d4d]" />
      </div>
      <h1 tw="text-7xl font-bold leading-tight" style={{ backgroundClip: "text", backgroundImage: "linear-gradient(110deg, #fff 60%, #ff4d4d)", color: "transparent" }}>
        This card is the code beside it.
      </h1>
      <div tw="flex items-center justify-between text-2xl text-[#a8a29a]">
        <span>Rendered without a browser</span>
        <span>1200 × 630</span>
      </div>
    </div>
  );
}

Advanced Features

• Animation: Supports animation through CSS keyframes, allowing transformations like rotation and scaling over time.
• CSS Flexibility: Offers extensive CSS properties and selectors beyond minimal subsets, including advanced techniques like mix-blend-mode and clip-path.
• Broad Compatibility: Runs natively on Node and can be deployed via WASM on workers and browsers. It is compatible with various operating systems and architectures (macOS, Linux, Windows, x64, ARM64).

Applications

Takumi is used in production for projects like Dcard share cards and Fumadocs OG images, and can be integrated with frameworks such as Nuxt OG Image.