Turn JSX into production-ready images fast.
OG cards, banners, and lightweight animations from one Rust engine for Node.js and WebAssembly.
Takumi is inspired by satori, with a stronger focus on portability and performance.
- Direct image rendering with no SVG-to-image conversion step.
- One JSX pipeline across runtimes for Node.js, browsers, and edge workers.
- Native performance on Node.js with WebAssembly fallback when portability matters.
- Production-grade text and font support including variable fonts, COLR, WOFF2, and RTL.
- Flexible output targets from WebP, PNG, JPEG, and GIF to raw frames for FFmpeg pipelines.
Takumi is built for fast image rendering across Node.js and WebAssembly runtimes.
See current benchmark runs and templates on Image Bench, including comparisons with next/og.
npm i @takumi-rs/image-responseimport { ImageResponse } from "@takumi-rs/image-response";
export function GET() {
return new ImageResponse(
<div tw="w-full h-full flex items-center justify-center bg-white">
<h1 tw="text-6xl font-bold">Hello from Takumi 👋😁</h1>
</div>,
{
width: 1200,
height: 630,
format: "webp",
emoji: "twemoji",
},
);
}For runtime-specific setup (Next.js, Vite SSR, Nitro, Cloudflare, Turbopack), see Docs.
- Open Graph and social cards
- Blog covers and marketing banners
- JSX-powered dynamic snapshots
- Component-based motion graphics
| Takumi OG image (source) | Package OG card (ssource) |
|---|---|
![]() |
![]() |
| Prisma-style API card (source) | X-style social post (source) |
![]() |
![]() |
| Keyframe Animation (source) | shiki-image |
![]() |
Note
Showcase submissions are welcome via PR to showcase.ts.
PRs are welcome. See CONTRIBUTING.md for setup, tests, fixtures, and changesets. By participating, you agree to the Code of Conduct.
Takumi builds on excellent OSS: taffy, image, parley, swash, wuff, resvg.
Licensed under either of:




