taffy
yoga
Our great sponsors
taffy | yoga | |
---|---|---|
36 | 23 | |
1,794 | 16,905 | |
6.9% | 0.8% | |
8.6 | 9.5 | |
10 days ago | 4 days ago | |
Rust | C++ | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
taffy
-
Show HN: Dropflow, a CSS layout engine for node or <canvas>
I maintain a standalone web layout engine[0] (currently implementing Flexbox and CSS Grid) which has no scripting support. WPT layout tests using is a major blocker to us running WPT tests against our library. Yoga (used by React Native) is in a similar position.<p>Do you think the WPT would accept pull requests replacing such tests with equivalent tests that don't use <script> (perhaps using a build script to generate multiple tests instead - or simply writing out the tests longhand)?<p>I could run against only the ref-tests, but if I can't get full coverage then the WPT seems to provide little value over our own test suite.<p>[0]: <a href="https://github.com/DioxusLabs/taffy">https://github.com/DioxusLabs/taffy</a>
-
CSS for Printing to Paper
> Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable?
Servo could be used for this. You'd want to add support for parsing the CSS properties themselves to the style crate in https://github.com/servo/stylo and then the layout implementation to the layout2020 crate in https://github.com/servo/servo. You do effectively get a whole browser though.
I'm currently working on building a lighter weight / hackable layout engine based on a combination of https://github.com/servo/stylo (for css parsing and selector resolution), https://github.com/DioxusLabs/taffy (for box-level layout) and https://github.com/pop-os/cosmic-text (for flow/inline layout). I expect to have something decent in around 6 months
Neither of these setups currently have any support for pagination though.
-
I'm fed up with it, so I'm writing a browser
I maintain a web layout library that is designed to be integrated into other software:
https://github.com/DioxusLabs/taffy
It needs to be combined with a text layout engine (such as https://github.com/pop-os/cosmic-text), and it doesn't support everything yet (notable features that are currently missing: "float", "display: inline-block", "box-sizing: content-box", "position: static"). But we have Block, Flexbox and CSS Grid support with more on the way.
-
Looking for this. html + css rendering through wgpu.
All of these projects have in common that they use Taffy (the project that I work on!) for box-level layout (which currently gives them block, flexbox, and grid layout) , and are either using or planning to use cosmic-text for text/inline layout. This gives you a decent first approximation of web layout, but it's not perfect and there are major features like float, display: inline-block, position: static, box-sizing: content-box missing. Not to mention that none of these implementations currently resolve CSS selectors, so you are effectively limited to inline styles (if you're interested in something in that direction then you may be interested in https://github.com/vizia/vizia).
-
Show HN: Slint - A Declarative UI Toolkit Written in Rust for Embedded & Desktop
While there are a lot of Rust UI frameworks, none of them are really recommended for production use yet. I suspect a few of the will die off and work will coalesce a few once things mature a bit.
Another nice feature of the Rust UI ecosystem is that lots of it is being built in a modular way. For example I maintain a layout engine [0] library which just does layout and can be easily integrated by anybody creating a UI library. And there a bunch of similar composable libraries covering rendering, text layout, accessibility, window creation, clipboard access, etc.
[0]: https://github.com/DioxusLabs/taffy
-
Conflict-Driven Synthesis for Layout Engines
You might be interested in the combination of Taffy [0] which handles box-level browser layout (block, flexbox, grid, etc) and Cosmic Text [1] which handles text-level layout and basic text editing functionality.
Integrating them into browsers while retaining accessibility could be tricky. But in they're general they're relatively small standalone libraries implementing most of the layout algorithms that browsers implement (although there are currently a few key missing features like laying out "inline-block" items in line with text).
[0]: https://github.com/DioxusLabs/taffy
[1]: https://github.com/pop-os/cosmic-text
-
Ink: React for interactive command-line apps
I maintain a library (https://github.com/DioxusLabs/taffy) that implements both Flexbox and CSS Grid, and is designed to be easily embedded (similar to Yoga, which Ink is using).
-
[Media] Version 0.3 of Inlyne - An interactive markdown renderer written entirely in Rust
https://github.com/DioxusLabs/taffy (disclaimer: I work on this crate) which does CSS layout given CSS styles. This would probably be much more useful once we merge support for display: block (https://github.com/DioxusLabs/taffy/pull/474), and if in the future we support display: table. Taffy doesn't handle text layout but is designed to integrate nicely with external layout systems.
-
Project idea: port markdownlint to Rust
Ok, "1.4GB" made me look into this more. I hadn't realised that we were using a "superlinter" action that includes linters for over 10 languages. Switching to a different github action brought to time down to 3 seconds! https://github.com/DioxusLabs/taffy/pull/463
- GitHub Accelerator: our first cohort and what's next
yoga
- Show HN: Dropflow, a CSS layout engine for node or <canvas>
-
Building Reddit’s Design System on iOS
We still wanted to leverage a layout engine that could be performant and easy-to-use. After doing some performance testing with native UIKit, Autolayout, and a few other third-party options, we ended up bringing FlexLayout into the mix, which is a Swift implementation of Facebook’s Yoga layout engine. All RPL components utilize FlexLayout in order to lay out content fast and efficiently. While we’ve enjoyed using it, we’ve found a few touch points to be mindful of. There are some rough edges we’ve found, such as utilizing stack views with subviews that use FlexLayout, that often come at odds with both UIKit and FlexLayout’s layout engines.
-
We're building a browser when it's supposed to be impossible
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 utilise the Web Platform Test suite [3], 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/gentes...
[3]: https://github.com/web-platform-tests/wpt/tree/master/css/cs...
-
minimax — minimalist 3D game engine in Clojure
The "engine" is built on top of amazing https://www.lwjgl.org/ and https://github.com/bkaradzic/bgfx/, and UI system is baked by https://github.com/memononen/nanovg and https://github.com/facebook/yoga
- Show HN: Taffy – CSS Grid (+Flexbox) as a Library
-
React vs React Native: How Different Are They, Really?
React Native uses the Yoga engine under the hood, which allows you to use CSS properties to layout your React Native UI in a way that translates really well. Layout in Yoga is limited to Flexbox and absolute/relative positioning, however; there is no CSS grid and no display attribute. This keeps things simpler and more performant, but if developers are accustomed to using other layout techniques on the web, they’ll need to adjust to this new limitation.
- When dealing with UI, does any of you uses glViewport to layout your elements in the correct place?
-
Taffy 0.2 Release: Blazing Fast UI Layout in Rust. Now with `gap`!
PR #246 is super interesting to check out: by fixing the caching strategy, we were able to eliminate an exponential time (with respect to tree depth) performance penalty, and get comparable speeds for flat and deeply nested layouts (something I'd never expected to be possible). Preliminary benchmarks shows us significantly faster than yoga, Meta's C++ library for the same thing, especially on deep trees. Not too shabby for a tiny team of volunteers!
-
How To Build a CLI With Node.js and React
You're going to build the CLI using Ink, a React component-based library for building interactive CLIs. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. Ink is simply a React renderer for the terminal, so all the React features are supported. No need to learn a new syntax specific to Ink.
-
Show HN: Satori – Convert HTML and CSS to SVG in Milliseconds
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.
[0] https://github.com/facebook/yoga
What are some alternatives?
dioxus - Fullstack GUI library for web, desktop, mobile, and more.
react-native-skia - High-performance React Native Graphics using Skia
stretch - High performance flexbox implementation written in rust
hermes - A JavaScript engine optimized for running React Native.
mirrord - Connect your local process and your cloud environment, and run local code in cloud conditions.
react-native-skia - Cross platform React Native solution to draw graphics based on Skia
pomsky - A new, portable, regular expression language
pypandoc - Thin wrapper for "pandoc" (MIT)
react-navigation - Routing and navigation for your React Native apps
wpt - Test suites for Web platform specs — including WHATWG, W3C, and others
satori - Enlightened library to convert HTML and CSS to SVG