Takumi Renderer · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

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

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

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

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

OG Image

- [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)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Renderers

# Takumi Renderer

[Copy for LLMs](https://nuxtseo.com/docs/og-image/renderers/takumi.md)

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](#installation)

pnpm

yarn

npm

```
# 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](#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](#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](#cons)

- No SVG output (rasterized images only)

## [CSS Support](#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](#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](#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](#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](#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](#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](#disabling-takumi)

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

nuxt.config.ts

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

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/2.renderers/1.takumi.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/renderers/takumi.md)

Did this page help you?

[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)

On this page

- [Installation](#installation)
- [Usage](#usage)
- [Pros](#pros)
- [Cons](#cons)
- [CSS Support](#css-support)
- [When to Use Takumi](#when-to-use-takumi)
- [Example Template](#example-template)
- [Runtime Compatibility](#runtime-compatibility)
- [Disabling Takumi](#disabling-takumi)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

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

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)