Crate egui

egui: an easy-to-use GUI in pure Rust!

Try the live web demo: https://www.egui.rs/#demo. Read more about egui at https://github.com/emilk/egui.

egui is in heavy development, with each new version having breaking changes. You need to have rust 1.62.0 or later to use egui.

To quickly get started with egui, you can take a look at eframe_template which uses eframe.

To create a GUI using egui you first need a Context (by convention referred to by ctx). Then you add a Window or a SidePanel to get a Ui, which is what you’ll be using to add all the buttons and labels that you need.

Feature flags

Using egui

To see what is possible to build with egui you can check out the online demo at https://www.egui.rs/#demo.

If you like the “learning by doing” approach, clone https://github.com/emilk/eframe_template and get started using egui right away.

A simple example

Here is a simple counter that can be incremented and decremented using two buttons:

fn ui_counter(ui: &mut egui::Ui, counter: &mut i32) {
    // Put the buttons and label on the same row:
    ui.horizontal(|ui| {
        if ui.button("−").clicked() {
            *counter -= 1;
        }
        ui.label(counter.to_string());
        if ui.button("+").clicked() {
            *counter += 1;
        }
    });
}

In some GUI frameworks this would require defining multiple types and functions with callbacks or message handlers, but thanks to egui being immediate mode everything is one self-contained function!

Getting a Ui

Use one of SidePanel, TopBottomPanel, CentralPanel, Window or Area to get access to an Ui where you can put widgets. For example:

egui::CentralPanel::default().show(&ctx, |ui| {
    ui.add(egui::Label::new("Hello World!"));
    ui.label("A shorter and more convenient way to add a label.");
    if ui.button("Click me").clicked() {
        // take some action here
    }
});

Quick start

ui.label("This is a label");
ui.hyperlink("https://github.com/emilk/egui");
ui.text_edit_singleline(&mut my_string);
if ui.button("Click me").clicked() { }
ui.add(egui::Slider::new(&mut my_f32, 0.0..=100.0));
ui.add(egui::DragValue::new(&mut my_f32));

ui.checkbox(&mut my_boolean, "Checkbox");

#[derive(PartialEq)]
enum Enum { First, Second, Third }
ui.horizontal(|ui| {
    ui.radio_value(&mut my_enum, Enum::First, "First");
    ui.radio_value(&mut my_enum, Enum::Second, "Second");
    ui.radio_value(&mut my_enum, Enum::Third, "Third");
});

ui.separator();

ui.image((my_image, egui::Vec2::new(640.0, 480.0)));

ui.collapsing("Click to see what is hidden!", |ui| {
    ui.label("Not much, as it turns out");
});

Viewports

Some egui backends support multiple viewports, which is what egui calls the native OS windows it resides in. See crate::viewport for more information.

Coordinate system

The left-top corner of the screen is (0.0, 0.0), with X increasing to the right and Y increasing downwards.

egui uses logical points as its coordinate system. Those related to physical pixels by the pixels_per_point scale factor. For example, a high-dpi screeen can have pixels_per_point = 2.0, meaning there are two physical screen pixels for each logical point.

Angles are in radians, and are measured clockwise from the X-axis, which has angle=0.

Integrating with egui

Most likely you are using an existing egui backend/integration such as eframe, bevy_egui, or egui-miniquad, but if you want to integrate egui into a new game engine or graphics backend, this is the section for you.

You need to collect RawInput and handle FullOutput. The basic structure is this:

let mut ctx = egui::Context::default();

// Game loop:
loop {
    let raw_input: egui::RawInput = gather_input();

    let full_output = ctx.run(raw_input, |ctx| {
        egui::CentralPanel::default().show(&ctx, |ui| {
            ui.label("Hello world!");
            if ui.button("Click me").clicked() {
                // take some action here
            }
        });
    });
    handle_platform_output(full_output.platform_output);
    let clipped_primitives = ctx.tessellate(full_output.shapes, full_output.pixels_per_point);
    paint(full_output.textures_delta, clipped_primitives);
}

For a reference OpenGL renderer, see the egui_glow painter.

Debugging your renderer

Things look jagged

• Turn off backface culling.

My text is blurry

• Make sure you set the proper pixels_per_point in the input to egui.
• Make sure the texture sampler is not off by half a pixel. Try nearest-neighbor sampler to check.

My windows are too transparent or too dark

