About Taffy

Taffy is a high-performance, embeddable layout engine written in Rust and compiled to WebAssembly. It brings CSS Flexbox and Grid layout algorithms to JavaScript with near-native performance.

What Makes Taffy Different?

WebAssembly-Powered

Taffy is written in Rust and compiled to WebAssembly, giving it performance characteristics much closer to native code than pure JavaScript implementations.

Taffy Layout exposes Flexbox, Grid, and Block layout, including floats, writing direction, and safe alignment. The Styling Guide and API Reference describe the properties and values available through the JavaScript binding.

Tree-Based API

Taffy provides an efficient tree structure for managing layout nodes, making it perfect for complex, nested layouts.

Custom Measurement

Taffy supports custom measurement callbacks for dynamic content like text, enabling layout for terminal UIs, canvas rendering, and more.

Use Cases

Terminal UI

Perfect for terminal-based UI frameworks where precise layout computation is critical.

Canvas Applications

Ideal for canvas-based rendering engines that need efficient layout calculations.

Custom Rendering Engines

Excellent choice for custom UI frameworks that need CSS-like layout without the DOM.

Architecture

Taffy is based on the Taffy Rust library, with WebAssembly bindings specifically designed for JavaScript and TypeScript.

Core Modules

Style: CSS layout property configuration
TaffyTree: Layout tree management and computation
Layout: Computed layout results (position, size, etc.)
Enums: CSS property enumerations (Display, FlexDirection, etc.)
Types: TypeScript type definitions

Why Not Just Use CSS?

While CSS is great for web browsers, Taffy fills important gaps:

Terminal UI: CSS doesn't work in terminal environments
Canvas Rendering: No DOM means no CSS support
Custom Engines: Build your own UI framework with CSS-like layouts
Performance: Efficient WebAssembly implementation suitable for high-performance applications