C++20

Declarative Flexbox UI for modern C++

A React-like component model with reactive state and selective re-rendering — built on the Yoga layout engine. If you know React, Flutter, or SwiftUI, you'll feel at home.

Get Started View on GitHub

Counter.cpp

#include <yui/yui.hpp>
using namespace yui;

Store<int> count(0);

VNode Counter() {
    int n = count.use();

    return Column(
        Text("Count: " + std::to_string(n))
            .fontSize(24).color(0xFFFFFFFF),

        Box(Text("+"))
            .padding(12)
            .backgroundColor(0xFF3366FF)
            .borderRadius(6)
            .onClick([] {
                count.set([](int& n) { n++; });
            })
    )
    .gap(16)
    .alignItems(AlignItems::Center);
}

A dual-tree reconciler and real flexbox, in C++20

Component model, selective re-rendering, and Yoga layout — the parts of React and Flutter that make UI code tractable, without leaving native.

Declarative & reactive

Describe what the UI should look like; yui reconciles the rest. A Store change re-renders one component in a tree of thousands — the rest is untouched.

Real flexbox layout

Powered by Facebook's Yoga engine. If you know CSS flexbox — row, column, gap, flexGrow, justifyContent — you already know yui layout.

Component model with hooks

useState, useRef, useEffect, useField. Local state, lifecycle effects, and two-way Store binding — the patterns you reach for, in C++20.

Fluent, chainable API

.padding(8).backgroundColor(0x1a1a1aFF).borderRadius(4).onClick(...). Layout, styling, and events compose into readable trees.

Dual-tree reconciler

A fiber tree tracks identity, hook state, and subscriptions; a flat render tree drives layout and hit-testing. Selective re-rendering, preserved state.

Pluggable backends

Ship with SDL2 or NanoVG, or write your own renderer against the render tree. Custom drawing via the Canvas primitive when you need raw graphics.

See it in action

Complete, runnable examples ship in the repo — build any of them with a single CMake target.

NanoVG showcase

Themeable component gallery — forms, lists, scroll, custom canvas — rendered with hardware-accelerated NanoVG.

examples/nvg_showcase.cpp

SDL2 showcase

The same component tree on the SDL2 backend. One UI, two renderers — swap backends without touching your views.

examples/sdl_showcase.cpp

Pong

A full game built on the Canvas primitive — real-time drawing, keyboard input, and game state through Store.

examples/pong.cpp

Get started in a minute

Add yui to your CMake project, or clone and run an example.

1 Add it to CMake

include(FetchContent)

FetchContent_Declare(
    yui
    GIT_REPOSITORY https://github.com/dustinlacewell/yoga-ui.git
    GIT_TAG        master
    GIT_SHALLOW    TRUE
)
FetchContent_MakeAvailable(yui)

target_link_libraries(your_app PRIVATE yui::yui)

FetchContent pulls yui and its Yoga / NanoVG submodules automatically.

2 Or clone & run

git clone --recursive https://github.com/dustinlacewell/yoga-ui.git
cd yoga-ui
cmake -B build
cmake --build build --target hello_world
./build/bin/hello_world

The --recursive flag pulls the layout-engine submodule. Requires a C++20 compiler and CMake 3.16+.

Read the Getting Started guide →