Computing Layouts

Turn your styles and tree structure into concrete pixel coordinates.

Once your tree is built, you call computeLayout to calculate the final positions and sizes of every node.

Standard Layout Computation

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

Incremental Layouts

Taffy employs intelligent caching. If you modify a specific node's style or content, only the affected parts of the tree are recomputed in the next pass.

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 skips recalculating unaffected branches.
tree.computeLayout(root, { width: 800, height: 600 });

Rounding & Precision

By default, Taffy rounds all output coordinates to the nearest pixel (integer) to align with standard display grids.

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

// ... compute layout ...
const node = tree.newLeaf(new Style());
const layout = tree.getLayout(node);
console.log(layout.width); // Might be 33.33333... instead of 33

Debug Tips

• 🖨️ printTree(root): Prints a text representation of your entire tree depth, styles, and computed layout. Essential for debugging.
• 🔒 Isolate: If a complex tree behaves oddly, create a small reproduction with just the problematic nodes to isolate the issue.

Next Steps

• ⚙️ Configuration - Adjust engine settings.
• 🔍 Debugging Layouts - Learn how to troubleshoot.