Building Beautiful and Intuitive GUIs with Rust and egui

Rust has rapidly become a favorite for developers seeking performance, reliability, and safety. While traditionally known for its command-line applications, Rust’s versatility extends to building graphical user interfaces (GUIs) as well. In this post, we’ll explore how to create stunning and user-friendly GUIs using Rust and the egui library.

Why egui?

egui is a simple, fast, and highly portable immediate mode GUI library written in Rust. Here’s why it’s a great choice for your next Rust GUI project:

Ease of Use: egui’s API is clean, intuitive, and well-documented, making it a breeze to learn and use, even for beginners. Immediate Mode: Unlike retained mode GUI frameworks, egui redraws the UI every frame. This simplifies state management and makes it easier to create dynamic and responsive interfaces. WebAssembly Support: egui can be compiled to WebAssembly, allowing you to build GUIs that run seamlessly in web browsers. Customizable: egui provides ample customization options, enabling you to create unique and visually appealing interfaces that align with your application’s needs. Pure Rust: Being written entirely in Rust, egui benefits from Rust’s performance, safety, and reliability guarantees. Getting Started

Let’s dive into a basic example to get you started with egui and Rust:

use egui::widgets::{Button, Label};
use eframe::{egui, epaint::Vec2};

fn main() -> Result<(), eframe::Error> {
    let options = eframe::NativeOptions {
        initial_window_size: Some(Vec2::new(320.0, 240.0)),
        ..Default::default()
    };
    eframe::run_native(
        "My egui App",
        options,
        Box::new(|_cc| Box::new(MyApp::default())),
    )
}

struct MyApp {
    name: String,
    age: u32,
}

impl Default for MyApp {
    fn default() -> Self {
        Self {
            name: "World".to_owned(),
            age: 42,
        }
    }
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("Hello!");
            ui.horizontal(|ui| {
                ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name);
            });
            ui.add(Label::new(format!("Hello '{}', age {}", self.name, self.age)));
            if ui.button("Click each year").clicked() {
                self.age += 1;
            }
        });
    }
}

This code creates a simple window with a greeting, a text field to enter your name, and a button that increases the age each time it’s clicked.

Key Concepts eframe: Provides the windowing and event handling for your egui application. egui::Context: Holds the state of the GUI. egui::Ui: Used to add widgets and define the layout of your UI. Widgets: egui offers a wide variety of widgets like buttons, labels, text fields, sliders, and more. Beyond the Basics

egui offers much more than basic widgets. You can:

Customize the look and feel: Change colors, fonts, and spacing to match your application’s style. Create complex layouts: Use layouts like Grid and SidePanel to organize your UI elements. Handle user input: Respond to mouse clicks, keyboard events, and other user interactions. Integrate with other libraries: Combine egui with other Rust libraries to create powerful and feature-rich applications. Conclusion

egui provides a fantastic way to build beautiful, performant, and cross-platform GUIs with Rust. Its simplicity, flexibility, and active community make it an excellent choice for both beginners and experienced Rust developers. So, dive in, explore its capabilities, and start crafting amazing user experiences!