DioxusLabs/taffy

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

It currently implements the CSS Block, Flexbox and CSS Grid layout algorithms. Support for other paradigms is planned. For more information on this and other future development plans see the roadmap issue.

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:

• Servo: an alternative web browser
• Blitz: a radically modular web engine
• Bevy: an ergonomic, ECS-first Rust game engine
• Takumi: Renders your React components to images
• iocraft: crafting beautiful interfaces for the terminal
• Slint: a declarative GUI toolkit for building native user interfaces
• The Lapce text editor via the Floem UI framework
• The Zed text editor via the GPUI UI framework

Usage

use taffy::prelude::*;

// First create an instance of TaffyTree
let mut tree : TaffyTree<()> = TaffyTree::new();

// Create a tree of nodes using `TaffyTree.new_leaf` and `TaffyTree.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 header_node = tree
    .new_leaf(
        Style {
            size: Size { width: length(800.0), height: length(100.0) },
            ..Default::default()
        },
    ).unwrap();

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

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, body_node],
    )
    .unwrap();

// Call compute_layout on the root of your tree to run the layout algorithm
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();

// Inspect the computed layout using `TaffyTree.layout`
assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // This value was not set explicitly, but was computed by Taffy

Bindings to other languages

• Python via stretchable
• WIP C bindings
• WIP WASM bindings

Learning Resources

Taffy implements the Flexbox and CSS Grid specifications faithfully, so documentation designed for the web should translate cleanly to Taffy's implementation. For reference documentation on individual style properties we recommend the MDN documentation (for example this page on the width property). Such pages can usually be found by searching for "MDN property-name" using a search engine.

If you are interested in guide-level documentation on CSS layout, then we recommend the following resources:

Flexbox

• Flexbox Froggy. This is an interactive tutorial/game that allows you to learn the essential parts of Flexbox in a fun engaging way.
• A Complete Guide To Flexbox by CSS Tricks. This is detailed guide with illustrations and comprehensive written explanation of the different Flexbox properties and how they work.

CSS Grid

• CSS Grid Garden. This is an interactive tutorial/game that allows you to learn the essential parts of CSS Grid in a fun engaging way.
• A Complete Guide To CSS Grid by CSS Tricks. This is detailed guide with illustrations and comprehensive written explanation of the different CSS Grid properties and how they work.

Benchmarks (vs. Yoga)

• Run on a 2021 MacBook Pro with M1 Pro processor using criterion
• The benchmarks measure layout computation only. They do not measure tree creation.
• Yoga benchmarks were run via the yoga crate (Rust bindings)
• 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).

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

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.