yoga README

The project's README from github.com/react/yoga. As one markdown file: README.md.

Yoga npm Maven Central SPM

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.

Building

Yoga's main implementation targets C++ 20 with accompanying build logic in CMake. A wrapper is provided to build the main library and run unit tests.

./unit_tests <Debug|Release>

While not required, this script will use ninja if it is installed for faster builds.

Yoga is additionally part of the vcpkg collection of ports maintained by Microsoft and community contributors. If the version is out of date, please create an issue or pull request on the vcpkg repository.

Adding Tests

Many of Yoga's tests are automatically generated, using HTML fixtures describing node structure. These are rendered in Chrome to generate an expected layout result for the tree. New fixtures can be added to gentest/fixtures.

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

To generate new tests from added fixtures:

  1. Ensure you have yarn classic installed.
  2. Run yarn install to install dependencies for the test generator.
  3. Run yarn gentest in the yoga directory.

Debugging

Yoga provides a VSCode "launch.json" configuration which allows debugging unit tests. Simply add your breakpoints, and run "Debug C++ Unit tests (lldb)" (or "Debug C++ Unit tests (vsdbg)" on Windows).

yoga (react/yoga)

unit-testing
Searching Database…

18.9K ·GitHub
Yoga
What is this?Yoga is an embeddable, high-performance flexbox layout engine written in C++ that computes UI layout trees and ships with bindings for multiple languages.
Is it a standalone framework or something I embed in my own UI stack?It's a library/engine, not an app or UI framework by itself: you feed it a node tree with flexbox properties and it hands back computed positions and sizes, which your own rendering layer then draws.
How do I build it or add it to a project?Build the C++ core with CMake (it targets C++20) using the provided wrapper script, which uses ninja automatically if it's installed for faster builds; it's also distributed through vcpkg and via language-specific packages like npm.
What do I need installed before building it?A C++20-capable toolchain plus CMake for the core build; if you also want to add or regenerate tests you need Yarn Classic installed and Chrome, since test fixtures are rendered in Chrome to produce expected layout results.
If I grab Yoga through vcpkg, is it guaranteed to be current?No, it's community maintained: if the vcpkg version is out of date, you're expected to file an issue or pull request against the vcpkg repository yourself rather than Yoga's own repo.
Which languages does Yoga actually have bindings for?Beyond the C++20 core, the build tooling and CI cover Java/Kotlin (with Android release and snapshot workflows) and Swift, plus JavaScript/TypeScript tooling for tests and an npm release pipeline.
How are Yoga's layout tests created?Most tests are auto-generated from HTML fixtures placed in gentest/fixtures; running 'yarn gentest' renders them in Chrome and turns the resulting layouts into test cases.
How do I debug a failing C++ unit test?Open the project in VSCode, set breakpoints, and launch the 'Debug C++ Unit tests (lldb)' configuration (or the 'vsdbg' variant on Windows) from the provided launch.json.
Where does Yoga's output end up besides the core C++ library?CI workflows publish Android releases and snapshots plus npm releases, so consumers can pull Yoga as a C++ source via vcpkg, a Java/Kotlin artifact for Android, or a JS package from npm.
What are similar projects?flexbox-layout, ink, googletest, flatbuffers, coost, folding-cell, aws-doc-sdk-examples, clay
Which topics is it in?flexbox, layout, unit-testing, ui-library, cmake, vscode, kotlin, swift, testing, cpp, c++, java
Creator
react
Size
26.7 MB
Stars
18.9K
Updated
CommitOct 19Releasev3.2.1Dec 13
Age
12y
Commits · 90 Days