• egui uses premultiplied alpha, so make sure your blending function is (ONE, ONE_MINUS_SRC_ALPHA).
• Make sure your texture sampler is clamped (GL_CLAMP_TO_EDGE).
• egui prefers linear color spaces for all blending so:
  • Use an sRGBA-aware texture if available (e.g. GL_SRGB8_ALPHA8).
    • Otherwise: remember to decode gamma in the fragment shader.
  • Decode the gamma of the incoming vertex colors in your vertex shader.
  • Turn on sRGBA/linear framebuffer if available (GL_FRAMEBUFFER_SRGB).
    • Otherwise: gamma-encode the colors before you write them again.

Understanding immediate mode

egui is an immediate mode GUI library.

Immediate mode has its roots in gaming, where everything on the screen is painted at the display refresh rate, i.e. at 60+ frames per second. In immediate mode GUIs, the entire interface is laid out and painted at the same high rate. This makes immediate mode GUIs especially well suited for highly interactive applications.

It is useful to fully grok what “immediate mode” implies.

Here is an example to illustrate it:

if ui.button("click me").clicked() {
    take_action()
}

This code is being executed each frame at maybe 60 frames per second. Each frame egui does these things:

• lays out the letters click me in order to figure out the size of the button
• decides where on screen to place the button
• check if the mouse is hovering or clicking that location
• chose button colors based on if it is being hovered or clicked
• add a Shape::Rect and Shape::Text to the list of shapes to be painted later this frame
• return a Response with the clicked member so the user can check for interactions

There is no button being created and stored somewhere. The only output of this call is some colored shapes, and a Response.

Similarly, consider this code:

ui.add(egui::Slider::new(&mut value, 0.0..=100.0).text("My value"));

Here egui will read value (an f32) to display the slider, then look if the mouse is dragging the slider and if so change the value. Note that egui does not store the slider value for you - it only displays the current value, and changes it by how much the slider has been dragged in the previous few milliseconds. This means it is responsibility of the egui user to store the state (value) so that it persists between frames.

It can be useful to read the code for the toggle switch example widget to get a better understanding of how egui works: https://github.com/emilk/egui/blob/master/crates/egui_demo_lib/src/demo/toggle_switch.rs.

Read more about the pros and cons of immediate mode at https://github.com/emilk/egui#why-immediate-mode.

Misc

How widgets works

if ui.button("click me").clicked() { take_action() }

is short for

let button = egui::Button::new("click me");
if ui.add(button).clicked() { take_action() }

which is short for

let button = egui::Button::new("click me");
let response = button.ui(ui);
if response.clicked() { take_action() }

Button uses the builder pattern to create the data required to show it. The Button is then discarded.

Button implements trait Widget, which looks like this:

pub trait Widget {
    /// Allocate space, interact, paint, and return a [`Response`].
    fn ui(self, ui: &mut Ui) -> Response;
}

Auto-sizing panels and windows

In egui, all panels and windows auto-shrink to fit the content. If the window or panel is also resizable, this can lead to a weird behavior where you can drag the edge of the panel/window to make it larger, and when you release the panel/window shrinks again. This is an artifact of immediate mode, and here are some alternatives on how to avoid it:

1. Turn off resizing with Window::resizable, SidePanel::resizable, TopBottomPanel::resizable.
2. Wrap your panel contents in a ScrollArea, or use Window::vscroll and Window::hscroll.
3. Use a justified layout:

ui.with_layout(egui::Layout::top_down_justified(egui::Align::Center), |ui| {
    ui.button("I am becoming wider as needed");
});

4. Fill in extra space with emptiness:

ui.allocate_space(ui.available_size()); // put this LAST in your panel/window code

Sizes

You can control the size of widgets using Ui::add_sized.

ui.add_sized([40.0, 20.0], egui::DragValue::new(&mut my_value));

Code snippets

// Miscellaneous tips and tricks

ui.horizontal_wrapped(|ui| {
    ui.spacing_mut().item_spacing.x = 0.0; // remove spacing between widgets
    // `radio_value` also works for enums, integers, and more.
    ui.radio_value(&mut some_bool, false, "Off");
    ui.radio_value(&mut some_bool, true, "On");
});

ui.group(|ui| {
    ui.label("Within a frame");
    ui.set_min_height(200.0);
});

// A `scope` creates a temporary [`Ui`] in which you can change settings:
ui.scope(|ui| {
    ui.visuals_mut().override_text_color = Some(egui::Color32::RED);
    ui.style_mut().override_text_style = Some(egui::TextStyle::Monospace);
    ui.style_mut().wrap = Some(false);

    ui.label("This text will be red, monospace, and won't wrap to a new line");
}); // the temporary settings are reverted here

