YUI - Declarative Yoga (Flexbox) UI

Development
1

I wanted to share a library I’ve been working on called Yoga UI.

image
image1000×700 41.5 KB

It was created to support a new module I’m working on that has atypical UI needs. There’s SDL2 and Nanovg renderers included. Here’s how you’d make a simple reactive counter component:

#include <yui/yui.hpp>

yui::Store<int> count(0);

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

    return yui::Column({
        yui::Text("Count: " + std::to_string(n)),
        yui::Box(yui::Text("+"))
            .padding(12)
            .backgroundColor(0xFF3366FF)
            .onClick([] { count.set(
                [](int& n) { n++; }
            );})
    }).gap(16).alignItems(yui::AlignItems::Center);
}

I know there are probably some oversights and better ways of doing things, happy to hear about your feedback. It’s likely not going to be very useful for most module developers, but I figured I’d share it anyway. :+1:

2 Likes
2

First of all, interesting. The UI looks very clean, regular and consistent. My biggest gripe would be the fashionable use of way too low contrast text.

A few things I ask myself or noticed:

  • The requirements say C++20 but Rack plugins are built to C++11.
  • It says NanoVG is bundled, but I imagine that for Rack plugin use, you have to work with the NanoVG version that is used for Rack.
  • How is it going to work with/interface with the param system used in Rack?

Are you planning to use this for larger pop-up/modal windows in your Rack plugin?

3

Thanks for taking a look Lars.

The look of the UI is dependent on the component styles and the renderer. The screenshot just shows default styles with the built in renderer. You can make it look however you’d like.

The C++20 requirement is speaking more to a general audience. Technically Yoga can be compiled with C++17 which is supported by the library.

NanoVG is included as a git submodule so you can compile the examples. I’ll clarify that. Works fine with rack.

YUI components support mouse and keyboard events so I don’t see any problem building a knob that drives a parameter or something like that. It’s also straight-forward to integrate existing Rack widgets into your YUI layout.

I mostly work on non-musical utility / quality-of-life modules. My next module has more UI than my others, and it was getting really tedious hand rolling and hand positioning components and managing their input events and so on. It’s much easier to just write some components that do whatever, then compose them together into a UI. It’d probably help cleaning up my previous modules too.

Even if you’re using 100% regular Rack modules, just being able to automatically position stuff is a comfort.

3 Likes