GPUI for Beginners: Building Your First Application

I was looking for various options to generate a cross-platform application with GPU acceleration support and came across the GPUI framework from the creators of Zed editor.

I started playing around with this library and realised it’s not a toy library with some basic UI rendering features exposed in the flexbox, but a very well-crafted piece of art. The hybrid mode for rendering is one such example and several elements have been created by the Zed team already.

So we will be exploring the GPUI framework in this series.

To get us started let’s create a Hello World example, this is not something I have created from scratch but the examples are already present in the GPUI crate’s example folder. Let’s begin.

Create the project

Initialize your project using cargo

mkdir hellogpui && cd ./hellogpui && cargo init

Add GPUI in Cargo dependencies

Update your cargo.toml to specify zed dependency

[dependencies] 
gpui = { git = "https://github.com/zed-industries/zed" }

Add code to main.rs

use gpui::{div, prelude::*, px, rgb, App, AppContext, SharedString, ViewContext, WindowOptions};

struct HelloWorld {
    text: SharedString,
}

impl Render for HelloWorld {
    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
        div()
            .flex()
            .bg(rgb(0x002b36))
            .size_full()
            .justify_center()
            .items_center()
            .text_size(px(100.0))
            .text_color(rgb(0x77dd77))
            .child(format!("Hello, {}!", &self.text))
    }
}

fn main() {
    App::new().run(|cx: &mut AppContext| {
        cx.open_window(WindowOptions::default(), |cx| {
            cx.new_view(|_cx| HelloWorld {
                text: "World".into(),
            })
        })
            .unwrap();
    });
}

Cargo Build

cargo build --release

launch the binary using (Your app may not come to the foreground directly, please check your app launcher/dock to check the running app.

./target/release/hellogpui

Hurray 🎉🥳

It’s time to celebrate we have successfully written and run our first application.

---

In the next article, we will look into the internals of GPUI to help us understand the framework structure and APIs.