bibui

bibui is an immediate-mode UI library for .NET.

The library consists of a few UI node types such as a Box and Text, and everything you build is a composition of these simple primitives.

Zenith is a clauded showcase app provided as a reference for inspiration on how you build applications with bibui.

Platforms: Linux on x64, and the browser through .NET WebAssembly. Other platforms are not supported yet. We expect macOS, and maybe even iOS, to be supported in the near future.

Install

Prerequisites

• .NET 10.

Add the Bibui package to a console app:

dotnet new console -n Counter && cd Counter
dotnet add package Bibui

Bibui is all of bibui in one reference: the core, BibuiApp on a Silk.NET window drawn by Skia on OpenGL, and every other window, renderer and the testing package beside it.

Quick start

With Bibui referenced, samples/counter is a whole bibui app: a label and a button that counts its clicks.

using Bibui.App;
using Bibui.Core.Runtime;

var runtime = BibuiRuntime.Create();
using var app = BibuiApp.Open(runtime, new("Counter", 360, 160));
int count = 0;
app.Frame = Frame;   // the window draws it too, during a resize

while (app.WaitForFrame()) Frame();

void Frame()
{
    runtime.BeginBuild(app.Window.Frame, app.Events);

    runtime.BeginCenterXY();
    var column = runtime.BeginParent(runtime.Column());
    {
        runtime.Text($"Clicked {count} times");
        runtime.Gap(12);
        if (runtime.Button("add", "Add one").Clicked)
            count++;
    }
    runtime.EndParent(column);
    runtime.EndCenterXY();

    runtime.EndBuild();
    app.Present();
}

The app owns the loop. app.WaitForFrame() waits until there is a frame to draw (input, or one the runtime owes) and returns false once the window closes; an app with nothing happening waits on the OS and uses no CPU. Frame builds the frame on the window as it is now (app.Window.Frame: its size, scale and refresh rate) and presents it.

You can run the app using the Skia+OpenGL backend with

dotnet run --project samples/counter-gl

Minimal dependencies

bibui consists of a core part, bibui-core, that defines how you build user interfaces with bibui through layout constraints and the builtin UI node types. By itself it has no idea how to talk to the OS to get window and input events, or do any type of rendering of the UI.

An app package references bibui-core and a window and renderer. By default Bibui packages the Bibui.App.SilkSkiaGl app package, but you may reference any of the below builtin app packages instead of Bibui, and get only the dependencies of its window and renderer:

Package	Window	Renderer	Native AOT
Bibui.App.SilkSkiaGl	Silk (GLFW)	Skia on the GPU (OpenGL)	No, JIT only for now
Bibui.App.SilkSkiaCpu	Silk (GLFW)	Skia on the CPU	No, JIT only for now
Bibui.App.SilkManaged	Silk (GLFW)	managed rasterizer, on the CPU	No, JIT only for now
Bibui.App.WaylandManaged	Wayland	managed rasterizer, on the CPU	Yes
Bibui.App.WaylandSkiaCpu	Wayland	Skia on the CPU	Yes, beside libSkiaSharp.so

dotnet add package Bibui.App.WaylandManaged   # no third-party NuGet dependencies, and Native AOT

An app that publishes with Native AOT references a Wayland app package this way rather than Bibui, whose Silk.NET keeps an app on the JIT.

Every app package has the same BibuiApp and the same calls, so changing the package changes the target and nothing in the code. Reference one at a time: each defines BibuiApp, and Bibui already includes Bibui.App.SilkSkiaGl. The counter-gl, counter-cpu and counter-wayland samples compile the same app, samples/counter, each with a different package. App packages has the details.

In the browser there is no app package: a browser app references Bibui.Platform.Browser and a renderer, and the browser owns the loop. samples/counter-browser is the counter there, and bibui in the browser has the details.

The bibui UI tree structure

bibui has no dedicated Column type that contains a list of its children. Instead every node (UiNode, which Box and Text derive from) links to its Parent, its FirstChild/LastChild and its siblings Prev/Next, so any box holds a subtree. Column() is a fast path for a Box that lays its children out on the y-axis and is sized to fit its children.

In the sample, runtime.BeginParent(column) and runtime.EndParent(column) bracket a scope where all boxes built through the runtime are added as children of column.

Each node is built where it goes: the text, then the button, in the order they appear in the column.

runtime.Button is itself a composition: a Box that claims left presses, with a Text inside. button.Clicked reports an Interaction as a struct with all the interactions the Box took.

bibui app from scratch

A Bibui.App package is a window package and a renderer package put together, with the loop's calls. You may instead reference Bibui.Core, a window (Bibui.Platform.Silk, Bibui.Platform.Wayland) and a renderer (Bibui.Raster.Skia, Bibui.Raster.Managed.Backend) directly, and write the loop yourself: Writing the loop yourself shows it.

This is the beginning of the README. Read the rest at the original. Read the full README ↗