yoga

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"

Not really. Everything has a spec, so it's pretty clear what's in scope and what isn't. Also, we don't have time for bloat with our team size. We have to be laser focussed on what actually makes a difference to real websites. It's Chrome that has bloat! Also the specs don't change much (there are additions, but almost always backwards-compatible), so once written the code shouldn't need too much maintenance. I see it as writing a piece of foundational infrastructure. You can write your own HTTP library. But you don't need to: there are high-quality libraries readily available (e.g. curl or hyper). Similarly for HTML parsers or 2D graphics rendering. Nobody's done that for web layout yet (except arguably React Native's Yoga [0], but that's much less ambitious in terms of how much of the spec it attempts to support), so everybody has to wri

Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet. One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native) 1: http

For React Native the facebook engineers just gave up and were like "all you get is flexbox layout" and people were quite okay with that (although some people grumble about lack of display grid) https://github.com/facebook/yoga

For flexbox check out Facebook Yoga (https://github.com/facebook/yoga) or Webkit.js (https://github.com/trevorlinton/webkit.js).

Unfortunately not for nested inline nodes, like spans of text with formatting. For a lot of uses, that will be OK - but for rendering say, markdown text, Satori won't work. The upstream layout engine handles flexbox layout, and it's unclear if Facebook needs inline layout or if Vercel would pick it up and close the gap: https://github.com/facebook/yoga Then again, for the main purpose Satori is advertised for - generating URL unfurl previews - Dropflow looks like it might be the answer.

There's also Facebook's Yoga: https://github.com/facebook/yoga

Nope, from what I can tell the entire backend is a Qt C++ binding[1] for the C++ Yoga library[2][3]. You can see the Qt C++ backend is exposed to QML here[4]. So it's C++ all the way down just in a comfortable setting. [1] https://github.com/tripolskypetr/qml-flexbox/blob/master/obj... [2] https://github.com/tripolskypetr/qml-flexbox/tree/master/thi... [3] https://github.com/facebook/yoga [4] https://github.com/tripolskypetr/qml-flexbox/blob/677a1287df... P.S. I'll answer your other reply very soon. I'm releasing a new version of my app so it takes its toll on me.

We have our own test suite (orginally derived from the test suite of Meta's Yoga layout library [0]) which consists of text fixtures that are small HTML snippets [1] and a test harness [2] that turns those into runnable tests, utilising headless chrome both to parse the HTML and to generate the assertions based on the layout that Chrome renders (so we are effectively comparing our implementation against Chrome). We currently have 686 generated tests (covering both Flexbox and CSS Grid). We would like to run the Web Platform Test suite [3] against Taffy, however these are not in a standard format and many of the tests require JavaScript so we are not currently able to do that. [0]: https://github.com/facebook/yoga [1]: https://github.com/DioxusLabs/taffy/tree/main/test_fixtures [2]: https://github.com/DioxusLabs/taffy/tree/main/scripts/gen

Taffy is a standalone high-performance UI layout library written in Rust that has been consuming a large part of my free time for the past ~6 months. The Flexbox implementation has been around from a few years, and was inherited from Taffy's abandoned predecessor library Stretch (which was previously featured on HN [0]) which was itself indirectly derived from Yoga [1] the C++ library which powers React Native. What's new here is the CSS Grid implementation, which I believe is the first CSS Grid implementation available as an easily embeddable library rather than as part of a web browser. Meaning you can now get both 1D and 2D layout from the same library. The CSS Grid implementation was written by me. So AMA. [0]: https://news.ycombinator.com/item?id=19780790 [1]: https://github.com/facebook/yoga

A repo for the @vercel/og API it uses isn't here: https://www.npmjs.com/package/@vercel/og ...but it's easy enough to find on https://www.jsdelivr.com/package/npm/@vercel/og It looks to be a tiny bit of glue code (minified but with source maps that I didn't examine), 2 wasm bundles which are probably open source, and an open source font. Clever but I happen to be looking for documented open source stuff that does this. I guess knowing the names of yoga (which is a library from Facebook I already heard about) and resvg (which I probably already heard about) is a good starting point! https://github.com/facebook/yoga https://github.com/yisibl/resvg-js Edit: fonts are here https://github.com/yisibl/resvg-js/search?q=font and the yoga part seems to be here https://news.ycombinator.com/item?id=33156130 It's pretty neat but I think most of this

Interesting. I was thinking that this was going to be a crazy amount of layout engine work, but now I look a little closer it appears the layout work is farmed out to yoga [0] (not trying to take away anything from the effort here). So this project is almost a wrapper around running yoga as a renderer and using SVG as a form of backend target? I say "appears" because the yoga landing page doesn't do a great job of explaining what it does. EDIT Just looking at some of the information about the font side of things and the naming is a little confusing. You set embedFont=false to use text instead of converting the text to paths. embedFont=true sounds a lot like it will embed the _font_ required to render the _text_ - but it kinda does the opposite. https://github.com/vercel/satori#font-embedding [0] https://github.com/facebook/yoga

Glad to see some agreement there. I'm interested in building an ECS-based approach for a UI system at some point. The Yoga layout engine (implements flexbox -- https://github.com/facebook/yoga/tree/master/yoga) seems to actually be pretty amenable to just incorporating as a `Layout` or `Flex` component, then you could have components for platform-specific renderings (eg. `iOSTextInput`, `AndroidTextInput`, `DOMTextInput` in wasm, ...) that could read from cross-platform common components (`TextInput`). A core aspect would also be a `Hierarchy` component that just has a parent entity id and a list of child entity ids (that it keeps in sync properly). Then bind things to JS and allow you to code it from React, while still being able to eg. run an animation thread for some specific animations that just queries and reads/writes the `Layout` a

I'm a layout implementor for Planimeter's Grid Engine. Implementing a naive subset of the algorithm for calculating the box sizes in the visual formatting model and calculating layout for normal flow, relative positioning, and absolute positioning is far easier to implement than flexbox.[1] There's nothing insane about this. And you'll learn even more when trying to draw to the screen. Normal flow also doesn't require multiple passes, whereas flexbox does.[2] Even Yoga doesn't implement a conforming model.[3] I'd even speculate that flexbox performs slower than the standard visual formatting model just because of the differences in the algorithm. Transform order absolutely matters. Any attempts to coerce order into a standardized sequence means developers have to account for this information.[4] [1]: https://github.com/Planimeter/grid-sdk

It's wrong. https://github.com/facebook/yoga/tree/master/yoga