Installing additional fonts

The default egui fonts only support latin and cryllic characters, and some emojis. To use egui with e.g. asian characters you need to install your own font (.ttf or .otf) using Context::set_fonts.

Re-exports

• pub use layers::LayerId;
• pub use layers::Order;
• pub use load::SizeHint;
• pub use style::FontSelection;
• pub use style::Margin;
• pub use style::Style;
• pub use style::TextStyle;
• pub use style::Visuals;
• pub use widget_text::RichText;
• pub use widget_text::WidgetText;
• pub use ahash;
• pub use epaint;
• pub use epaint::ecolor;
• pub use epaint::emath;
• pub use containers::*;
• pub use viewport::*;
• pub use widgets::*;

Modules

• containers
  Containers are pieces of the UI which wraps other pieces of UI. Examples: Window, ScrollArea, Resize, SidePanel, etc.
• debug_text
  This is an example of how to create a plugin for egui.
• gui_zoom
  Helpers for zooming the whole GUI of an app (changing Context::pixels_per_point.
• introspection
  Showing UI:s for egui/epaint types.
• layers
  Handles paint layers, i.e. how things are sometimes painted behind or in front of other things.
• load
  Image loading
• menu
  Menu bar functionality (very basic so far).
• mutex
  Helper module that adds extra checks when the deadlock_detection feature is turned on.
• os
• output
  All the data egui returns to the backend at the end of each frame.
• special_emojis
  The default egui fonts supports around 1216 emojis in total. Here are some of the most useful: ∞⊗⎗⎘⎙⏏⏴⏵⏶⏷ ⏩⏪⏭⏮⏸⏹⏺■▶📾🔀🔁🔃 ☀☁★☆☐☑☜☝☞☟⛃⛶✔ ↺↻⟲⟳⬅➡⬆⬇⬈⬉⬊⬋⬌⬍⮨⮩⮪⮫ ♡ 📅📆 📈📉📊 📋📌📎📤📥🔆 🔈🔉🔊🔍🔎🔗🔘 🕓🖧🖩🖮🖱🖴🖵🖼🗀🗁🗋🗐🗑🗙🚫❓
• style
  egui theme (spacing, colors, etc).
• text
• text_selection
  Helpers regarding text selection for labels and text edit.
• util
  Miscellaneous tools used by the rest of egui.
• viewport
  egui supports multiple viewports, corresponding to multiple native windows.
• widget_text
• widgets
  Widgets are pieces of GUI such as Label, Button, Slider etc.

Macros

• egui_assert
  An assert that is only active when egui is compiled with the extra_asserts feature or with the extra_debug_asserts feature in debug builds.
• generate_loader_id
  Used to get a unique ID when implementing one of the loader traits: BytesLoader::id, ImageLoader::id, and TextureLoader::id.
• github_link_file
  Create a Hyperlink to the current file!() on github.
• github_link_file_line
  Create a Hyperlink to the current file!() (and line) on Github
• include_image
  Include an image in the binary.

Structs

• Align2
  Two-dimension alignment, e.g. Align2::LEFT_TOP.
• ClippedPrimitive
  A Mesh or PaintCallback within a clip rectangle.
• Color32
  This format is used for space-efficient color representation (32 bits).
• ColorImage
  A 2D RGBA color image in RAM.
• Context
  Your handle to egui.
• DragAndDrop
  Tracking of drag-and-drop payload.
• DroppedFile
  A file dropped into egui.
• EventFilter
  Controls which events that a focused widget will have exclusive access to.
• FontData
  A .ttf or .otf file and a font face index.
• FontDefinitions
  Describes the font data and the sizes to use.
• FontId
  How to select a sized font.
• FontImage
  A single-channel image designed for the font texture.
• FontTweak
  Extra scale and vertical tweak to apply to all text of a certain font.
• FullOutput
  What egui emits each frame from crate::Context::run.
• Galley
  Text that has been laid out, ready for painting.
• Grid
  A simple grid layout.
• HoveredFile
  A file about to be dropped into egui.
• Id
  egui tracks widgets frame-to-frame using Ids.
• InnerResponse
  Returned when we wrap some ui-code and want to return both the results of the inner function and the ui as a whole, e.g.:
• InputState
  Input state that egui updates each frame.
• KeyboardShortcut
  A keyboard shortcut, e.g. Ctrl+Alt+W.
• Layout
  The layout of a Ui, e.g. “vertical & centered”.
• Memory
  The data that egui persists between frames.
• Mesh
  Textured triangles in two dimensions.
• ModifierNames
  Names of different modifier keys.
• Modifiers
  State of the modifier keys. These must be fed to egui.
• MultiTouchInfo
  All you probably need to know about a multi-touch gesture.
• OpenUrl
  What URL to open, and how.
• Options
  Some global options that you can read and write.
• PaintCallback
  If you want to paint some 3D shapes inside an egui region, you can use this.
• PaintCallbackInfo
  Information passed along with PaintCallback (Shape::Callback).
• Painter
  Helper to paint shapes and text to a specific region on a specific layer.
• PlatformOutput
  The non-rendering part of what egui emits each frame.
• PointerState
  Mouse or touch state.
• Pos2
  A position on screen.
• Rangef
  Inclusive range of floats, i.e. min..=max, but more ergonomic than RangeInclusive.
• RawInput
  What the integrations provides to egui at the start of each frame.
• Rect
  A rectangular region of space.
• RepaintCause
  What called Context::request_repaint?
• RequestRepaintInfo
  Information given to the backend about when it is time to repaint the ui.
• Response
  The result of adding a widget to a Ui.
• Rgba
  0-1 linear space RGBA color with premultiplied alpha.
• Rounding
  How rounded the corners of things should be
• Sense
  What sort of interaction is a widget sensitive to?
• Stroke
  Describes the width and color of a line.
• TextFormat
  Formatting option for a section of text.
• TextureHandle
  Used to paint images.
• TextureOptions
  How the texture texels are filtered.
• TexturesDelta
  What has been allocated and freed during the last period.
• TouchDeviceId
  this is a u64 as values of this kind can always be obtained by hashing
• TouchId
  Unique identification of a touch occurrence (finger or pen or …). A Touch ID is valid until the finger is lifted. A new ID is used for the next touch.
• Ui
  This is what you use to place widgets.
• Vec2
  A vector has a direction and length. A Vec2 is often used to represent a size.
• Vec2b
  Two bools, one for each axis (X and Y).
• ViewportInfo
  Information about the current viewport, given as input each frame.
• WidgetInfo
  Describes a widget such as a crate::Button or a crate::TextEdit.
• WidgetRect
  Used to store each widget’s Id, Rect and Sense each frame. Used to check for overlaps between widgets when handling events.
• WidgetRects
  Stores the positions of all widgets generated during a single egui update/frame.

Enums

• Align
  left/center/right or top/center/bottom alignment for e.g. anchors and layouts.
• CursorIcon
  A mouse cursor icon.
• Direction
  Layout direction, one of LeftToRight, RightToLeft, TopDown, BottomUp.
• Event
  An input event generated by the integration.
• FontFamily
  Font of unknown size.
• ImageData
  An image stored in RAM.
• Key
  Keyboard keys.
• MouseWheelUnit
  The unit associated with the numeric value of a mouse wheel event
• PointerButton
  Mouse button (or similar for touch input)
• Shape
  A paint primitive such as a circle or a piece of text. Coordinates are all screen space points (not physical pixels).
• TextureFilter
  How the texture texels are filtered.
• TextureId
  What texture to use in a Mesh mesh.
• TextureWrapMode
  Defines how textures are wrapped around objects when texture coordinates fall outside the [0, 1] range.
• TouchPhase
  In what phase a touch event is in.
• UserAttentionType
  Types of attention to request from a user when a native window is not in focus.
• ViewportEvent
  An input event from the backend into egui, about a specific viewport.
• WidgetType
  The different types of built-in widgets in egui

Constants

• NUM_POINTER_BUTTONS
  Number of pointer buttons supported by egui, i.e. the number of possible states of PointerButton.

Traits

• NumExt
  Extends f32, Vec2 etc with at_least and at_most as aliases for max and min.

Functions

• __run_test_ctx
  For use in tests; especially doctests.
• __run_test_ui
  For use in tests; especially doctests.
• lerp
  Linear interpolation.
• pos2
  pos2(x, y) == Pos2::new(x, y)
• remap
  Linearly remap a value from one range to another, so that when x == from.start() returns to.start() and when x == from.end() returns to.end().
• remap_clamp
  Like remap, but also clamps the value so that the returned value is always in the to range.
• vec2
  vec2(x, y) == Vec2::new(x, y)
• warn_if_debug_build
  Helper function that adds a label when compiling with debug assertions enabled.

Type Aliases

• IdMap
  IdMap<V> is a HashMap<Id, V> optimized by knowing that Id has good entropy, and doesn’t need more hashing.