Introduction

Takumi renders JSX, raw HTML, and structured node trees through a full CSS layout and compositing pipeline, then outputs PNG, JPEG, WebP, ICO, GIF, APNG, or raw video frames.

This documentation covers the JavaScript bindings (takumi-js). For the low-level Rust API, see the crate docs on docs.rs.

How It Works

Most image-generation solutions are either a headless Chromium instance eating 300 MB of RAM, or a minimal SVG-to-PNG renderer that falls apart the moment you need real CSS. Takumi is neither of those.

It converts any template into a node tree with three node kinds: container, image, and text. That tree runs through:

1. Layout via taffy: Flexbox, Grid, block, float, calc(), absolute positioning, z-index
2. Text shaping via parley and skrifa: WOFF/WOFF2 fonts, emoji, RTL, multi-span inline blocks
3. Compositing: stacking contexts, blend modes, filters, transforms, SVG via resvg
4. Output: PNG, JPEG, WebP, ICO for statics; GIF, APNG, WebP for animations; raw RGBA frames for video pipelines

A time axis threads through the pipeline. Animations, GIFs, and video frames are not a separate API. They're the same renderer called at timestamp t.

Features

Advanced Layout

Full Flexbox, CSS Grid, block, and float layout engine via taffy. Supports calc(), absolute positioning, z-index stacking, inline text spans, and nested inline blocks.

Typography

Browser-grade text shaping and rendering via parley, with glyph loading from skrifa. Native support for WOFF and WOFF2 fonts, emoji, RTL languages, and multi-span inline blocks.

CSS & Tailwind

A full-featured stylesheet engine: complex selectors, CSS variables, shorthand properties, arbitrary values, @keyframes, linear/radial gradients, box-shadow, filter, backdrop-filter, mix-blend-mode, and transform. Tailwind v4 is supported out of the box.

Animations

Parse CSS @keyframes and the animation shorthand property. Render frame-by-frame with support for percentage, from, and to offsets; linear, ease, steps(), and cubic-bezier() timing functions; fill modes, delays, and iteration counts. Built-in Tailwind presets like spin, ping, pulse, and bounce work automatically.

SVG

Full SVG parsing and rasterization via resvg. Use inline SVG or reference external files.

Flexible Runtime

Takumi runs everywhere without changing your code: