Taffy: A flexible, high-performance, cross-platform UI layout library

Taffy is a high-performance layout engine developed in Rust, designed to be cross-platform and highly adaptable. It serves as a foundational dependency for other GUI and UI frameworks rather than a standalone UI toolkit.

🛠 Core Capabilities

Taffy currently provides faithful implementations of the following layout algorithms:

• CSS Block
• Flexbox
• CSS Grid

[!NOTE] For a deeper dive into the project's trajectory and planned features, please consult the official roadmap issue.

---

🌐 Ecosystem Integration

Taffy is a collaborative effort used across various high-profile projects. The following diagram illustrates the relationship between Taffy and the engines it powers:

---

💻 Quick Start Guide

To integrate Taffy, you primarily interact with the TaffyTree and Style structs.

use taffy::prelude::*;

// Initialize the layout tree
let mut tree: TaffyTree = TaffyTree::new();

// Define styles and create nodes
// Nodes are created via new_leaf or new_with_children, returning a unique node ID
let header_node = tree.new_leaf(Style { 
    size: Size { width: length(800.0), height: length(100.0) }, 
    ..Default::default() 
});

let content_node = tree.new_leaf(Style { 
    size: Size { width: length(800.0), height: auto() }, 
    flex_grow: 1.0, 
    ..Default::default() 
});

let root_node = tree.new_with_children(
    Style { 
        flex_direction: FlexDirection::Column, 
        size: Size { width: length(800.0), height: length(600.0) }, 
        ..Default::default() 
    }, 
    &[header_node, content_node]
).unwrap();

// Execute the layout algorithm starting from the root
tree.compute_layout(root_node, Size { width: length(800.0), height: length(600.0) }).unwrap();

// Retrieve and verify the computed dimensions
let layout = tree.layout(content_node).unwrap();
assert_eq!(layout.size.height, 500.0); // Computed automatically by Taffy

Language Support

Taffy is expanding its reach beyond Rust:

• WASM bindings
• Python (via stretchable) $\rightarrow$ WIP
• C bindings $\rightarrow$ WIP

---

📚 Learning Resources

Since Taffy adheres strictly to web specifications, standard CSS documentation is the best way to learn its behavior.

Reference Material:

• MDN Web Docs: Search for "MDN [property-name]" (e.g., the width property) for detailed technical specs.

Interactive Guides:

---

🚀 Performance Benchmarks

Taffy was tested against Yoga on a 2021 MacBook Pro (M1 Pro) using criterion.

Important Context:

• Benchmarks focus solely on layout computation.
• Text layout is implemented $\rightarrow$ Neither Taffy nor Yoga implement text layout.
• Typical websites range from $3,000$ to $10,000$ nodes.

The computation time can be viewed as a function of node count $N$ and tree depth $D$: $\text{Time} = f(N, D)$

---

🤝 Contributing

We welcome all contributions! Whether you want to use Taffy in your project, improve the codebase, or build new features, feel free to join the conversation, open an issue, or submit a Pull Request.

Need help? If you have usage questions, please open a discussion so the answers remain searchable for the entire community.