taffy

taffy is a flexible, high-performance, cross-platform UI layout library written in Rust.

Currently, we only support a flexbox layout algorithm, but support for other paradigms is planned.

This crate is a collaborative, cross-team project, and is designed to be used as a dependency for other UI and GUI libraries. Right now, it powers:

• Dioxus: a React-like library for building fast, portable, and beautiful user interfaces with Rust
• Bevy: an ergonomic, ECS-first Rust game engine

Usage

```rust use taffy::prelude::*;

// First create an instance of Taffy let mut taffy = Taffy::new();

// Create a tree of nodes using taffy.new_leaf and taffy.new_with_children. // These functions both return a node id which can be used to refer to that node // The Style struct is used to specify styling information let headernode = taffy .newleaf( Style { size: Size { width: Dimension::Points(800.0), height: Dimension::Points(100.0) }, ..Default::default() }, ).unwrap();

let bodynode = taffy .newleaf( Style { size: Size { width: Dimension::Points(800.0), height: Dimension::Undefined }, flex_grow: 1.0, ..Default::default() }, ).unwrap();

let rootnode = taffy .newwithchildren( Style { flexdirection: FlexDirection::Column, size: Size { width: Dimension::Points(800.0), height: Dimension::Points(600.0) }, ..Default::default() }, &[headernode, bodynode], ) .unwrap();

// Call computelayout on the root of your tree to run the layout algorithm taffy.computelayout(rootnode, Size::MAXCONTENT).unwrap();

// Inspect the computed layout using taffy.layout asserteq!(taffy.layout(rootnode).unwrap().size.width, 800.0); asserteq!(taffy.layout(rootnode).unwrap().size.height, 600.0); asserteq!(taffy.layout(headernode).unwrap().size.width, 800.0); asserteq!(taffy.layout(headernode).unwrap().size.height, 100.0); asserteq!(taffy.layout(bodynode).unwrap().size.width, 800.0); asserteq!(taffy.layout(bodynode).unwrap().size.height, 500.0); // This value was not set explicitly, but was computed by Taffy

```

Benchmarks (vs. Yoga)

• Run on a 2021 MacBook Pro with M1 Pro processor.
• Taffy benchmarks are using criterion (10 iterations).
• Yoga benchmarks run via it's node.js bindings (the yoga-layout-prebuilt npm package), they were run a few times manually and it was verified that variance in the numbers of each run was minimal. It should be noted that this is using an old version of Yoga.

(note that the table below contains multiple different units (milliseconds vs. microseconds vs. nanoseconds))

| Benchmark | Yoga | Taffy 0.2 | | --- | --- | --- | | yoga/10 nodes (1-level hierarchy) | 45.1670 µs | 33.297 ns | | yoga/100 nodes (2-level hierarchy) | 134.1250 µs | 336.53 ns | | yoga/1000 nodes (3-level hierarchy) | 1.2221 ms | 3.8928 µs | | yoga/10000 nodes (4-level hierarchy) | 13.8672 ms | 36.162 µs | | yoga/100_000 nodes (5-level hierarchy) | 141.5307 ms | 1.6404 ms |

Most popular websites seem to have between 3,000 and 10,000 nodes (although they also require text layout, which neither yoga nor taffy implement).

Contributions

Contributions welcome: if you'd like to use, improve or build taffy, feel free to join the conversation, open an issue or submit a PR. If you have questions about how to use taffy, open a discussion so we can answer your questions in a way that others can find.