8 ms·

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

115 points by robin_reala 2mo ago

LoganDark 2mo 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!
- scoopr 2mo 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.
- fschuett 2mo ago
  https://github.com/dylanede/cassowary-rs 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 https://github.com/christolliday/limn used it way back then.
  - nicoburns 2mo ago
    Ratatui (TUI) uses cassowary layout with a faster underlying library.
- nxc18 2mo 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 2mo 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 2mo 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-algorithms-overview https://stackoverflow.com/questions/53911631/gui-layout-algo...
- iainmerrick 2mo 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 2mo 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. Flexbox on its own is a simple and very capable algorithm that you can use anywhere. You can do a lot with flexbox alone (see Yoga: www.yogalayout.dev) so it's a great place to start. Taffy supports a few more layouts (block, grid) which have their own separate use cases but flexbox is enough for most things.
    - phoghed 2mo ago
      What are all the systems you’ve built good UIs in that are worse than HTML/CSS?
    - troupo 2mo ago
      People pretending CSS is a good fit for complex layouts have never yried to build complex layouts in CSS. Open any actual complex software from Photoshop and Cubase and weep https://x.com/dmitriid/status/1424052288205856773 https://x.com/dmitriid/status/1424052288205856773 There's a reason all the CSS frameworks endlessly recreate the same dozen-or-so trivial components and never dare touch layouts.
hereonout2 2mo ago
An unfortunate name for certain audiences in the UK!
- no-name-here 2mo ago
  > an offensive word for someone who comes from Wales, or whose family comes from Wales https://dictionary.cambridge.org/dictionary/english/taffy https://dictionary.cambridge.org/dictionary/english/taffy
- nicoburns 2mo ago
  Why is that?
  - shellac 2mo 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.
    - conradludgate 2mo ago
      I'm in my late twenties, grew up in the south west. This is my first time hearing about this term
- deleted 2mo ago
  [deleted]
- mrec 2mo ago
  Not that unfortunate: https://www.walesonline.co.uk/news/wales-news/theres-still-mileage-name-taffy-2323388 https://www.walesonline.co.uk/news/wales-news/theres-still-m...
righthand 2mo 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 2mo ago
  This project predates Clay by several years. Clay's earliest commit was 2024. Taffy was forked from https://github.com/vislyhq/stretch https://github.com/vislyhq/stretch in 2022, and Stretch's first commit was 2019. The real inspiration is https://github.com/react/yoga 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 https://github.com/DioxusLabs/anyrender does take a lot of inspiration from Clay's "drawing commands"
nicoburns 2mo 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 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 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.
- fschuett 2mo ago
  I used it in https://fschutt.github.io/printpdf 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.
- kkukshtel 2mo 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://www.npmjs.com/package/kittyhtml https://github.com/kkukshtel/kittyhtml https://github.com/kkukshtel/kittyhtml
- actsasbuffoon 2mo 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.
- timw4mail 2mo ago
  Floats? A fan of pain, are we?
chrisweekly 2mo ago
Closely-related tangent: for an amazing resource showing how to leverage CSS from first principles, see https://every-layout.dev https://every-layout.dev
jdnier 2mo ago
There are Python bindings via the stretchable library. https://github.com/mortencombat/stretchable https://github.com/mortencombat/stretchable
davidhyde 2mo ago
This library can be used to build no_std guis on embedded hardware (microcontrollers with KBs of ram). It is that lightweight and fast.
thecaio 2mo ago
having some screenshots or screen recordings is always nice for... UI libraries

115 points by robin_reala 2mo 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!

scoopr 2mo 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.
fschuett 2mo ago
https://github.com/dylanede/cassowary-rs 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 https://github.com/christolliday/limn used it way back then.
- nicoburns 2mo ago
  Ratatui (TUI) uses cassowary layout with a faster underlying library.
nxc18 2mo 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 2mo 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 2mo 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-algorithms-overview https://stackoverflow.com/questions/53911631/gui-layout-algo...

iainmerrick 2mo 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 2mo 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. Flexbox on its own is a simple and very capable algorithm that you can use anywhere. You can do a lot with flexbox alone (see Yoga: www.yogalayout.dev) so it's a great place to start. Taffy supports a few more layouts (block, grid) which have their own separate use cases but flexbox is enough for most things.
  - phoghed 2mo ago
    What are all the systems you’ve built good UIs in that are worse than HTML/CSS?
  - troupo 2mo ago
    People pretending CSS is a good fit for complex layouts have never yried to build complex layouts in CSS. Open any actual complex software from Photoshop and Cubase and weep https://x.com/dmitriid/status/1424052288205856773 https://x.com/dmitriid/status/1424052288205856773 There's a reason all the CSS frameworks endlessly recreate the same dozen-or-so trivial components and never dare touch layouts.

hereonout2 2mo ago

An unfortunate name for certain audiences in the UK!

no-name-here 2mo ago
> an offensive word for someone who comes from Wales, or whose family comes from Wales https://dictionary.cambridge.org/dictionary/english/taffy https://dictionary.cambridge.org/dictionary/english/taffy
nicoburns 2mo ago
Why is that?
- shellac 2mo 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.
  - conradludgate 2mo ago
    I'm in my late twenties, grew up in the south west. This is my first time hearing about this term
deleted 2mo ago
[deleted]
mrec 2mo ago
Not that unfortunate: https://www.walesonline.co.uk/news/wales-news/theres-still-mileage-name-taffy-2323388 https://www.walesonline.co.uk/news/wales-news/theres-still-m...

righthand 2mo 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 2mo ago
This project predates Clay by several years. Clay's earliest commit was 2024. Taffy was forked from https://github.com/vislyhq/stretch https://github.com/vislyhq/stretch in 2022, and Stretch's first commit was 2019. The real inspiration is https://github.com/react/yoga 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 https://github.com/DioxusLabs/anyrender does take a lot of inspiration from Clay's "drawing commands"

nicoburns 2mo 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 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 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.

fschuett 2mo ago
I used it in https://fschutt.github.io/printpdf 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.
kkukshtel 2mo 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://www.npmjs.com/package/kittyhtml https://github.com/kkukshtel/kittyhtml https://github.com/kkukshtel/kittyhtml
actsasbuffoon 2mo 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.
timw4mail 2mo ago
Floats? A fan of pain, are we?

chrisweekly 2mo ago

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

jdnier 2mo ago

There are Python bindings via the stretchable library. https://github.com/mortencombat/stretchable https://github.com/mortencombat/stretchable

davidhyde 2mo ago

This library can be used to build no_std guis on embedded hardware (microcontrollers with KBs of ram). It is that lightweight and fast.

thecaio 2mo ago

having some screenshots or screen recordings is always nice for... UI libraries