Takumi Renderer

Takumi is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP without an SVG intermediate step, offering 2-10x better performance than Satori according to Takumi benchmarks.

Installation

Takumi requires @takumi-rs/core or @takumi-rs/wasm v2.15 or newer within v2.

# 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 component filename suffix determines the renderer. Create your component with a .takumi.vue suffix:

components/OgImage/MyTemplate.takumi.vue

The module automatically detects the renderer from the filename - zero-config.

Pros

• 2-10x faster than Satori+Resvg
• Direct PNG/JPEG/WebP rasterization (no SVG intermediate)
• Complete CSS support including gradients, shadows, opacity, 2D/3D transforms, and CSS Grid
• 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)
• Animation rendering (WebP, APNG)

Cons

• No SVG output (rasterized images only)

CSS Support

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

Supported Features

Not Supported

When to Use Takumi

Takumi is ideal for:

• High-throughput scenarios where speed matters
• Edge runtime deployments where bundle size is important
• Sites with many pages that need fast OG image generation
• Most OG image templates (Takumi's CSS support covers the vast majority of use cases)

Consider Satori instead when:

• You need SVG output

Consider Browser instead when:

• You need full CSS support including animations and advanced selectors
• You're prerendering all images at build time

Example Template

<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-gradient-to-br from-gray-900 to-blue-900 text-white p-12">
    <h1 class="text-6xl font-bold mb-4 shadow-lg">
      {{ 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
      }
    }
  }
})