Takumi Renderer

Takumi is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP without an SVG intermediate step.

It's designed as a faster alternative to Satori for simple templates, offering 2-10x better performance according to Takumi benchmarks.

Installation

# Node.js
pnpm i -D @takumi-rs/core

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
pnpm i -D @takumi-rs/wasm

# Node.js
yarn add -D @takumi-rs/core

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
yarn add -D @takumi-rs/wasm

# Node.js
npm install -D @takumi-rs/core

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
npm install -D @takumi-rs/wasm

Usage

The renderer is determined by the component filename suffix. Create your component with a .takumi.vue suffix:

components/OgImage/MyTemplate.takumi.vue

The module automatically detects the renderer from the filename — no configuration needed.

Pros

• 2-10x faster than Satori+Resvg for simple templates
• Direct PNG/JPEG/WebP rasterization (no SVG intermediate)
• Native Tailwind CSS support via tw prop
• Works on Node.js and edge runtimes (WASM)
• Variable font support
• WOFF2 font format support
• RTL text support
• COLR emoji font support (e.g., Twemoji)

Cons

• Limited CSS support compared to Satori
• No gradient backgrounds
• Opacity color syntax not fully supported
• Some flexbox features missing

Limitations

Takumi has more CSS limitations than Satori. It works best with simple, solid-color templates.

For the full list of supported CSS properties, see the Takumi documentation.

Supported Features

Unsupported Features

When to Use Takumi

Takumi is ideal for:

• Simple templates with solid colors
• High-throughput scenarios where speed matters
• Edge runtime deployments where bundle size is important
• Sites with many pages that need fast OG image generation

Consider Satori instead when:

• You need gradient backgrounds
• You need opacity/transparency effects
• You need complex flexbox layouts

Consider Browser instead when:

• You need full CSS support
• You're prerendering all images at build time

Example Template

A Takumi-compatible template using only supported features:

<script setup lang="ts">
defineProps<{
  title: string
  description?: string
}>()
</script>

<template>
  <div class="w-full h-full flex flex-col items-center justify-center bg-gray-900 text-white p-12">
    <h1 class="text-6xl font-bold mb-4">
      {{ title }}
    </h1>
    <p v-if="description" class="text-2xl text-gray-400">
      {{ description }}
    </p>
  </div>
</template>

Runtime Compatibility

Takumi supports both Node.js and WASM runtimes. The module automatically selects the appropriate binding based on your deployment target.

See the Renderers overview for more details on runtime support.

Disabling Takumi

If you have Takumi installed but want to disable it for specific environments:

export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      runtime: {
        takumi: false
      }
    }
  }
})