---
title: "Takumi Renderer · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/takumi"
last_updated: "2026-08-16T09:55:40.219Z"
meta:
  description: "The recommended renderer for OG image generation - 2-10x faster with comprehensive CSS support."
  "og:description": "The recommended renderer for OG image generation - 2-10x faster with comprehensive CSS support."
  "og:title": "Takumi Renderer · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Renderers**

# **Takumi Renderer**

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

## Installation

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

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
pnpm i -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()**`, `**radial-gradient()**`, `**conic-gradient()**` |
| 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 |

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~~**](https://nuxtseo.com/docs/og-image/renderers/satori) instead when:

- You need SVG output

Consider [**~~Browser~~**](https://nuxtseo.com/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~~**](https://nuxtseo.com/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:

nuxt.config.ts

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

**Was this page helpful?**

### **Related **

[**Satori Renderer**](https://nuxtseo.com/docs/og-image/renderers/satori)

[**Renderers**](https://nuxtseo.com/docs/og-image/renderers)

[**Custom Fonts**](https://nuxtseo.com/docs/og-image/guides/custom-fonts)

[**Overview** Choose the right renderer for your OG images.](https://nuxtseo.com/docs/og-image/renderers) [**Satori Renderer** Learn how to use the Satori renderer.](https://nuxtseo.com/docs/og-image/renderers/satori)