Takumi
Render JSX and CSS to OG images, PDFs, SVG, and animations with Takumi's Rust engine — no headless browser.
If you're generating OG images or share cards in JS and still paying for a headless browser, Takumi is the lighter swap — and because ImageResponse matches next/og, moving over is a drop-in rather than a rewrite. Animated WebP, APNG, and GIF from CSS keyframes plus a PDF output are the parts most JSX renderers don't offer. Watch the layout default: a bare div is block here, so keep explicit Flexbox styles when porting a Satori template.
Verified 11h ago · liveness 66/100 · cite: rightaichoice.com/tools/takumi
- Developers generating OG images and share cards server-side without a headless browser
- Next.js teams wanting a drop-in, lighter replacement for next/og's ImageResponse
- Edge deployments on Cloudflare Workers, Vercel Edge, or Deno that can't run headless Chromium
- Pipelines producing animated WebP, APNG, GIF, or paged PDF from one JSX tree
- Non-developers who want a visual, GUI-based image editor
- Teams that need browser-only rendering such as WebGL or scripted interactive SVG
- Anyone wanting a managed SaaS dashboard and a vendor support contract
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Takumi if your OG card design depends on browser-only features like WebGL or scripted interactive SVG, or if you don't want to maintain rendering code in your repo at all.
Takumi is MIT / Apache-2.0 open source with no license fee, so the real cost is engineering time: you own the renderer, its fonts, and its output diffs. Teams that would rather buy that work compare against Satori plus a hosted OG-image service; teams already running headless Chromium pay for it in a ~300 MB process and cold-start latency instead.
In short
Takumi — Render JSX and CSS to OG images, PDFs, SVG, and animations with Takumi's Rust engine — no headless browser. Best for Developers generating OG images and share cards server-side without a headless browser, Next.js teams wanting a drop-in, lighter replacement for next/og's ImageResponse, Edge deployments on Cloudflare Workers, Vercel Edge, or Deno that can't run headless Chromium. Free to use.
What's new in Takumi
Checked 6 days agoAcross the latest 1 update: 1 launch.
What people actually say about Takumi — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
66 mentions across 6 sources (Hacker News, YouTube, Product Hunt, Bluesky, GitHub, Lemmy) · researched Jul 15, 2026.
Average across the 6 sources that answered — each source counts once, not each post.
- +Eliminates 300MB headless browser overhead for OG images.
- +Drop-in replacement for next/og simplifies migration.
- +Runs on edge runtimes via WASM and Node.js bindings.
- +Supports animated GIF and WebP output natively.
- +Parses CSS Grid, Flexbox, and keyframe animations.
- −No community feedback validates real-world performance.
- −Name collision with unrelated products causes confusion.
- −Documentation and support are nearly invisible online.
- −WASM build may have limited performance compared to native.
- −CSS edge cases may not render identically to browsers.
- • No hidden costs identified; tool is completely open-source and free
Viability Score
How well maintained and how widely used is Takumi? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Render JSX or HTML to PNG, JPEG, WebP, SVG, and PDF
- ImageResponse extends the web Response and matches next/og's API
- Animated output via CSS keyframe sampling to animated WebP, APNG, or GIF
- Paged PDF generation with selectable text for invoices and tickets
- CSS Grid, Flexbox, float, absolute positioning, calc(), z-index
- Selectors :is(), :where(), ::before, ::after
- Paint effects: backdrop-filter, mix-blend-mode, conic-gradient(), clip-path, mask, background-clip: text
- Tailwind-style tw classes and animate-* utilities
- WOFF2 custom fonts, emoji, RTL scripts, multi-span inline text
- googleFonts() helper with variable-font axes (font-variation-settings)
- Native Node.js and Bun binding (@takumi-rs/core)
- WebAssembly build for Cloudflare Workers, Vercel Edge, Deno, and browsers (@takumi-rs/wasm)
- Rust crate for direct integration (taffy layout, parley/skrifa text, resvg SVG)
- renderSvg() returns SVG from the same tree
- Reusable Renderer to register fonts once across many images
About Takumi
Takumi takes JSX or plain HTML and renders it to images, animations, SVG, and PDFs without launching a headless browser. You call a function, pass a component, and get encoded bytes back at whatever canvas size you set. Styling comes from inline CSS and Tailwind-style `tw` classes, so the component doubles as the design file. Version 2 shipped a new API plus performance work, with migration guides in the docs for anyone moving off v1. The `takumi-js` package bundles two backings — a native binding (`@takumi-rs/core`) and a WebAssembly one (`@takumi-rs/wasm`) — and selects the right one at runtime: native on Node.js and Bun, WebAssembly on Cloudflare Workers, Vercel Edge, Deno, and in the browser. A Rust crate covers direct integration. Layout runs on taffy, text shaping on parley and skrifa, SVG on resvg. The CSS surface is broader than the usual Open Graph subset: CSS Grid, Flexbox, float, absolute positioning, calc(), and z-index, plus selectors like `:is()` and `::before`. Paint effects include conic-gradient(), clip-path, mask, backdrop-filter, and background-clip: text. Text handles WOFF2 fonts, emoji, RTL scripts, and multi-span inline runs, and a `googleFonts()` helper fetches variable fonts so font-weight and font-variation-settings drive axes per element. Takumi ships one built-in Latin fallback font and never reads system fonts — everything else loads through the `fonts` option or a reusable `Renderer`. Output formats span static PNG, WebP, and JPEG, animated WebP, APNG, and GIF sampled from CSS keyframes, SVG via `renderSvg()`, and paged PDFs with selectable text for invoices, tickets, and certificates. `ImageResponse` extends the web Response and matches next/og's API, making it a drop-in there. It runs in production at Dcard for share cards and in Fumadocs OG images. Against Satori it adds motion and a wider CSS set; against a headless-Chromium pipeline it swaps a large process for a function call.
Behind the Verdict
The first question I'd ask is whether you still launch a browser to make pictures. If yes, Takumi is worth an afternoon. A function call replaces a Chromium process, and the cold-start tax that comes with a browser at the edge quietly disappears. For Next.js teams, the `ImageResponse` API matches next/og, so the migration is mostly renaming an import. Teams on Cloudflare Workers, Vercel Edge, or Deno get the WebAssembly build without installing anything extra — the package picks it at runtime. The animation support is where it diverges from Satori-style renderers. CSS keyframes sampled over time and written to animated WebP, APNG, or GIF means one component tree produces the whole animated asset. I'd reach for that on looping share cards or lightweight marketing graphics, and for PDFs when invoices, tickets, or certificates need paged output with selectable text. The CSS coverage is genuinely wider than the Open Graph subset: grid, conic-gradient, clip-path, mask, backdrop-filter. Text shaping handles WOFF2, emoji, and RTL scripts, and `googleFonts()` pulls variable fonts in one request. Where it bites: Takumi never reads system fonts. Miss the `fonts` option or a shared `Renderer` and you fall back to the one built-in Latin face. Porting a Satori template has a real trap too — a bare div defaults to block layout here, so keep explicit Flexbox styles. Pick Satori instead if you only need static OG images and want the smaller existing ecosystem. Pick a headless-browser pipeline if you need WebGL, scripted interactive SVG, or anything only a real browser renders. Takumi is for developers comfortable writing components and CSS, not for anyone looking for a GUI canvas.
Researching Takumi? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Takumi actually fits — and what changes day-one when you adopt it.
They already return next/og's ImageResponse from an app/og/route.tsx; iframe renders keep timing out on Vercel's edge runtime, so they swap the import to ImageResponse from takumi-js/response and keep the same JSX.
Outcome: The route returns 1200×630 PNGs without a Chromium process, and the existing next/og component tree carries over unchanged.
Fumadocs-style OG images need per-page titles rendered at build or request time; they install takumi-js, point render() at a title component styled with tw classes, and call renderSvg() where a vector underlay is wanted.
Outcome: Per-page cards render as PNG or SVG from one component, with fonts registered once on a Renderer so repeated renders stay consistent.
They want a looping card rather than a still; the same tree gets @keyframes with transform and border-radius changes, and Takumi samples the animation at time steps into animated WebP.
Outcome: One JSX tree produces both the static PNG for Open Graph and the animated WebP for the post itself.
Use Cases
- Generate OG images for blog posts at request time from a JSX component.
- Create animated social cards with CSS keyframes exported to WebP, APNG, or GIF.
- Replace next/og's ImageResponse in a Next.js app with no Chromium dependency.
- Render SVG charts or diagrams from structured data on Cloudflare Workers or Vercel Edge.
- Produce consistent watermark overlays using CSS blending modes and mask.
- Build a screenshot-as-a-service endpoint that turns arbitrary HTML into raster images.
- Generate invoices and reports as PDFs from the same component tree.
- Style a card with variable fonts loaded through the googleFonts() helper.
Limitations
- Takumi is a developer library rather than an interactive design tool: it takes JSX, HTML, or a node tree as input, so in Node.js you must compile the JSX before running or run it with Bun.
- Migrating a Satori template takes care — Takumi defaults a bare <div> to block layout, so Satori templates that rely on implicit Flexbox need explicit flex styles and a rendered-output comparison.
- Takumi never reads system fonts and ships one last-resort font, Geist, covering Latin at weights 300–800; other scripts need fonts loaded through the `fonts` option or a reusable Renderer, or you get missing glyphs.
- Rendering targets OG images, social cards, PDFs, and animations.
- Browser-only capabilities such as WebGL and scripted interactive SVG are out of scope.
as of 2026-10-12
Verification history
We have re-verified Takumi 9 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
Showing the 6 most recent of 9 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Takumi tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Open Source
$0
Ideal for
Developers and teams adding server-side or edge image, PDF, and animation rendering to their own codebase.
What this tier adds
Starting tier: MIT / Apache-2.0 licensed with no fee, installed via bun i takumi-js.
Where the pricing makes sense
The company stage and team size where Takumi's pricing actually pencils out — and where peers do it cheaper.
Takumi is MIT / Apache-2.0 open source with no license fee, so the real cost is engineering time: you own the renderer, its fonts, and its output diffs. Teams that would rather buy that work compare against Satori plus a hosted OG-image service; teams already running headless Chromium pay for it in a ~300 MB process and cold-start latency instead.
Setup time & first value
How long it actually takes to get something useful out of Takumi — broken out by persona, not the marketing-page minute.
A first image is minutes: install with `bun i takumi-js`, save an image.tsx, run `bun image.tsx`, write the returned bytes to hello.png. If you're in Node.js rather than Bun you add a JSX compile step first. Serving it is a route file — app/og/route.tsx returning ImageResponse needs no extra install. Framework integrations and font setup add an hour or so, depending on which scripts you need
Switching to or from Takumi
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From next/og ImageResponse: change the import to ImageResponse from takumi-js/response and keep the same JSX props.
- →From Satori: follow the Satori comparison and migration guide, keep explicit Flexbox styles since a bare <div> defaults to block in Takumi, and visually diff the output.
- →From a headless-Chromium OG pipeline: replace the browser launch and page.setContent call with render() or renderSvg() on the existing component.
- →From Takumi v1: follow the Upgrade to v2 guide in the docs for the new API.
- ↗To Satori: keep static-card rendering but lose keyframe animation and the wider CSS surface, and restore implicit-flex layout assumptions.
- ↗To a headless-browser renderer: regain WebGL and scripted SVG, at the cost of a far larger process and slower cold starts.
- ↗To a hosted OG-image SaaS: drop the rendering code entirely if you want someone else to own fonts and output.
Integrations
Resources & Guides
- Documentationtakumi.kane.tw
Docs · Takumi
Full product docs from takumi.kane.tw
- Documentationtakumi.kane.tw
Nextjs · Takumi
Full product docs from takumi.kane.tw
- Documentationtakumi.kane.tw
V2 · Takumi
Full product docs from takumi.kane.tw
- Documentationtakumi.kane.tw
Troubleshooting · Takumi
Full product docs from takumi.kane.tw
- Resourcetakumi.kane.tw
Playground · Takumi
Helpful link from takumi.kane.tw
Tutorials & Learning
YouTube returned 6 videos for “Takumi”, and we withheld 6: 6 could not be judged, because “Takumi” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Takumi.
Official links
Tools that pair well with Takumi
Common stack mates teams adopt alongside Takumi, with the specific reason each pairing earns its keep.
Featured Head-to-Head Comparisons
Takumi vs Spider Cloud
Spider Cloud and Takumi serve completely different needs: one is for web data extraction, the other for server-side image generation. If you need a fast, pay-as-you-go scraping API for AI agents or RAG pipelines, choose Spider Cloud. If you're a developer generating Open Graph images or animated GIFs from JSX, Takumi is the lightweight, free choice. They are not competitors.
Takumi vs Temporal Ai
Temporal and Takumi solve completely different problems: Temporal is for building resilient, long-running workflows and AI agents that survive failures, while Takumi is a lightweight image generator for server-side OG images and animations. If you need durable execution with retries, human-in-the-loop, and saga patterns, choose Temporal. If you need to render JSX/HTML/CSS to images without the overhead of a headless browser, Takumi is the clear winner. They are not direct competitors; pick based on your use case.
Takumi vs Voyage Ai
Voyage AI and Takumi serve completely different needs—Voyage is an enterprise embedding API for RAG, while Takumi is an open-source Rust engine for HTML-to-image rendering. Choose Voyage if you need high-accuracy retrieval on finance/legal docs with long-context support; choose Takumi if you generate OG images server-side and want to avoid headless browsers. They aren't competitors, but if forced to pick for a developer's toolbelt, Takumi's free and lightweight nature makes it a no-brainer for image generation, while Voyage's pricing and domain specialization limit it to enterprise buyers.
Alternatives to Takumi
View all
Popular in Developer Infrastructure
Temporal AI
Durable execution platform that keeps AI agents and long-running workflows alive through crashes, retries, and abandoned sessions.
Frequently Asked Questions
Categories
Topics
Used Takumi? Help shape our editorial sentiment research.