cassowary.js

Cassowary's big differentiator 25+ years ago was that it is robust against cycles in constraints and supported inequalities. Those two facts made it instantly way easier to use than the local-propagation-based solvers that predated it (think spreadsheet-style formulas referencing cells where you can only compute values using equality assignment and you can't create cyclic references). Cassowary being able to solve that broader class of problems in an efficient and incrementally (using prior solutions to the problem to make subsequent solutions even faster) was why Apple chose it for Autolayout in the later '00s. Their Visual Formatting Language was a nice ease-of-use enhancement, too. The original cassowary repo is https://github.com/gjbadros/cassowary and there was a nice improved port to Javascript 15 years ago: https://github.com/sli

Constraint-based layout using the Cassowary algorithm seemed like a popular alternative for a while (see https://github.com/slightlyoff/cassowary.js/?tab=readme-ov-f...). It’s designed to solve for variance in screen size and shape. Apple switched to Swift UI and may have moved on from this approach.

If so, what has been your experience? What are the promising libraries available? Since CSS layout continues to be a real PITA, I am especially interested in JS implementations like cassowary.js [1], which seems to be inactive, though 1. github.com/slightlyoff/cassowary.js

You should probably point out that this repo is a much better JS version: https://github.com/slightlyoff/cassowary.js/

The Cassowary Constraint Solver used in GSS is considered the most viable & perf-sensitive linear arithmetic constraint solver for real-time use-cases, hence Apple's adoption of Cassowary across iOS & OS X. The GSS website is a good example, with about 400 atomic constraints on the homepage. Major bottleneck is reading / writing DOM, resolving element queries; not Cassowary's constraint resolution. GSS uses the canonical JS port of Cassowary maintained by Alex Russell: https://github.com/slightlyoff/cassowary.js Adam Solove had a good JSConf talk on Constraint Programming in the Browser that touches on Cassowary.js & perf benefits: http://www.youtube.com/watch?v=72sWgwaAoyk

Though obvious, FWIW: correct link to [1] https://github.com/slightlyoff/cassowary-js-refactor

I agree with you 100% about the need to separate styling from layout. CSS for layout just plain sucks. Layouts that should be simple turn out to require hack upon hack to achieve. In regard to your layout in JS question. There is an excellent port of the Cassowary constraint solver in JS [1]. It allows you to specify complex relationships between containers along with weights, which allow you to specify layouts in a sane manner. Performance is very good, especially since it takes advantage of web workers where available. What I hate most about layout in CSS is that it takes something that should be brain-dead simple and turns it into something that requires memorization of edge cases and browser hacks with some added voodoo magic. It's such a waste of brain cycles. To top it all off constraint based solvers have been around for over 20 ye