GitHub - gogpu/ui: Pure Go GUI toolkit built on GoGPU — widgets, layouts, styling

git clone https://github.com/gogpu/ui.git
cd ui/examples/hello
go run .

package main

import (
    "log"

    _ "github.com/gogpu/gg/gpu"
    "github.com/gogpu/gogpu"
    "github.com/gogpu/ui/app"
    "github.com/gogpu/ui/desktop"
    "github.com/gogpu/ui/primitives"
    "github.com/gogpu/ui/widget"
)

func main() {
    gogpuApp := gogpu.NewApp(gogpu.DefaultConfig().
        WithTitle("My App").
        WithSize(800, 600))

    uiApp := app.New(
        app.WithWindowProvider(gogpuApp),
        app.WithPlatformProvider(gogpuApp),
        app.WithEventSource(gogpuApp.EventSource()),
    )

    uiApp.SetRoot(
        primitives.Box(
            primitives.Text("Hello gogpu/ui!").
                FontSize(24).Bold().
                Color(widget.RGBA8(33, 33, 33, 255)),
            primitives.Text("Enterprise-grade GUI for Go").
                FontSize(16).
                Color(widget.RGBA8(100, 100, 100, 255)),
        ).Padding(24).Gap(12).Background(widget.RGBA8(255, 255, 255, 255)),
    )

    if err := desktop.Run(gogpuApp, uiApp); err != nil {
        log.Fatal(err)
    }
}

GOGPU_GRAPHICS_API=vulkan   go run ./examples/hello/   # Vulkan (default on Linux)
GOGPU_GRAPHICS_API=dx12     go run ./examples/hello/   # DirectX 12 (Windows)
GOGPU_GRAPHICS_API=metal    go run ./examples/hello/   # Metal (macOS)
GOGPU_GRAPHICS_API=gles     go run ./examples/hello/   # OpenGL ES
GOGPU_GRAPHICS_API=software go run ./examples/hello/   # CPU software renderer

┌─────────────────────────────────────────────────────────────┐
│                    User Application                         │
├─────────────────────────────────────────────────────────────┤
│  theme/material3/  │  theme/devtools/ │  theme/fluent/      │
│  24 Painters       │  24 Painters     │  11 Painters        │
│  theme/cupertino/  │                  │                     │
│  11 Painters       │  70 painters total across 4 systems   │
├─────────────────────────────────────────────────────────────┤
│  26 Interactive Widgets (core/)                             │
│  button, checkbox, radio, textfield, dropdown, slider,      │
│  dialog, scrollview, tabview, listview, gridview, linechart,│
│  progressbar, progress, collapsible, popover, splitview,    │
│  treeview, datatable, toolbar, menu, docking, badge, chip,  │
│  stripe, titlebar                                           │
├──────────────┬──────────────────────────────────────────────┤
│  cdk/        │  Content[C] polymorphic pattern              │
├──────────────┴──────────────────────────────────────────────┤
│  primitives/       │  animation/     │  transition/         │
│  Box (HBox/VBox),  │  Tween, Spring  │  Fade, Slide, Scale  │
│  Text, Image,      │  M3 Presets,    │  Enter/Exit          │
│  RepaintBoundary   │  Orchestration  │                      │
├─────────────────────────────────────────────────────────────┤
│  icon/  │  i18n/  │  dnd/   │  uitest/ │  theme/font/       │
├─────────────────────────────────────────────────────────────┤
│  app/ + FocusManager │  focus/ │  overlay/ │  render/       │
├─────────────────────────────────────────────────────────────┤
│  desktop/            (Layer Tree Compositor + Damage-Aware Blit)    │
│  compositor/         (Production: OffsetLayer, PictureLayer, Opacity)│
│  offscreen/          (headless widget → *image.RGBA)        │
├─────────────────────────────────────────────────────────────┤
│  layout/           │  state/         │  a11y/               │
│  Flex, Stack, Grid │  Signals, Bind  │  ARIA Roles, Tree    │
├─────────────────────────────────────────────────────────────┤
│  registry/         │  plugin/        │  theme/              │
├─────────────────────────────────────────────────────────────┤
│  widget/           │  event/         │  geometry/           │
│  Widget, Context   │  Mouse, Key     │  Point, Rect         │
│  Canvas, Lifecycle │  Wheel, Focus   │  Constraints         │
├─────────────────────────────────────────────────────────────┤
│  internal/render   │  internal/layout│  internal/focus      │
│  Canvas, Scene,    │  Flex, Grid     │  Manager, Ring       │
│  IconCache (LRU)   │  internal/dirty │  Tracker, Collector  │
├─────────────────────────────────────────────────────────────┤
│  gogpu/gg          │  gpucontext     │  coregx/signals      │
│  2D Graphics       │  Shared Ifaces  │  State Management    │
└─────────────────────────────────────────────────────────────┘

