Computing Layouts

Turn your styles and tree structure into concrete pixel coordinates.

Once your tree is built, call computeLayout on a node to calculate positions and sizes for that node and its descendants.

Standard Layout Computation

You must provide the Available Space (the constraints for the root node) when computing the layout.

Loading Preview…

Taffy reuses cached results when their inputs still match. Tree operations such as setStyle() invalidate affected caches, including ancestor caches. A change can also alter siblings' sizes or positions.

const tree = new TaffyTree();
const root = tree.newLeaf(new Style());
const childNode = tree.newLeaf(new Style());
tree.addChild(root, childNode);

// 1. First Layout
tree.computeLayout(root, { width: 800, height: 600 });

// 2. Modify a leaf node
const newStyle = new Style({ width: 250 });
tree.setStyle(childNode, newStyle);

// 3. Re-compute
//    Taffy reuses cached results where the layout inputs still match.
tree.computeLayout(root, { width: 800, height: 600 });

Changing a Style copy does not update the tree until setStyle() is called. Mutating a context object in place, changing external content, or passing a different measure function does not invalidate measurement caches automatically. Call markDirty(node) for affected measured nodes, or use setNodeContext(node, context), before the next computation. See Measure Functions.

Rounding & Precision

By default, Taffy snaps computed layout boxes to integer coordinates. Widths and heights come from rounded edges; this can give adjacent equal-sized items different rounded sizes. Margins and detailed Grid track data can still contain fractions.

Disabling Rounding

For scenarios like high-DPI rendering or vector graphics where sub-pixel precision matters, you can disable rounding.

const tree = new TaffyTree();

// Enable sub-pixel precision
tree.disableRounding();

const node = tree.newLeaf(new Style({ width: 100 / 3, height: 20 }));
tree.computeLayout(node, { width: 100, height: 100 });
const layout = tree.getLayout(node);
console.log(layout.width); // Approximately 33.33333 (32-bit float)
layout.free();

Debug Tips

🖨️ printTree(root): Returns a string showing the tree hierarchy and computed layouts; pass it to console.log() to display it.
🔒 Isolate: If a complex tree behaves oddly, create a small reproduction with just the problematic nodes to isolate the issue.

Next Steps