Paint

Use takumi-paint when you want the laid-out boxes, text runs, and images and plan to draw them with your own renderer. You can draw the tree on Canvas, write it into editable slides such as PPTX, or pass it to a native drawing API.

takumi-paint shares one layout engine, a port of Chromium's layout, with image output and PDF output. Those produce pixels or pages. takumi-paint returns a paint tree that says what to draw, where, and in which order, with every CSS value resolved.

InstallCopy Anchor Link

npm i takumi-paint

Paint JSXCopy Anchor Link

paint() takes JSX, an HTML string, or a node tree, and returns a PaintTree. The demos on these pages paint this card when the site builds.

import { paint } from "takumi-paint";

export const tree = await paint(
  <div style={{ display: "flex", padding: 24, background: "#F7F3EC" }}>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 10,
        width: 272,
        padding: 20,
        background: "white",
        border: "2px solid #E7E0D4",
        borderRadius: 16,
        boxShadow: "0 8px 20px rgba(60, 40, 20, 0.16)",
      }}
    >
      <div
        style={{
          width: 48,
          height: 48,
          borderRadius: 24,
          overflow: "hidden",
          background: "linear-gradient(135deg, #8B5CF6, #F472B6)",
        }}
      />
      <b style={{ fontSize: 22 }}>Hello, paint</b>
      <span style={{ opacity: 0.6, fontSize: 14 }}>Boxes, text, and steps</span>
    </div>
  </div>,
  { width: 368 },
);

Read the nodesCopy Anchor Link

tree.nodes lists every node in document order.

import { paint } from "takumi-paint";

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

const card = tree.nodes.find((node) => node.type === "box" && node.element?.id === "card");
console.log(card?.drawables[0]); // { type: "fill", role: "background", shape: { type: "rect", … }, … }

for (const node of tree.nodes) {
  if (node.type !== "text") continue;
  for (const run of node.runs) console.log(run.text, run.element?.tagName, run.font.family); 
}

tree.toJSON() returns the tree as plain JSON, without font files, so you can hand it to another process.

Choose a guideCopy Anchor Link

Reuse a painterCopy Anchor Link

paint() uses one shared Painter. Create your own Painter to keep a separate font registry, and call free() to release its WebAssembly memory.

import { Painter } from "takumi-paint";

const painter = new Painter();
try {
  const tree = await painter.paint(<p>Hello</p>, { width: 320 });
  console.log(tree.height);
} finally {
  painter.free();
}

Painter also has registerFont(), unregisterFont(), and clearFonts(), and takes the same fontCacheMaxBytes option as PdfRenderer.

RuntimesCopy Anchor Link

takumi-paint has the same entries as takumi-pdf, which are the default import, takumi-paint/next, and takumi-paint/no-init with takumi-paint/wasm-url. See Runtimes.