أساسيات واجهة المستخدم Immediate-Mode

egui is an immediate-mode GUI library. Unlike retained-mode toolkits (GTK, Qt) where you build a persistent widget tree, egui rebuilds the entire UI from scratch on every frame.

Your code runs top-to-bottom each frame, emitting widgets as function calls. There is no stored node graph — the UI is just a side effect of running your closure.

An egui app implements eframe::App, whose update method is called once per frame, typically 60 times a second.

Inside update you describe what the UI should look like right now, given current state. egui diffs nothing — it simply re-emits everything.

Two core types appear everywhere. egui::Context is the shared, cheaply-cloneable handle to the whole UI state for the frame.

Ui is a region you add widgets into. Panels and windows hand you a &mut Ui inside their closure; you call methods like ui.label or ui.button on it.

Because the UI is rebuilt each frame, you cannot register callbacks the way retained toolkits do. Instead, every widget call returns a Response immediately.

You inspect the Response in the same frame: .clicked(), .hovered(), .changed(). This keeps event handling inline with layout.

egui stores almost no application data. Your widget values live in self on the App struct, and you pass mutable references into widgets.

A text field takes &mut String; a checkbox takes &mut bool. egui writes back through the reference, so your struct is the single source of truth.

eframe is the official framework that hosts egui on desktop and web. It owns the native window, the GPU surface, and the event loop.

You launch with eframe::run_native, passing a window title, native options, and a closure that builds your App.

By default egui only repaints when something happens: mouse move, key press, or an explicit request. This saves CPU on idle apps.

For animations or live data, call ctx.request_repaint() to schedule another frame, or request_repaint_after with a duration for timed updates.

egui derives widget identity from call order and position, generating an Id automatically. This matters for things like collapsing headers that need stable memory between frames.

When two widgets would collide — e.g. buttons with the same label in a loop — wrap them with ui.push_id(i, |ui| ...) to disambiguate.

Immediate mode makes UI code trivially data-driven: an if shows or hides a section, a for renders a list. There is no manual add/remove of nodes and no desync between model and view.

The cost is that the whole UI re-runs each frame, so keep per-frame work cheap and avoid heavy computation inside update.

Putting it together: a struct holds state, update draws it, and main runs the window. This is the entire skeleton of any egui desktop program.

Everything else — layout, theming, packaging — builds on this loop.

egui's design plays to Rust's strengths. Borrowing &mut self into a single update call means the borrow checker guarantees no data races between widgets and your model.

There are no callbacks capturing shared mutable state, no Rc<RefCell> graphs forced by a retained tree — just plain ownership and one mutable pass per frame.

Test your grasp of immediate mode.

egui is immediate-mode: the whole UI is rebuilt each frame inside eframe::App::update. Widgets are function calls that return a Response you inspect right away.

Your data lives in self and is passed by mutable reference, so the borrow checker keeps model and view in sync. eframe::run_native hosts the window and event loop. Next we explore the widget palette and layout system.