96470fabee
## Short bluesky announcement: We just released egui 0.33.0! Highlights: - `egui::Plugin` a improved way to create and access egui plugins - [kitdiff](https://github.com/rerun-io/kitdiff), a viewer for egui_kittest image snapshots (and a general image diff tool) - better kerning (check the diff on [kitdiff](https://rerun-io.github.io/kitdiff/?url=https://github.com/emilk/egui/pull/7431)) https://github.com/user-attachments/assets/971f0493-6dae-42e5-8019-58b74cf5d203 ## Relaese Changelog: egui is an easy-to-use immediate mode GUI for Rust that runs on both web and native. Try it now: <https://www.egui.rs/> egui development is sponsored by [Rerun](https://www.rerun.io/), a startup building an SDK for visualizing streams of multimodal data. # egui 0.33.0 changelog Highlights from this release: - `egui::Plugin` a improved way to create and access egui plugins - [kitdiff](https://github.com/rerun-io/kitdiff), a viewer for egui_kittest image snapshots (and a general image diff tool) - better kerning ### Improved kerning As a step towards using [parley](https://github.com/linebender/parley) for font rendering, @valadaptive has refactored the font loading and rendering code. A result of this (next to the font rendering code being much nicer now) is improved kerning. Notice how the c moved away from the k:  ### `egui::Plugin` trait We've added a new trait-based plugin api, meant to replace `Context::on_begin_pass` and `Context::on_end_pass`. This makes it a lot easier to handle state in your plugins. Instead of having to write to egui memory it can live right on your plugin struct. The trait based api also makes easier to add new hooks that plugins can use. In addition to `on_begin_pass` and `on_end_pass`, the `Plugin` trait now has a `input_hook` and `output_hook` which you can use to inspect / modify the `RawInput` / `FullOutput`. ### kitdiff, a image diff viewer At rerun we have a ton of snapshots. Some PRs will change most of them (e.g. [the](https://github.com/rerun-io/rerun/pull/11253/files) [one](https://rerun-io.github.io/kitdiff/?url=https://github.com/rerun-io/rerun/pull/11253/files) that updated egui and introduced the kerning improvements, ~500 snapshots changed!). If you really want to look at every changed snapshot it better be as efficient as possible, and the experience on github, fiddeling with the sliders, is kind of frustrating. In order to fix this, we've made [kitdiff](https://rerun-io.github.io/kitdiff/). You can use it locally via - `kitdiff files .` will search for .new.png and .diff.png files - `kitdiff git` will compare the current files to the default branch (main/master) Or in the browser via - going to https://rerun-io.github.io/kitdiff/ and pasting a PR or github artifact url - linking to kitdiff via e.g. a github workflow `https://rerun-io.github.io/kitdiff/?url=<link_to_pr_or_artefact>` To install kitdiff run `cargo install --git https://github.com/rerun-io/kitdiff` Here is a video showing the kerning changes in kitdiff ([try it yourself](https://rerun-io.github.io/kitdiff/?url=https://github.com/rerun-io/rerun/pull/11253/files)): https://github.com/user-attachments/assets/74640af1-09ba-435a-9d0c-2cbeee140c8f ### Migration guide - `egui::Mutex` now has a timeout as a simple deadlock detection - If you use a `egui::Mutex` in some place where it's held for longer than a single frame, you should switch to the std mutex or parking_lot instead (egui mutexes are wrappers around parking lot) - `screen_rect` is deprecated - In order to support safe areas, egui now has `viewport_rect` and `content_rect`. - Update all usages of `screen_rect` to `content_rect`, unless you are sure that you want to draw outside the `safe area` (which would mean your Ui may be covered by notches, system ui, etc.)
eframe: the egui framework
eframe is the official framework library for writing apps using egui. The app can be compiled both to run natively (for Linux, Mac, Windows, and Android) or as a web app (using Wasm).
To get started, see the examples.
To learn how to set up eframe for web and native, go to https://github.com/emilk/eframe_template/ and follow the instructions there!
There is also a tutorial video at https://www.youtube.com/watch?v=NtUkr_z7l84.
For how to use egui, see the egui docs.
eframe uses egui_glow for rendering, and on native it uses egui-winit.
To use on Linux, first run:
sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev
You need to either use edition = "2024", or set resolver = "2" in the [workspace] section of your to-level Cargo.toml. See this link for more info.
You can opt-in to the using egui-wgpu for rendering by enabling the wgpu feature and setting NativeOptions::renderer to Renderer::Wgpu.
Alternatives
eframe is not the only way to write an app using egui! You can also try egui-miniquad, bevy_egui, egui_sdl2_gl, and others.
You can also use egui_glow and winit to build your own app as demonstrated in https://github.com/emilk/egui/blob/main/crates/egui_glow/examples/pure_glow.rs.
Limitations when running egui on the web
eframe uses WebGL (via glow) and Wasm, and almost nothing else from the web tech stack. This has some benefits, but also produces some challenges and serious downsides.
- Rendering: Getting pixel-perfect rendering right on the web is very difficult.
- Search: you cannot search an egui web page like you would a normal web page.
- Bringing up an on-screen keyboard on mobile: there is no JS function to do this, so
eframefakes it by adding some invisible DOM elements. It doesn't always work. - Mobile text editing is not as good as for a normal web app.
- No integration with browser settings for colors and fonts.
- Accessibility: There is an experimental screen reader for
eframe, but it has to be enabled explicitly. There is no JS function to ask "Does the user want a screen reader?" (and there should probably not be such a function, due to user tracking/integrity concerns).eguisupports AccessKit, but as of early 2024, AccessKit lacks a Web backend.
In many ways, eframe is trying to make the browser do something it wasn't designed to do (though there are many things browser vendors could do to improve how well libraries like egui work).
The suggested use for eframe are for web apps where performance and responsiveness are more important than accessibility and mobile text editing.
Companion crates
Not all rust crates work when compiled to Wasm, but here are some useful crates have been designed to work well both natively and as Wasm:
Name
The frame in eframe stands both for the frame in which your egui app resides and also for "framework" (eframe is a framework, egui is a library).