ui → gpucontext (interfaces)       ← dependency inversion
ui → gg (2D rendering)
ui → coregx/signals (reactive)

gogpu → gpucontext (implements)    ← concrete implementation
gg → wgpu → naga                   ← internal to gg

cd examples/gallery
go run .

// Box — universal container
primitives.Box(children...).
    Padding(16).
    PaddingXY(24, 8).
    Background(theme.Surface).
    Rounded(8).
    BorderStyle(1, theme.Outline).
    ShadowLevel(2).
    Gap(8)

// Text — static
primitives.Text("Hello World").
    FontSize(24).
    Bold().
    Color(theme.OnSurface).
    Align(primitives.TextAlignCenter).
    MaxLines(2).
    Ellipsis()

// Text — reactive (auto-updates when signal changes)
primitives.TextFn(func() string {
    return fmt.Sprintf("Count: %d", count.Get())
}).FontSize(18)

// Text — signal binding (auto-updates when signal changes)
title := state.NewSignal("Hello World")
primitives.NewText("").ContentSignal(title).FontSize(24)

// Image
primitives.Image(mySource).
    Size(48, 48).
    Cover().
    Rounded(24).
    Alt("User avatar")

// Basic slider
s := slider.New(
    slider.Min(0),
    slider.Max(100),
    slider.Value(50),
    slider.OnChange(func(v float32) { fmt.Println("Value:", v) }),
)

// Discrete slider with step snapping and marks
s := slider.New(
    slider.Min(0), slider.Max(100), slider.Step(10),
    slider.Marks([]slider.Mark{{Value: 0}, {Value: 50}, {Value: 100}}),
    slider.PainterOpt(material3.SliderPainter{Theme: m3}),
)

// Two-way signal binding
volume := state.NewSignal[float32](75)
s := slider.New(
    slider.Min(0), slider.Max(100),
    slider.ValueSignal(volume),  // reads AND writes back on drag
)

// Simple alert dialog
d := dialog.Alert("Error", "File not found.", func() { log.Println("dismissed") })
d.Show(ctx)

// Confirmation dialog
d := dialog.Confirm("Delete?", "This cannot be undone.",
    func() { log.Println("canceled") },
    func() { deleteItem() },
)
d.Show(ctx)

// Custom dialog with M3 painter
d := dialog.New(
    dialog.Title("Settings"),
    dialog.Content(settingsWidget),
    dialog.Actions(
        dialog.Action{Label: "Cancel", Variant: dialog.VariantTextOnly},
        dialog.Action{Label: "Save", Variant: dialog.VariantFilled, Default: true,
            OnClick: func() { saveSettings() }},
    ),
    dialog.PainterOpt(material3.DialogPainter{Theme: m3}),
)
d.Show(ctx)

// Tween animation with M3 easing
ctrl := animation.NewController()
opacity := state.NewSignal[float32](0)
animation.To(opacity, 1.0).
    Duration(animation.DurationMedium2).
    Ease(animation.M3Standard).
    Start(ctrl)

// Spring physics (critically damped)
position := state.NewSignal[float32](0)
animation.SpringTo(position, 200).
    Stiffness(animation.StiffnessMedium).
    DampingRatio(animation.DampingNoBouncy).
    Start(ctrl)

// Color tween (Flutter pattern: float32 engine + Tween[T])
progress := state.NewSignal[float32](0)
animation.To(progress, 1.0).Duration(300*time.Millisecond).Start(ctrl)
colorTween := animation.NewColorTween(startColor, endColor)
// in Draw: canvas.DrawRect(bounds, colorTween.At(progress.Get()))

// Parallel composition
animation.Parallel(
    animation.To(opacity, 1.0).Duration(200*time.Millisecond),
    animation.To(translateY, 0).Duration(300*time.Millisecond),
).Start(ctrl)

