Hello, World 🌎
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();
});
}Today, it's Zed's UI framework. Tomorrow, it's yours!
We'd love your help making that happen.
Docs
| gpui – README | Intro to gpui (gpui's README) |
| gpui – gpui.rs | Core functionality and API of gpui (gpui's crate root) |
| Contexts | Explanation of different contexts in gpui |
| Key Dispatch | Details on key event dispatching in gpui |
Further docs & examples can be found throughout Zed's crates, and in Zed's ui crate.
Examples
| Hello World | The basic "Hello, World!" example |
| Animation | Rotating SVG animation |
| GIF Viewer | GIF image in a window |
| Image | Loading and displaying images |
| Input | Basic text input field |
| Opacity | Changing opacity with animations |
| Set Menus | Application menus creation and usage |
| Shadow | Element with shadow |
| SVG | SVG images with different colors |
| Text Wrapper | Text wrapping techniques |
| Uniform List | Optimized scrollable list using uniform heights |
| Window Positioning | Window positioning techniques |
| Window Shadow | Custom window shadows and resizing |
| Window | Window types and operations |