#immediate-mode #immediate #egui-integration #portable #imgui #gamedev


Egui immediate mode gui integration with winit and Vulkano

17 breaking releases

0.27.0 Dec 15, 2023
0.26.0 Nov 19, 2023
0.25.0 Sep 28, 2023
0.24.0 Apr 3, 2023
0.13.0 Nov 17, 2021

#133 in GUI

Download history 80/week @ 2024-03-11 54/week @ 2024-03-18 8/week @ 2024-03-25 112/week @ 2024-04-01 26/week @ 2024-04-08 54/week @ 2024-04-15 46/week @ 2024-04-22 40/week @ 2024-04-29 22/week @ 2024-05-06 26/week @ 2024-05-13 72/week @ 2024-05-20 50/week @ 2024-05-27 62/week @ 2024-06-03 49/week @ 2024-06-10 68/week @ 2024-06-17 75/week @ 2024-06-24

260 downloads per month
Used in 9 crates (8 directly)




Crates.io Apache CI

This is an egui integration for winit and vulkano.

You'll need a Vulkano target image as an input to which the UI will be painted. The aim of this is to allow a simple enough API to separate UI nicely out of your renderer and make it easy to build your immediate mode UI with Egui.


  1. Create your own renderer with Vulkano, and allow access to Vulkano's gfx queue Arc<Queue> and Vulkano's winit surface Arc<Surface<Window>>
  2. Create Gui integration with the surface & gfx queue
// Has its own renderpass. Modify GuiConfig to determine image clear behavior etc.
let mut gui = Gui::new(&event_loop, renderer.surface(), renderer.queue(), renderer.swapchain_format(), GuiConfig::default());
// Or with subpass. This means that you must create the renderpass yourself. Egui subpass will then draw on your
// image.
let mut gui = Gui::new_with_subpass(&event_loop, renderer.surface(), renderer.queue(), renderer.swapchain_format(), subpass, GuiConfig::default());
  1. Inside your event loop, update gui integration with WindowEvent
  1. Fill immediate mode UI through the integration in Event::RedrawRequested before you render
gui.immediate_ui(|gui| {
    let ctx = gui.context();
    // Fill egui UI layout here

// Or

// fill egui layout...

// And when you render with `gui.draw_on_image(..)`, this will finish the egui frame
  1. Render gui via your renderer on any image or most likely on your swapchain images:
// Acquire swapchain future
let before_future = renderer.acquire().unwrap();
// Render gui by passing the acquire future (or any) and render target image (swapchain image view)
let after_future = gui.draw_on_image(before_future, renderer.swapchain_image_view());
// Present swapchain
renderer.present(after_future, true);
// ----------------------------------
// Or if you created the integration with subpass
let cb = gui.draw_on_subpass_image(framebuffer_dimensions);

Note that Egui prefers UNORM render targets. Using an output format with sRGB requires GuiConfig::allow_srgb_render_target to be set, to acknowledge that using sRGB will cause minor discoloration of UI elements due to blending in linear color space and not sRGB as Egui expects.

See the examples directory for better usage guidance.

Remember, on Linux, you need to install following to run Egui

sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev




This integration would not have been possible without the examples from vulkano-examples or egui_winit_ash_vk_mem.


~1M SLoC