ELI5: Yoga - Cross-Platform Layout Engine

In this post, we will discuss Yoga, an open source, cross-platform layout engine. If you are more of a visual learner, watch our short video on this topic on our YouTube channel.

Why Yoga?

People will often view the same website across a variety of devices, browsers and screen sizes. Since every platform has its way of displaying content, web developers have to design, maintain and change their website layout to accommodate every possible way users can view their website. That’s a lot of work. If only there was an engine that allows web developers to write their code once and use it everywhere.

Presenting Yoga, an open source, cross-platform layout engine that manages user interfaces across platforms by reusing CSS layouts. This approach brings a single standard for all users, allowing developers to focus on other tasks at hand.

Yoga implements a commonly used tool called CSS Flexbox. This project allows developers to build flexible layouts on any platform with a highly optimized layout engine designed with speed, size and ease of use in mind.

To compete with native platforms, Yoga emphasizes performance. Written in C and C++, Yoga lets its users have a low number of dependencies while providing a smooth user experience.

One of the goals of Yoga’s developers was making it easy to learn this layout engine. They created an interactive playground, so every feature of Yoga can be experimented with right in the browser and then brought into a platform of your choice.

Where is it used?

Yoga was first open sourced in 2016. Since then, open source projects like Litho, ComponentKit, React Native, or React-PDF have been actively using Yoga.

Where can I learn more?

To learn more about Yoga, visit their website. Yoga has an in-browser playground, getting-started guides and more! If you would like to ask a community member a question, go to Yoga’s Twitter or GitHub page.

If you have any further questions about Yoga, let us know on our YouTube channel or tweet at us.

About the ELI5 series

In a series of short videos (~1 min in length), one of our Developer Advocates on the Facebook Open Source team explains a Facebook open source project in a way that is easy to understand and use.

We will write an accompanying blog post (like the one you're reading right now) for each of these videos, which you can find on our YouTube channel.

To learn more about Facebook Open Source, visit our open source site, subscribe to our YouTube channel, or follow us on Twitter and Facebook.

Interested in working with open source at Facebook? Check out our open source-related job postings on our career page by taking this quick survey.