GPUI

https://gpui.rs/
Admin
GPUI is a fast, productive UI framework for Rust created by the makers of Zed, enabling developers...
Tokens:2,302
Snippets:18
Trust Score:7.5
Update:1 day ago
Show doc for...
Tokens:
Raw
### GPUI Hello World example

Source: https://gpui.rs/

A complete GPUI application that opens a window and renders a styled div with text and colored boxes. It demonstrates using the Render trait, creating a window with WindowOptions, and running the application with Application::new().run().

```rust
use gpui::{
    div, prelude::*, px, rgb, size, App, Application, Bounds, Context, SharedString, Window,
    WindowBounds, WindowOptions,
};
 
struct HelloWorld {
    text: SharedString,
}
 
impl Render for HelloWorld {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_3()
            .bg(rgb(0x505050))
            .size(px(500.0))
            .justify_center()
            .items_center()
            .shadow_lg()
            .border_1()
            .border_color(rgb(0x0000ff))
            .text_xl()
            .text_color(rgb(0xffffff))
            .child(format!("Hello, {}!", &self.text))
            .child(
                div()
                    .flex()
                    .gap_2()
                    .child(div().size_8().bg(gpui::red()))
                    .child(div().size_8().bg(gpui::green()))
                    .child(div().size_8().bg(gpui::blue()))
                    .child(div().size_8().bg(gpui::yellow()))
                    .child(div().size_8().bg(gpui::black()))
                    .child(div().size_8().bg(gpui::white())),
            )
    }
}
 
fn main() {
    Application::new().run(|cx: &mut App| {
        let bounds = Bounds::centered(None, size(px(500.), px(500.0)), cx);
        cx.open_window(
            WindowOptions {
                window_bounds: Some(WindowBounds::Windowed(bounds)),
                ..Default::default()
            },
            |_, cx| {
                cx.new(|_| HelloWorld {
                    text: "World".into(),
                })
            },
        )
        .unwrap();
    });
}
```

--------------------------------

### GPUI grid layout example

Source: https://gpui.rs/examples/

Shows GPUI's grid layout using a five-column grid with a header spanning all columns, a sidebar spanning one column, and content spanning three columns.

```rust
div()
    .grid()
    .grid_cols(5)
    .child(header.col_span_full())
    .child(sidebar.col_span(1))
    .child(content.col_span(3))
```

--------------------------------

### GPUI keyboard shortcut with actions!, Counter, and bind_keys

Source: https://gpui.rs/examples/

Shows how to define a GPUI action with actions!, implement a view handler that increments a counter and notifies the context, render the view with a key_context and on_action listener, and bind the 'up' key to the Increment action scoped to the 'Counter' context. Keep slow work like disk or network I/O off the UI thread.

```rust
actions!(counter, [Increment]);
 
struct Counter {
    count: i32,
}
 
impl Counter {
    fn increment(&mut self, _: &Increment, _: &mut Window, cx: &mut Context<Self>) {
        self.count += 1;
        cx.notify();
    }
}
 
impl Render for Counter {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .key_context("Counter")
            .on_action(cx.listener(Self::increment))
    }
}
 
fn bind_keys(cx: &mut App) {
    cx.bind_keys([KeyBinding::new("up", Increment, Some("Counter"))]);
}
```

--------------------------------

### GPUI flex column layout

Source: https://gpui.rs/examples/

Shows GPUI's styling API for a centered column with a gap, using methods like flex(), flex_col(), gap_3(), justify_center(), and items_center().

```rust
div()
    .flex()
    .flex_col()
    .gap_3()
    .justify_center()
    .items_center()
```

--------------------------------

### Equivalent CSS for flex column layout

Source: https://gpui.rs/examples/

The CSS equivalent of the GPUI flex column layout, showing the same properties: display: flex, flex-direction: column, justify-content: center, align-items: center, and gap: 12px.

```css
.stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
```

--------------------------------

### Render implementation for Counter view

Source: https://gpui.rs/examples/

Implements the Render trait for a Counter view, displaying the count and an 'Add' button that increments the count on click. The handler mutates state and calls cx.notify() to request a re-render.

```rust
impl Render for Counter {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .child(format!("Count: {}", self.count))
            .child(
                div()
                    .on_click(cx.listener(|this, _, _, cx| {
                        this.count += 1;
                        cx.notify();
                    }))
                    .child("Add"),
            )
    }
}
```
Tokens:
Raw