The paint tree

takumi-paint lays out a document and returns what painting it would draw, instead of an image. Use it when the output is not pixels: an editable PPTX, a Canvas replay, a native drawing API.

import { paint, walk } from "takumi-paint";

const tree = await paint(
  <div style={{ width: 640, padding: 32, background: "#F7F3EC", flexDirection: "column", gap: 8 }}>
    <div style={{ fontSize: 40, fontWeight: 700, color: "#B3261E" }}>Hello paint</div>
    <div>Every box and text run, with the values the renderer used.</div>
  </div>,
  { width: 640 },
);

function draw(ctx: CanvasRenderingContext2D) {
  for (const node of walk(tree)) {
    if (node.transform) ctx.setTransform(...node.transform);
    else ctx.setTransform(1, 0, 0, 1, node.x, node.y);
    if (node.background?.color) {
      ctx.fillStyle = rgba(node.background.color);
      ctx.fillRect(0, 0, node.width, node.height);
    }
    for (const run of node.textRuns ?? []) {
      ctx.save();
      if (run.transform) ctx.transform(...run.transform);
      ctx.font = `${run.font.weight} ${run.fontSize}px ${run.font.family}`;
      ctx.fillStyle = rgba(run.color);
      ctx.fillText(run.text, run.x, run.y);
      ctx.restore();
    }
  }
  ctx.resetTransform();
}

const rgba = ([r, g, b, a]: number[]) => `rgb(${r} ${g} ${b} / ${a / 255})`;

The package runs the same layout as takumi-js and walks the same stacking-context scene the image, SVG, and PDF backends paint. It records used values: a 50% width is a number, currentColor is a color, and <b>world</b> is its own run with its own face.

Coordinates

Every length is a device pixel, and so are the width and height options. A 20px font measures 40 under a devicePixelRatio of 2.

A node's x and y place its border box on the canvas. transform appears only when the box is rotated, scaled, or skewed, and its translation equals x, y. Everything inside a node, such as clip, background, image, and textRuns, is relative to the node's border-box top-left.

Paint order

Nodes come in the order the renderer paints them, so zIndex does not appear. walk() yields them in that order. Within a node, draw shadows.outer, background, shadows.inset, and border, then image, inlineBackgrounds, and textRuns, then children, then outline.

Each node is a compositing group. Its opacity, clip, and blendMode apply to everything inside it, children included.

Fields

Each run carries its font: the registered family, the face index, the weight and style after variations, and any synthetic bold or skew the shaper applied. textRuns() yields every run with the node that paints it, and find() looks a node up by its source id.

What stays CSS

Linear and radial gradients come resolved: stops in pixels along the axis, plus the tile geometry. A conic gradient is carried as CSS text. filter, backdrop-filter, mask-image, and clip-path are carried as CSS text under unresolvedEffects, so an exporter can decide what to do with them.