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 { renderPaintTree } from "takumi-paint";

const tree = await renderPaintTree(
  `<style>.big { font: 700 40px Geist; color: #B3261E }</style>
   <div style="width: 640px; padding: 32px; background: #F7F3EC">
     <div class="big">4,2 %</div>
     <p>hello <b>world</b></p>
   </div>`,
  { width: 640 },
);

const card = tree.root;
card.boxDecoration?.background.color; // [247, 243, 236, 255]

for (const node of card.children ?? []) {
  for (const run of node.runs ?? []) {
    const font = tree.fonts[run.fontIndex];
    console.log(run.text, font?.family, font?.weight, run.fontSize, run.color);
  }
}

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 transform is an absolute matrix placing its border box on the canvas. Everything inside a node, such as clip, boxDecoration, image, and runs, 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: draw a node's boxDecoration, then its image, inlineBackgrounds, and runs, then its children, then its boxDecoration.outline.

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

Fields

Runs reference tree.fonts by index. A font instance names the registered family, the face index, the weight and style after variations, and any synthetic bold or skew the shaper applied.

What stays CSS

Gradients come resolved: stops in pixels along the axis, plus the tile geometry. 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.