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

rrobin_reala 6 days ago 26 commentsRead Article on github.com

FR version is available. Content is displayed in original English for accuracy.

⚡ Community Insights

Discussion Sentiment

94% Positive

Analyzed from 745 words in the discussion.

Discussion (26 Comments)Read Original on HackerNews

nicoburns•about 3 hours ago

I maintain Taffy: AMA.

I am currently in the process of building a wider browser engine / GUI toolkit on top of it (https://github.com/dioxuslabs/blitz). As part of that I am implementing a lot of the messier parts of CSS layout (floats, etc), and also grinding on fixing all the WPT tests which we track here: https://blitz.is/status/wpt/css/css-flexbox.

The vision is a complete standalone implementation of the web layout algorithms that can be easily embedded (with individual algorithms enabled/disabled on a pay what you use basis), and which can also be part of a modular ecosystem of browser engine components that make it easier for people to create new browser engines.

Beyond Blitz, some notable users are:

- Servo which uses it only for CSS Grid

- Zed which uses it via it's GPUI toolkit.

actsasbuffoon•about 2 hours ago

I used this for an internal project I can’t talk about, but it was a lifesaver. It allowed me to drop a really powerful layout system into a project that wasn’t doing traditional UI at all.

The results have been fantastic. Thank you for this awesome library. I love it.

kkukshtel•about 2 hours ago

Thanks for all this! I used Blitz a while ago for a product research spike around composing HTML to be rendered directly in a terminal with kitty or iterm's image protocol:

https://www.npmjs.com/package/kittyhtml

https://github.com/kkukshtel/kittyhtml

mrec•about 1 hour ago

I think Bevy uses it too, right?

nicoburns•25 minutes ago

Correct. Takumi (https://github.com/kane50613/takumi) which a JSX -> image generator might also be worth highlighting.

timw4mail•about 1 hour ago

Floats? A fan of pain, are we?

nicoburns•21 minutes ago

Unfortunately 73% of websites use floats, so if you want to render the web then you have to support them!

fschuett•about 2 hours ago

I used it in https://fschutt.github.io/printpdf for the HTML-to-PDF layout, just as a note. It is very useful, thanks for your work. Good luck on Blitz.

chrisweekly•about 2 hours ago

Closely-related tangent: for an amazing resource showing how to leverage CSS from first principles, see https://every-layout.dev

hereonout2•about 3 hours ago

An unfortunate name for certain audiences in the UK!

no-name-here•about 2 hours ago

> an offensive word for someone who comes from Wales, or whose family comes from Wales

https://dictionary.cambridge.org/dictionary/english/taffy

mrec•about 1 hour ago

Not that unfortunate:

https://www.walesonline.co.uk/news/wales-news/theres-still-m...

nicoburns•about 3 hours ago

Why is that?

shellac•about 2 hours ago

The river Taff flows through Cardiff, and 'taffy' was used as a derogatory term for Welsh people from this origin.

I can't pretend I've heard anyone use it since the 80s.

LoganDark•about 3 hours ago

I would be interested in something like Apple's constraint layout system. Nested flexboxes and grids can do a lot, but I kinda fell in love after seeing constraint layout. Even how window resizing is represented as a constraint with a certain priority too!

fschuett•about 3 hours ago

https://github.com/dylanede/cassowary-rs but it's not that great on performance once you have like 1000+ constraints (used that library last in 2018 / 2019? maybe it has improved). I think https://github.com/christolliday/limn used it way back then.

nicoburns•about 3 hours ago

Ratatui (TUI) uses cassowary layout with a faster underlying library.

scoopr•about 3 hours ago

I believe there are several crates (and other languages too) inspired by the original cassowary paper, don't know how mature they are though.

nxc18•about 2 hours ago

Came here to say the same thing. I feel like I’ve done my homework on CSS grid and CSS flex but no matter how much I use it, it will likely never become intuitive. Autolayout was love at first sight, and continued being a joy to use as long as I had the privilege of using it.

I know the CSS people were painted into a box by legacy, but the design of both grid and flex honestly seem like the products of uniquely deranged minds. Unfathomable. Something like WPF’s grid is just as powerful as CSS grid but it doesn’t give you a mental disorder trying to understand it.

LoganDark•about 2 hours ago

CSS grid and flexbox are very intuitive to me now, because I fell in love with them too before meeting constraint layout. But that may be because I was still young-ish when learning them. These days, it's starting to get harder for me to pick up new things...

troupo•about 3 hours ago

My opinion is that no one should re-implement CSS layout orimitives and algorithms. Those are rather unique in how (by necessity and quirks if history) awkward, stange and bolted on they are.

Explore other layout ideas. E.g. https://stackoverflow.com/questions/53911631/gui-layout-algo...

iainmerrick•about 3 hours ago

Well, hang on, there are several different layout algorithms in CSS, right? They keep the old ones for backwards compatibility, and they have to interoperate which makes things more complicated; but flexbox and grid are relatively new and quite nice.

Rohansi•20 minutes ago

The people saying CSS is unfit for UI have probably never actually built a good UI in anything, and also realistically don't even know how to use CSS.

est•about 2 hours ago

I side with your opinion. CSS is bad for UI layout (maybe good enough for text-flows idk)

... opens the SO link

yeah there's no answer to it (even if someone does, it would likely be closed by 5 others)

righthand•about 3 hours ago

<strike>This project IMO should admit it's taken a lot of it's inspiration from Clay, a C layout immediate mode UI library: https://github.com/nicbarker/clay/</strike>

EDIT: Was wrong, see reply to this comment, need my coffee...still not a good excuse

nicoburns•about 3 hours ago

This project predates Clay by several years. Clay's earliest commit was 2024. Taffy was forked from https://github.com/vislyhq/stretch in 2022, and Stretch's first commit was 2019.

The real inspiration is https://github.com/react/yoga (as used by React Native). Stretch was originally a Rust port/rewrite of Yoga.

An associated project: https://github.com/DioxusLabs/anyrender does take a lot of inspiration from Clay's "drawing commands"