---
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-05-06T21:35:44.637Z"
---

<tip>

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

</tip>

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

</code-group>

## 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

<table>
<thead>
  <tr>
    <th>
      Feature
    </th>
    
    <th>
      Status
    </th>
    
    <th>
      Notes
    </th>
  </tr>
</thead>

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

### Not Supported

<table>
<thead>
  <tr>
    <th>
      Feature
    </th>
    
    <th>
      Notes
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      SVG output
    </td>
    
    <td>
      Takumi renders directly to rasterized images
    </td>
  </tr>
</tbody>
</table>

<tip>

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

</tip>

## 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.

<table>
<thead>
  <tr>
    <th>
      Environment
    </th>
    
    <th>
      Binding
    </th>
    
    <th>
      Notes
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Node.js
    </td>
    
    <td>
      <code>
        @takumi-rs/core
      </code>
    </td>
    
    <td>
      Native performance
    </td>
  </tr>
  
  <tr>
    <td>
      Cloudflare Workers
    </td>
    
    <td>
      <code>
        @takumi-rs/wasm
      </code>
    </td>
    
    <td>
      Wasm bundle
    </td>
  </tr>
  
  <tr>
    <td>
      Vercel Edge
    </td>
    
    <td>
      <code>
        @takumi-rs/wasm
      </code>
    </td>
    
    <td>
      Wasm bundle
    </td>
  </tr>
  
  <tr>
    <td>
      Netlify Edge
    </td>
    
    <td>
      <code>
        @takumi-rs/wasm
      </code>
    </td>
    
    <td>
      Wasm bundle
    </td>
  </tr>
  
  <tr>
    <td>
      AWS Lambda
    </td>
    
    <td>
      <code>
        @takumi-rs/core
      </code>
    </td>
    
    <td>
      Native performance
    </td>
  </tr>
</tbody>
</table>

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
      }
    }
  }
})
```