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
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.
