Takumi

One layout engine for JSX, HTML, and CSS. Render images, SVG, PDFs, or a paint tree. No headless browser.

Documentation · Playground · Showcase

Takumi is a layout engine written in Rust, with text and inline layout ported from Chromium. It lays out JSX, HTML, and CSS without launching a browser. One layout feeds several outputs, so the same component can become an Open Graph image, an animated GIF, an invoice PDF, or the paint tree behind editable slides.

Choose a Package

Use	Package	Output
Images and animations	takumi-js	PNG, JPEG, WebP, ICO, raw RGBA, SVG. Animated WebP, APNG, and GIF.
PDF documents	takumi-pdf	Paged or single-page PDF with selectable text.
Your own renderer or layout data	takumi-paint	A paint tree of every box, text run, and image, positioned with CSS values resolved.
Embedding in Rust	takumi	Images, animations, and SVG from a node tree or HTML.
Rendering from a terminal	takumi-cli	Images, SVG, and PDF from an HTML file, reading only the directories you allow.

Quick Start

Install the package for your output. The examples below use Bun to run JSX directly.

bun i takumi-js      # PNG, JPEG, WebP, SVG, animations
bun i takumi-pdf     # paged PDF
bun i takumi-paint   # paint tree

Image

Save this as image.tsx and run bun image.tsx to write a 1200 × 630 PNG.

import { render } from "takumi-js";
import { writeFile } from "node:fs/promises";

const image = await render(
  <div tw="w-full h-full flex items-center justify-center bg-linear-to-b from-blue-100 to-red-50">
    <h1 tw="text-6xl font-bold">Hello from Takumi</h1>
  </div>,
  { width: 1200, height: 630 },
);

await writeFile("./output.png", image);

PDF

Save this as document.tsx and run bun document.tsx to write an A4 PDF with a page-number footer.

import { render } from "takumi-pdf";
import { PageNumber, TotalPages } from "takumi-pdf/primitives";
import { writeFile } from "node:fs/promises";

const pdf = await render(
  <main>
    <h1>Invoice</h1>
    <p>Total: $1,250.00</p>
  </main>,
  {
    size: "a4",
    footer: (
      <div tw="flex w-full justify-center text-[10px] text-gray-500">
        Page <PageNumber /> of <TotalPages />
      </div>
    ),
  },
);

await writeFile("invoice.pdf", pdf);

Paint

Save this as paint.tsx and run bun paint.tsx to print each text run with its font.

import { paint } from "takumi-paint";

const tree = await paint(
  <div style={{ width: 240, padding: 16, background: "#F7F3EC" }}>
    Hello <b>world</b>
  </div>,
  { width: 320 },
);

for (const node of tree.nodes) {
  if (node.type !== "text") {
    continue;
  }

  for (const run of node.runs) {
    console.log(run.text, run.font.family, run.fontSize);
  }
}

tree.steps lists the draws in paint order. See Drawing to replay them on a canvas.

Features

Images

• text-fit grows or shrinks a headline to fill its line box, no measuring loop.
• text-wrap: balance balances lines in a headline. pretty reduces short last lines.
• Animations sample the tree across time. @keyframes and animate-spin become WebP, APNG, GIF, or video frames.
• Stylesheets support complex selectors, var(), calc(), and media queries.
• Flexbox, CSS Grid, block, inline, table, and float layout are supported.
• lang picks each language's own Han glyphs for the same code points.
• Text on a path follows offset-path. background-clip: text and conic gradients paint it.
• Masks, clipping, filters, and blend modes control how image layers combine.
• SVG filters run through filter: url(...), feTurbulence and feDisplacementMap included.
• corner-shape swaps round corners for squircle, bevel, scoop, notch, or superellipse(n).
• Tailwind v4 utilities apply directly, arbitrary values included.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