Layout Engine

taffy-layout

The Taffy layout engine in WebAssembly: Flexbox, Grid and Block layout for JavaScript.

GitHub

$npm install taffy-layout

TypeScript

WebAssembly speed

Layout runs in compiled Rust, not JavaScript.

Flexbox, Grid & Block

CSS layout algorithms, including floats.

Custom measurement

Measure text and content with your own callback.

TypeScript ready

Complete type definitions and CSS-like names.

Quick start

From the project README. See GitHub for the full API.

Read the docs on GitHub

layout.ts

import { loadTaffy, TaffyTree, Style, Display, FlexDirection } from "taffy-layout";

await loadTaffy();
const tree = new TaffyTree();

const container = new Style();
container.display = Display.Flex;
container.flexDirection = FlexDirection.Column;
container.size = { width: 300, height: 200 };

const child = new Style();
child.flexGrow = 1;

const a = tree.newLeaf(child);
const b = tree.newLeaf(child);
const root = tree.newWithChildren(container, [a, b]);

tree.computeLayout(root, { width: 300, height: 200 });
console.log(tree.getLayout(a)); // { x, y, width, height }