Quickstart

Get the library

Kinogaki UI ships as a prebuilt library + headers; download the archive for your platform from Releases (it bundles Kinogaki Platform, which it links for the window and GPU). Text rendering uses FreeType.

# kinogaki-ui-<version>-macos.tar.gz → include/ + lib/
c++ -std=c++20 -Ikinogaki-ui/include app.cpp \
    -Lkinogaki-ui/lib -lkinogaki-ui -lkinogaki-platform -lkinogaki-core -lfreetype

Everything is under kinogaki::ui (widgets, layout, theming) and kinogaki::gpu (the drawing layer); the window and GPU come from kinogaki::platform. (Builds from source with ./build.sh too.)

A window with a panel

A minimal app: open a window, build a theme, host a widget tree in a WidgetView, and run the loop.

#include "kinogaki/platform/System.h"
#include "kinogaki/ui/App.h"
#include "kinogaki/ui/Build.h"
#include "kinogaki/ui/Themes.h"
#include "kinogaki/ui/WidgetView.h"
using namespace kinogaki;

int main() {
    auto sys    = platform::createSystem();
    auto window = sys->createWindow("Inspector", 480, 360);
    auto font   = gpu::makeTrueTypeFont(/*device*/…, "/System/Library/Fonts/Helvetica.ttc", 13, 2.0f);
    auto theme  = ui::makeFlatTheme(font.get());

    float amount = 0.4f;
    auto view = std::make_unique<ui::WidgetView>(theme.get());
    view->setRoot(ui::column(
        ui::title("Inspector"),
        ui::field("Amount", ui::slider(amount, [&](float v){ amount = v; })),
        ui::button("Apply", [&]{ /* … */ })));

    ui::App app(*sys, *window);
    app.add(std::move(view));
    app.run();          // event-driven; idle = no GPU work
}

column, field, slider, button are factories from Build.h: containers take their children directly and leaves configure up front, so the tree is one expression. A WidgetView is a region that hosts a widget tree, lays it out, draws it, and routes events.

What just happened

createSystem / createWindow came from Kinogaki Platform, the OS boundary.
makeFlatTheme wrapped a font and metrics into a theme; swapping it re-skins the whole UI.
App.run entered the event-driven loop: it blocks on input, repaints only dirty regions, and synthesizes Click/Drag intent from raw events before dispatch.
column(...) built a retained widget tree laid out in two phases (measure, then arrange).

From here: the drawing layer under the widgets, the widget catalogue, layout containers, docking for multi-pane apps, and themes to restyle it all.

‹ Overview The app loop ›