Crate eframe

source ·
Expand description

eframe - the egui framework crate

If you are planning to write an app for web or native, and want to use egui for everything, then eframe is for you!

To get started, see the examples. To learn how to set up eframe for web and native, go to and follow the instructions there!

In short, you implement App (especially App::update) and then call crate::run_native from your, and/or call eframe::start_web from your

Usage, native:

use eframe::egui;

fn main() {
    let native_options = eframe::NativeOptions::default();
    eframe::run_native("My egui App", native_options, Box::new(|cc| Box::new(MyEguiApp::new(cc))));

struct MyEguiApp {}

impl MyEguiApp {
    fn new(cc: &eframe::CreationContext<'_>) -> Self {
        // Customize egui here with cc.egui_ctx.set_fonts and cc.egui_ctx.set_visuals.
        // Restore app state using (requires the "persistence" feature).
        // Use the (a glow::Context) to create graphics shaders and buffers that you can use
        // for e.g. egui::PaintCallback.

impl eframe::App for MyEguiApp {
   fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
       egui::CentralPanel::default().show(ctx, |ui| {
           ui.heading("Hello World!");

Usage, web:

#[cfg(target_arch = "wasm32")]
use wasm_bindgen::prelude::*;

/// Call this once from the HTML.
#[cfg(target_arch = "wasm32")]
pub async fn start(canvas_id: &str) -> Result<AppRunnerRef, eframe::wasm_bindgen::JsValue> {
    let web_options = eframe::WebOptions::default();
    eframe::start_web(canvas_id, web_options, Box::new(|cc| Box::new(MyEguiApp::new(cc)))).await

Feature flags

  • accesskit (enabled by default) — Enable platform accessibility API implementations through AccessKit.

  • dark-light — Detect dark mode system preference using dark-light.

    See also NativeOptions::follow_system_theme and NativeOptions::default_theme.

  • default_fonts (enabled by default) — If set, egui will use include_bytes! to bundle some fonts. If you plan on specifying your own fonts you may disable this feature.

  • glow (enabled by default) — Use glow for painting, via egui_glow.

  • persistence — Enable saving app state to disk.

  • puffin — Enable profiling with the puffin crate.

    Only enabled on native, because of the low resolution (1ms) of time keeping in browsers. eframe will call puffin::GlobalProfiler::lock().new_frame() for you

  • web_screen_reader — Enable screen reader support (requires ctx.options_mut(|o| o.screen_reader = true);) on web.

    For other platforms, use the “accesskit” feature instead.

  • __screenshot — If set, eframe will look for the env-var EFRAME_SCREENSHOT_TO and write a screenshot to that location, and then quit. This is used to generate images for the examples.

  • wgpu — Use wgpu for painting (via egui-wgpu). This overrides the glow feature.

Optional dependencies

  • document-features — Enable this when generating docs.


pub use egui;
pub use egui::emath;
pub use egui::epaint;
pub use egui_glow;
pub use glow;
pub use egui_wgpu;
pub use wgpu;


Data that is passed to AppCreator that can be used to setup and initialize your app.
Object that allows building the event loop.
Represents the surroundings of your app.
Image data for an application icon.
Information about the integration passed to the use app each frame.
Options controlling the behavior of a native window.
Information about the application’s main window, if available.


The different problems that can occur when trying to run eframe.
Selects the level of hardware graphics acceleration.
What rendering backend to use.
Dark or Light theme.
WebGL Context options


Storage key used for app


Implement this trait to write apps that can be compiled for both web/wasm and desktop/native using eframe.
A place where you can store custom data in a way that persists when you restart the app.


Get and deserialize the RON stored at the given key.
This is how you start a native (desktop) app.
Serialize the given value as RON and store with the given key.

Type Definitions

This is how your app is created.
Hook into the building of an event loop before it is run