xengui 0.2.2

xengui: a reactive gui library in rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

# XenGui: a reactive GUI library in pure Rust


[<img alt="github" src="https://img.shields.io/badge/github-randseas/xengui-00aaaa?logo=github" height="20">](https://github.com/randseas/xengui)
[![Latest version](https://img.shields.io/crates/v/xengui.svg)](https://crates.io/crates/xengui)
[![Downloads](https://img.shields.io/crates/d/xengui.svg)](https://crates.io/crates/xengui)
[![Rust](https://img.shields.io/badge/rust-1.92%2B-blue.svg)](https://www.rust-lang.org)
[![Documentation](https://docs.rs/xengui/badge.svg)](https://docs.rs/xengui)
[![Apache-2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/randseas/xengui/blob/main/LICENSE)
<!-- ![CI/CD](https://github.com/randseas/xengui/actions/workflows/ci_check.yml/badge.svg) -->


<p align="start" style="margin-top: -.5rem">
  <a href="https://xengui.vercel.app">
    <img src="https://raw.githubusercontent.com/randseas/xengui/main/assets/XenGui_logo.svg" alt="XenGui logo" width="350"/>
  </a>
</p>

<div align="start" style="margin-top: -1.5rem; text-decoration: underline; text-decoration-color: #4daafc;">

### [Live web demo](https://xengui.vercel.app)


</div>

---

XenGui (pronounced `/ˈzɛn.ɡuː.aɪ/` | `Zen-goo-eye`) is a reactive rendering GUI implementation in pure **Rust**, built on the `wgpu` graphics API and `winit` window management. It combines a hooks-based reactive model with a Flexbox/Grid layout engine (powered by `taffy`) and a batched wgpu rendering pipeline, running natively on Windows, macOS, and Linux, as well as in the browser via WebAssembly.

> [!IMPORTANT]
> XenGui is currently an early development release. APIs are still evolving and may change without notice between versions. Use with caution in production projects and expect breaking changes until a stable `1.0.0` release.

## Features


- **Reactive state** - React-style hooks (`use_state`, `component`) drive re-renders without a virtual DOM diffing framework bolted on top.
- **Flexbox & Grid layout** - Full CSS-like layout via [`taffy`](https://github.com/DioxusLabs/taffy), including flex direction, wrapping, alignment, gaps, and grid tracks.
- **GPU-accelerated rendering** - Rects, text, and images are batched and drawn through dedicated `wgpu` pipelines.
- **Declarative styling** - A CSS-like `Style`/`StyleBuilder` API covering colors (including OKLCH), borders, typography, spacing, and more.
- **Built-in widgets** - `View`, `Label`, `Button`, and `Image`, each with hover/pressed/disabled style variants.
- **Interaction system** - Unified handling of hover, click, focus, and keyboard events across widgets.
- **Cross-platform** - Native targets (Windows, macOS, Linux) and WebAssembly from a single codebase.

## Example


```rust
Button::new()
    .label("Increment")
    .font_size(16)
    .color(Color::NEUTRAL_500)
    .background(Color::NEUTRAL_200)
    .border(Border::new(1, Color::NEUTRAL_200, Length::px(8.0)))
    .padding(Edges::only(9, 4, 9, 7))
    .on_click(move |_ctx| set_counter.set(counter + 1))
    .hover_style(|s|
        s
            .background(Color::NEUTRAL_200)
            .border(Border::new(1, Color::NEUTRAL_300, Length::px(8.0)))
            .color(Color::NEUTRAL_600)
    );
```

## Installation


`Cargo.toml`

```toml
[dependencies]
xengui = "0.2.2"
```

## Sections


- [Example](#example)
- [Demo](#demo)
- [Quick Start](#quick-start)
- [Documentation](#documentation)

## Quick Start


```rust
use xengui::*;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let config = AppConfig {
        title: "My XenGui App".into(),
        width: 640,
        height: 480,
        position: WindowPosition::Center,
        ..Default::default()
    };

    let mut app = App::new(config);

    app.render(|| {
        let (counter, set_counter) = use_state::<i32>(0);

        Box::new(
            View::new()
                .display(Display::Flex)
                .flex_direction(FlexDirection::Column)
                .align_items(AlignItems::Center)
                .justify_content(JustifyContent::Center)
                .width(Length::Percent(100.0))
                .height(Length::Percent(100.0))
                .background(Color::WHITE)
                .child(
                    Label::new()
                        .label(format!("Count: {counter}"))
                        .font_size(20)
                        .color(Color::NEUTRAL_700)
                )
                .child(
                    Button::new()
                        .label("Increment")
                        .padding(Edges::symmetric(12, 8))
                        .background(Color::NEUTRAL_200)
                        .on_click(move |_ctx| set_counter.set(counter + 1))
                )
        )
    });

    app.run()?;
    Ok(())
}
```

Run it with:

```bash
cargo run
```

For WebAssembly targets, build and serve with [Trunk](https://github.com/trunk-rs/trunk):

```bash
trunk serve
```

## Demo


Demo is available at: [https://xengui.vercel.app](https://xengui.vercel.app)

## Documentation


Docs are available at: [https://xengui.vercel.app/docs](https://xengui.vercel.app/docs)

## License


Apache License 2.0 © 2026 randseas. See [LICENSE](LICENSE) for details.