// Basic vertical scrollview
sv := scrollview.New(longContentWidget,
    scrollview.DirectionOpt(scrollview.Vertical),
    scrollview.ScrollbarOpt(scrollview.ScrollbarAuto),
    scrollview.OnScroll(func(x, y float32) { fmt.Printf("scroll: %.0f\n", y) }),
)

// 2D scrollview with signal binding
scrollY := state.NewSignal[float32](0)
sv := scrollview.New(largeCanvas,
    scrollview.DirectionOpt(scrollview.Both),
    scrollview.ScrollYSignal(scrollY), // two-way binding
    scrollview.PainterOpt(material3.ScrollbarPainter{Theme: m3}),
)

// Basic tab view
tv := tabview.New([]tabview.Tab{
    {Label: "Profile", Content: profileWidget},
    {Label: "Settings", Content: settingsWidget},
    {Label: "About", Content: aboutWidget},
}, tabview.OnSelect(func(idx int) { fmt.Println("Tab:", idx) }))

// Closeable tabs with M3 painter and signal binding
selected := state.NewSignal[int](0)
tv := tabview.New(tabs,
    tabview.Closeable(true),
    tabview.SelectedSignalOpt(selected),
    tabview.PainterOpt(material3.TabViewPainter{Theme: m3}),
    tabview.OnClose(func(idx int) { removeDynamicTab(idx) }),
)

// Create a signal
name := state.NewSignal("World")

// Computed value (auto-updates)
greeting := state.NewComputed(func() string {
    return "Hello, " + name.Get() + "!"
})

// Bind signal to widget invalidation
binding := state.Bind(name, ctx)
defer binding.Unbind()

// Batch multiple changes (single re-render)
scheduler.Batch(func() {
    firstName.Set("Alice")
    lastName.Set("Smith")
    age.Set(30)
})

// Bind signals directly to widget properties
label := state.NewSignal("Submit")
disabled := state.NewSignal(false)

btn := button.New(
    button.TextSignal(label),
    button.DisabledSignal(disabled),
    button.OnClick(func() {
        label.Set("Processing...")
        disabled.Set(true)
    }),
)

// Two-way binding: checkbox state synced with signal
agreed := state.NewSignal(false)
cb := checkbox.New(
    checkbox.CheckedSignal(agreed),
    checkbox.LabelOpt("I agree to terms"),
)

// Every widget implements a11y.Accessible
func (b *MyButton) AccessibilityRole() a11y.Role   { return a11y.RoleButton }
func (b *MyButton) AccessibilityLabel() string      { return b.text }
func (b *MyButton) AccessibilityActions() []a11y.Action {
    return []a11y.Action{a11y.ActionClick}
}

// Accessibility tree with stable node IDs
root := a11y.NewNode(a11y.RoleWindow, "My Application")
tree := a11y.NewMemoryTree(root)
button := a11y.NewNode(a11y.RoleButton, "Save")  // stable uint64 ID
tree.Insert(root, button)

// Render widgets to image without GPU, window, or app
r := offscreen.NewRenderer(400, 120)
r.Render(primitives.Text("Hello, World!").FontSize(24))
img := r.Image() // *image.RGBA — ready for png.Encode, testing, compositing

// HiDPI with dark theme and white background
dark := material3.NewDark(widget.Hex(0x00BFA5))
r := offscreen.NewRenderer(800, 240,
    offscreen.WithTheme(dark),
    offscreen.WithScale(2.0),
    offscreen.WithBackground(widget.ColorWhite),
)
r.Render(myWidgetTree)

// ui connects to windowing via interfaces (not concrete types)
uiApp := app.New(
    app.WithWindowProvider(gogpuApp),    // gpucontext.WindowProvider
    app.WithPlatformProvider(gogpuApp),  // gpucontext.PlatformProvider
    app.WithTheme(myTheme),
)

uiApp.SetRoot(rootWidget)

// Headless mode for testing (no window needed)
testApp := app.New()  // works without any providers
testApp.SetRoot(rootWidget)
testApp.Window().Frame()  // processes layout + draw

# UI toolkit (library)
go get github.com/gogpu/ui@latest

# For runnable applications you also need gogpu (windowing) and gg (rendering):
go get github.com/gogpu/gogpu@latest
go get github.com/gogpu/gg@latest