# react/yoga **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-yoga).** 18,790 stars · 1,545 forks · C++ · MIT ## Links - GitHub: https://github.com/react/yoga - Homepage: https://yogalayout.dev/ - awesome-repositories: https://awesome-repositories.com/repository/react-yoga.md ## Description Yoga is a cross-platform layout engine and embeddable core that determines the dimensions and offsets of hierarchical element trees. It provides a C++ implementation of the Flexbox layout model to calculate element positions and sizes based on web standards, ensuring a uniform appearance across diverse devices and operating systems. The engine is designed for portability via a C API, allowing the layout logic to be integrated into various host languages and platforms. It utilizes an incremental layout system that identifies modified subtrees and recalculates positions only for changed nodes and their ancestors to avoid full tree recomputation. The library covers a broad range of layout capabilities, including the application of box model styling with margins, padding, and borders. It resolves dimensions using absolute points or percentages and manages a tree-based hierarchy to propagate constraints and calculate relative positioning. ## Tags ### User Interface & Experience - [Cross-Platform Layout Engines](https://awesome-repositories.com/f/user-interface-experience/cross-platform-layout-engines.md) — Provides a portable engine for determining dimensions and offsets of element trees across diverse platforms. - [Flexbox Layout Engines](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines.md) — Provides a Flexbox layout engine for aligning and distributing elements within containers using responsive properties. - [Layout Engines](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-engines.md) — Provides a layout engine to calculate the size and position of UI elements based on constraints. ([source](https://yogalayout.dev/docs/about-yoga)) - [Incremental Calculation](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-engines/incremental-calculation.md) — Calculates positions only for modified nodes and their ancestors to avoid full tree recomputation. - [Incremental Layout Systems](https://awesome-repositories.com/f/user-interface-experience/incremental-layout-systems.md) — Flag nodes with changed layout results to skip updates for unchanged branches of the user interface tree. ([source](https://yogalayout.dev/docs/advanced/incremental-layout)) - [Layout & Positioning](https://awesome-repositories.com/f/user-interface-experience/layout-positioning.md) — Determines the final spatial arrangement and dimensions of visual elements in a hierarchical tree. ([source](https://yogalayout.dev/docs/getting-started/laying-out-a-tree)) - [Embeddable Core APIs](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/embeddable-core-apis.md) — Offers a C API to integrate the layout core into various host languages and target platforms. ([source](https://yogalayout.dev/docs/about-yoga)) - [Embeddable Cores](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/embeddable-cores.md) — Ships as a portable layout library with a C API for integration into various host languages. - [Layout Metric Extraction](https://awesome-repositories.com/f/user-interface-experience/layout-object-retrieval/layout-metric-extraction.md) — Allows the extraction of resolved dimensions, offsets, and spacing values from nodes after layout computation. ([source](https://yogalayout.dev/docs/getting-started/laying-out-a-tree)) - [Box Sizing Configurations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-base-styles/box-sizing-configurations.md) — Manages how element dimensions are calculated relative to padding and borders to ensure uniform spacing. ### Part of an Awesome List - [Cross Platform Layout Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/cross-platform-layout-libraries.md) — Provides a cross-platform library that brings flexbox layout capabilities to non-web environments. ### Graphics & Multimedia - [UI Hierarchy Organizers](https://awesome-repositories.com/f/graphics-multimedia/element-organizers/ui-hierarchy-organizers.md) — Structures UI elements into parent-child stacks for nested container management and constraint propagation. - [UI Tree Layout](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/ui-reconciliation-composition/incremental-rendering-systems/ui-tree-layout.md) — Implements an incremental layout system that only recalculates modified subtrees and their ancestors. - [Flexbox and Grid Layouts](https://awesome-repositories.com/f/graphics-multimedia/web-standard-rendering/flexbox-and-grid-layouts.md) — Implements the flexible box model for geometric computation of element positioning in non-browser environments. ### Software Engineering & Architecture - [Layout Tree Construction](https://awesome-repositories.com/f/software-engineering-architecture/trees/syntax-tree-construction/dom-tree-construction/layout-tree-construction.md) — Allows the creation and linking of nodes to establish a hierarchical structure for UI elements and styling. ([source](https://yogalayout.dev/docs/getting-started/laying-out-a-tree)) - [Dirty Flagging Systems](https://awesome-repositories.com/f/software-engineering-architecture/dirty-flagging-systems.md) — Uses dirty-flagging mechanisms to mark nodes needing updates and optimize layout re-calculation. ### Web Development - [CSS Box Model Renderers](https://awesome-repositories.com/f/web-development/dom-to-canvas-renderers/css-box-model-renderers.md) — Calculates element dimensions, margins, and padding according to the CSS box model. ([source](https://yogalayout.dev/docs/styling/)) - [Constraint-Based](https://awesome-repositories.com/f/web-development/layout-engines/constraint-based.md) — Implements solvers that determine component dimensions and positions based on a set of defined rules and constraints. - [Relative Layout Dimensions](https://awesome-repositories.com/f/web-development/sizing-unit-systems/relative-layout-dimensions.md) — Processes layout sizes using absolute points and relative dimensions to maintain consistency across screens. ([source](https://yogalayout.dev/docs/styling/)) ### Content Management & Publishing - [Incremental Layout Engines](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/document-processing-conversion/document-processing-engines/incremental-layout-engines.md) — Implements an incremental layout engine that updates only modified nodes and their ancestors. ### Operating Systems & Systems Programming - [C++ Core Implementations](https://awesome-repositories.com/f/operating-systems-systems-programming/c-core-implementations.md) — Provides a high-performance core written in C++ with a C API for embedding across different platforms.