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 use eframe::WebRunner 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:

use wasm_bindgen::prelude::*;

/// Your handle to the web app from JavaScript.
pub struct WebHandle {
    runner: eframe::WebRunner,

impl WebHandle {
    /// Installs a panic hook, then returns.
    pub fn new() -> Self {
        // Redirect [`log`] message to `console.log` and friends:

        Self {
            runner: eframe::WebRunner::new(),

    /// Call this once from JavaScript to start your app.
    pub async fn start(&self, canvas_id: &str) -> Result<(), wasm_bindgen::JsValue> {
                Box::new(|cc| Box::new(MyEguiApp::new(cc))),

    // The following are optional:

    /// Shut down eframe and clean up resources.
    pub fn destroy(&self) {

    /// Example on how to call into your app from JavaScript.
    pub fn example(&self) {
        if let Some(app) = self.runner.app_mut::<MyEguiApp>() {

    /// The JavaScript can check whether or not your app has crashed:
    pub fn has_panicked(&self) -> bool {

    pub fn panic_message(&self) -> Option<String> {
        self.runner.panic_summary().map(|s| s.message())

    pub fn panic_callstack(&self) -> Option<String> {
        self.runner.panic_summary().map(|s| s.callstack())

Simplified usage

If your app is only for native, and you don’t need advanced features like state persistence, then you can use the simpler function run_simple_native.

Feature flags

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

  • android-game-activity — Enable the game-activity backend via egui-winit on Android

  • android-native-activity — Enable the native-activity backend via egui-winit on Android

  • 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.

    eframe will call puffin::GlobalProfiler::lock().new_frame() for you

    Only enabled on native, because of the low resolution (1ms) of clocks in browsers.

  • wayland (enabled by default) — Enables wayland support and fixes clipboard issue.

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

    For other platforms, use the accesskit feature instead.

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

  • x11 (enabled by default) — Enables compiling for x11.

  • __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 examples.

Optional dependencies

  • document-features — Enable this when generating docs.







  • 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.
  • The simplest way to get started when writing a native app.
  • Serialize the given value as RON and store with the given key.
  • The folder where eframe will store its state.

Type Aliases