Paint

takumi-paint is takumi's paint tree output, for drawing a layout with your own API. It shares one layout engine, a port of Chromium's layout, with image output and PDF output. Where those produce pixels or pages, it returns the paint tree: what to draw, where, and in which order, with every CSS value resolved.

Draw the tree on Canvas, write it into editable slides such as PPTX, or pass it to a native drawing API.

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); 
}

Lengths are in device pixels. devicePixelRatio scales CSS lengths during layout.

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.