---
title: "Takumi Renderer"
description: "The recommended renderer for OG image generation - 2-10x faster with comprehensive CSS support."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/takumi"
last_updated: "2026-09-05T20:00:15.920Z"
---

::tip
Takumi is the **recommended renderer** for Nuxt OG Image. It offers the best combination of performance and CSS support.
::

[Takumi](https://github.com/kane50613/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](/docs/og-image/renderers/satori) according to [Takumi benchmarks](https://takumi.kane.tw/docs/).

## Installation

::code-group
```sh [pnpm]
# Node.js
pnpm i -D @takumi-rs/core

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

```bash [yarn]
# Node.js
yarn add -D @takumi-rs/core

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

```bash [npm]
# 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:

```bash
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](https://tailwindcss.com/) support via `tw` prop
- Works on [Node.js](https://nodejs.org) 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](https://takumi.kane.tw/docs/).

### Supported Features

| Feature                | Status | Notes                                                                                         |
| ---------------------- | ------ | --------------------------------------------------------------------------------------------- |
| Flexbox                | ✅      | Full support: `flex`, `justify-between`, `flex-1`, `flex-grow`, `flex-wrap`, etc.             |
| CSS Grid               | ✅      | `grid`, `grid-cols-*`, `grid-rows-*`, template areas                                          |
| Background colors      | ✅      | `bg-gray-900`, `bg-blue-500`                                                                  |
| Gradients              | ✅      | `linear-gradient()`{lang="ts"}, `radial-gradient()`{lang="ts"}, `conic-gradient()`{lang="ts"} |
| Box shadows            | ✅      | `shadow-lg`, `shadow-xl`, etc.                                                                |
| Text shadows           | ✅      | Via `textShadow` style property                                                               |
| Opacity                | ✅      | `opacity` property supported                                                                  |
| CSS transforms         | ✅      | 2D/3D: `translate`, `rotate`, `scale`, `perspective`                                          |
| Filters                | ✅      | `filter` and `backdropFilter`                                                                 |
| Clip path              | ✅      | `clipPath` with basic shapes                                                                  |
| Masks                  | ✅      | `maskImage`, `maskSize`, `maskPosition`                                                       |
| Text colors            | ✅      | `text-white`, `text-gray-500`                                                                 |
| Font sizes and weights | ✅      | `text-6xl`, `font-bold`, variable fonts                                                       |
| Rounded corners        | ✅      | `rounded-lg`, `rounded-full`                                                                  |
| Borders and outlines   | ✅      | `border`, `outline` with width, style, color                                                  |
| Emoji                  | ✅      | Via COLR fonts                                                                                |
| Images                 | ✅      | PNG, JPEG, WebP, SVG                                                                          |
| Padding and margin     | ✅      | `p-4`, `m-2`, `gap-4`                                                                         |
| Sizing                 | ✅      | `w-full`, `h-16`, `min-w-*`, `max-w-*`, `aspect-ratio`                                        |
| Positioning            | ✅      | `relative`, `absolute`, `inset`                                                               |
| Text decoration        | ✅      | `underline`, `line-through`, `overline`                                                       |
| Text overflow          | ✅      | `ellipsis`, `lineClamp`                                                                       |
| Text wrapping          | ✅      | `balance`, `pretty`, `pre-wrap`                                                               |
| Blend modes            | ✅      | `mixBlendMode`, `backgroundBlendMode`                                                         |
| Display modes          | ✅      | `flex`, `grid`, `block`, `inline`                                                             |
| Object fit             | ✅      | `objectFit`, `objectPosition`                                                                 |
| Overflow               | ✅      | `visible`, `hidden`                                                                           |

### Not Supported

| Feature    | Notes                                        |
| ---------- | -------------------------------------------- |
| SVG output | Takumi renders directly to rasterized images |

::tip
You can try Takumi in the [online playground](https://takumi.kane.tw/playground) without any installation.
::

## 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](/docs/og-image/renderers/satori) instead when:

- You need SVG output

Consider [Browser](/docs/og-image/renderers/browser) instead when:

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

## Example Template

```vue
<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.

| Environment        | Binding           | Notes              |
| ------------------ | ----------------- | ------------------ |
| Node.js            | `@takumi-rs/core` | Native performance |
| Cloudflare Workers | `@takumi-rs/wasm` | Wasm bundle        |
| Vercel Edge        | `@takumi-rs/wasm` | Wasm bundle        |
| Netlify Edge       | `@takumi-rs/wasm` | Wasm bundle        |
| AWS Lambda         | `@takumi-rs/core` | Native performance |

See the [Renderers](/docs/og-image/renderers) overview for more details on runtime support.

## Disabling Takumi

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      runtime: {
        takumi: false
      }
    }
  }
})
```