Skip to content

Open source · v0.2.0 preview

The GUI library
for Zig

Fast, lightweight and written in pure Zig. One codebase for desktop and the web.

zig fetch --save git+https://codeberg.org/shahwali/knots.git

Cross-platform

One codebase.
Every platform.

main.zig

Your app, written once in Zig.

zig build
  • macOSaarch64-macos
  • Windowsx86_64-windows
  • Linuxx86_64-linux
  • Webwasm32

Why Knots

Fast by default.
Simple by design.

GPU rendered

WebGPU or Vulkan, every frame.

Minimal dependencies

No C or C++ toolchain. Just Zig.

Fast builds

One language, one build system.

Hot reloading

See changes without restarting.

Modular

Use the whole thing, or just the UI engine.

Open source

Built in the open on Codeberg.

Playground

Try it live

A real Knots app, compiled to WebAssembly and running in your browser.

Knots Playground Open in new tab

WebAssembly · 1.3 MB · Needs a browser with WebGPU

Components

Batteries included

  • Color picker
  • Checkboxes
  • Radio buttons
  • Text input
  • Virtual lists
  • Tooltips
  • Context menus
  • Dialogs
  • Grid layout
  • Floating windows
  • Multiple windows
  • Custom themes

Get started

Up and running in minutes

  1. 1Fetch the package
  2. 2Add it to build.zig
  3. 3Describe your UI

Early preview. Needs a recent Zig; Linux is Wayland-only for now.

const std = @import("std");
const knots = @import("knots");
const ui = @import("ui");

pub fn main(init: std.process.Init) !void {
    var app = try knots.App.init(init.io, init.gpa, .{
        .window = .{ .width = 1280, .height = 720, .title = "Knots" },
    });
    defer app.deinit();
    try app.start(frame);
}

fn frame(_: *knots.View, frame_context: *ui.Frame) !void {
    const size = frame_context.input().logical_extent;
    try frame_context.e(ui.component.Rect{
        .width = .fixed(@floatFromInt(size.width)),
        .height = .fixed(@floatFromInt(size.height)),
        .padding = .init(16, 16, 16, 16),
        .key = .src(@src()),
    });
}

Start building