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.

Each layer sends data only to the layer below it. The window knows no runtime: each frame it hands the runtime a WindowFrame (its size, scale and refresh rate) and its WindowEvents. The runtime lays the frame out, paces the loop, and records a DrawList, which a renderer draws. A new platform is a new window that produces those; any renderer can draw for it, or a new one can be written against the DrawList. Bibui.Platform.Wayland and the managed rasterizer are both built this way.

The test server

The test server lets a test or an agent drive a running app: click, type, read the tree, take a screenshot. A BibuiApp starts it when asked, BibuiApp.Open(runtime, new("App", 800, 600), new BibuiAppOptions { TestServer = true }), or when the environment variable BIBUI_TEST_SERVER=1 is set. Otherwise it is off.

Component Library

bibui comes with components built from the same Box and Text primitives: buttons, switches, toggles, sliders, text fields, tabs, menus, dialogs, a Markdown viewer and more. Below, a multiline text field holds Markdown source, runtime.Markdown draws it as it is typed, and a switch changes the theme.

Every component, with pictures, is in Components.

Dependencies

bibui uses .NET 10, and the platform + rasterizer route your application uses decides which other dependencies it needs. In every case the dependency tree is small:

Package	NuGet dependencies	System libraries
Bibui.Core	System.IO.Hashing	libfreetype6, libharfbuzz0b (text)
Bibui.Raster.Skia	SkiaSharp (with its Linux native assets), Bibui.Gl	libfontconfig1
Bibui.Gl	Silk.NET.OpenGL (the GL binding only)	an OpenGL driver
Bibui.Platform.Silk	Silk.NET windowing, input and OpenGL (GLFW), Bibui.Gl, TextCopy	an OpenGL driver; GLFW itself ships with Silk.NET
Bibui.Platform.Wayland	none	libwayland-client, libwayland-cursor, libxkbcommon
Bibui.Platform.Browser	none	none: FreeType and HarfBuzz ship inside it, built for the browser; building an app needs the wasm-tools workload
Bibui.Raster.Managed.Backend	none (Bibui.Raster.Managed)	none beyond Bibui.Core's

The Wayland + managed route has no third-party NuGet dependencies at all, and it is the route that publishes with Native AOT; Silk.NET keeps the others on the JIT for now.

Documentation

The documentation is online at navisurgvision.com/bibui. In this repository:

• Getting started: from an empty project to a component with state, a headless test and a Native AOT binary.
• Concepts: boxes, layout, asking for interactions, retained boxes, painting.
• Theming: built-in themes, theme files and tokens.
• Components: every component, with pictures.
• Native AOT: publishing one native binary, and the trimming rules for app code.
• Samples: samples/showcase is an observatory console that uses most of bibui, samples/bibui-app is a short interactive app, and samples/component-gallery has a page per component.

Building from source

dotnet build bibui-core/bibui-core.csproj -c Release
dotnet run --project tests/bibui-runtime-tests -c Release   # runtime, components and layout tests
dotnet run --project samples/component-gallery              # every component in one window

CONTRIBUTING.md lists every test project and the rules a change keeps.

Licence

bibui is licensed under the Apache License 2.0. See LICENSE and NOTICE.