DVUI — Immediate Zig GUI for Apps and Games

Zig GUI toolkit for whole applications or debugging windows in existing apps/games.

Tested with Zig v0.15.2

• for Zig v0.14.1, use DVUI tag v0.3.0)
• for Zig master, use branch zig16-dev

Homepage · Demo · Docs · Devlog

Examples

zig build sdl3-app

• sdl3 backend, dvui handles mainloop
• good place to start, try changing <code>frame()</code> inside <code>./examples/app.zig</code>
• see Getting Started

<table> <thead> <tr> <th>Backend</th> <th> As app <br> _{dvui handles main loop <br> <a href="https://github.com/david-vanderson/dvui/blob/main/examples/app.zig"><code>app.zig</code></a>} </th> <th> Standalone <br> _{you control main loop <br> <a href="https://github.com/david-vanderson/dvui/blob/main/examples"><code>*-standalone.zig</code></a>} </th> <th> On top <br> _{debug HUD on existing app/game <br> <a href="https://github.com/david-vanderson/dvui/blob/main/examples"><code>*-ontop.zig</code></a>} </th> </tr> </thead> <tbody> <tr> <td><strong>SDL3</strong></td> <td><code>sdl3-app</code></td> <td><code>sdl3-standalone</code></td> <td><code>sdl3-ontop</code></td> </tr> <tr> <td> <strong>SDL3GPU</strong> <br> _{Rendering via SDL GPU} </td> <td>todo</td> <td><code>sdl3gpu-standalone</code></td> <td><code>sdl3gpu-ontop</code></td> </tr> <tr> <td><strong>SDL2</strong></td> <td><code>sdl2-app</code></td> <td><code>sdl2-standalone</code></td> <td><code>sdl2-ontop</code></td> </tr> <tr> <td> <strong>Raylib</strong> <br> _{C API} </td> <td><code>raylib-app</code></td> <td><code>raylib-standalone</code></td> <td><code>raylib-ontop</code></td> </tr> <tr> <td> <strong>Raylib</strong> <br> _{Bindings <a href="https://github.com/raylib-zig/raylib-zig"><code>raylib-zig</code></a>} </td> <td><code>raylib-zig-app</code></td> <td><code>raylib-zig-standalone</code></td> <td><code>raylib-zig-ontop</code></td> </tr> <tr> <td><strong>DX11</strong></td> <td><code>dx11-app</code></td> <td><code>dx11-standalone</code></td> <td><code>dx11-ontop</code></td> </tr> <tr> <td><strong>GLFW</strong></td> <td><code>glfw-opengl-app</code></td> <td>todo</td> <td><code>glfw-opengl-ontop</code></td> </tr> <tr> <td> <strong>wio</strong> <br> _{OpenGL on <a href="https://github.com/ypsvlq/wio"><code>wio</code></a>} </td> <td><code>wio-app</code></td> <td>todo</td> <td>todo</td> </tr> <tr> <td><strong>Web</strong></td> <td><code>web-app</code></td> <td>none</td> <td>none</td> </tr> </tbody> </table>

dvui-demo is a template repository that also includes these examples. See Getting Started.

Docs

• zig build docs -Dgenerate-images
• Load ./zig-out/docs/index.html
• Online Docs

Troubleshooting Raylib

• If you encounter error No Wayland, then also add flag -Dlinux_display_backend=X11

Troubleshooting Web

• To load examples for this backend, they must first be served through a (local) web server using:
  • Python python -m http.server -d ./zig-out/bin/web-app
  • Caddy caddy file-server --root ./zig-out/bin/web-app --listen :8000
  • Any other web server
• Outputs are stored in ./zig-out/bin/web-app/

Featured Projects

The following projects use DVUI:

• Graphl Visual Programming Language Demo
• Podcast Player
• Graphical Janet REPL
• FIDO2/ Passkey compatible authenticator implementation for Linux
• QEMU frontend
• Static site generator GUI
• File explorer for Altair 8800 disk images
• Kanji flashcard app
• Azem - WIP micro-mouse simulator / maze solver - Demo
• Pixi - Pixel art editor

Discuss yours on:

• Zig Discord #gui-dev
• Zig Libera IRC #dvui
• DVUI GitHub Discussions

Feature Overview

• Immediate-mode API:
  • see Design
• Processs every input event
  • suitable for low frame rate situations
• Appropriate for
  • whole UI (*-app examples)
  • debugging on top of existing application
  • see Ontop-Floating-Windows
• Backends
  • SDL2 and SDL3
  • Web
  • Raylib (C)
  • Raylib (Zig)
  • DX11
  • OpenGL + GLFW
• TinyVG icons
  • zig-lib-svg2tvg
  • more icons at zig-lib-icons
• Raster images
  • stb_image
• Fonts
  • FreeType
  • stb_truetype
• Touch
  • selection draggables in text entries
  • pinch-zoom scaling
• Accessibility:
  • AccessKit, enabled by adding flag -Daccesskit to zig build
  • see Accessibility
• Native file dialogs
  • tinyfiledialogs
• Animations
• Themes
• FPS throttling
  • see FPS-Throttling

Further reading:

• Implementation details for how to write and modify container widgets:
  • readme-implementation.md

Getting Started

dvui-demo is a template repository

• build.zig and build.zig.zon reference dvui as a zig dependency
• includes all the examples

Alternatively:

1. Add DVUI as a dependency:

   zig fetch --save git+https://github.com/david-vanderson/dvui#main
   

2. Add build.zig logic (here using SDL3 backend):

   const dvui_dep = b.dependency("dvui", .{ .target = target, .optimize = optimize, .backend = .sdl3 });
   exe.root_module.addImport("dvui", dvui_dep.module("dvui_sdl3"));
   

Further reading:

• Using a version of raylib-zig that's not bundled with DVUI:
  • readme-raylib-zig-custom.md

Frequently Asked Questions

<!-- TODO due to use of HTML, syntax highlighting is disabled here --> <details> <summary>How can I enable LSP autocompletion for DVUI?</summary> For <a href="https://zigtools.org/zls/install/">ZLS autocomplete</a> to work on DVUI's backend, you must import the latter directly: <ol> <li> In `build.zig` (here using the SDL3 backend): <pre><code>exe.root_module.addImport("sdl-backend", dvui_dep.module("sdl3"));</code></pre> </li> <li> Then in your code: <pre><code>const SDLBackend = @import("sdl-backend");</code></pre> </li> </ol> </details> <details> <summary>How to debug DVUI?</summary> Use the debug window <code>dvui.toggleDebugWindow()</code>. Its preview is available as a <code>Debug Window</code> button on the front page of the online demo. </details> <details> <summary>Where to receive updates on new DVUI features?</summary> Read the <a href="https://david-vanderson.github.io/log">DVUI Devlog</a> which also covers topics such as <a href="https://david-vanderson.github.io/log/2025/#2025-05-12">units in DVUI</a>. Subscribing to its RSS feed is possible. </details>

Built-in Widgets

Widgets implemented so far:

• Text entry:
  • Single- and multi-line
  • Includes touch support (selection draggables and menu)
• Number entry:
  • Supports all Integer and floating point types
• Text layout:
  • Parts can be clickable
  • Parts separately styled
• Floating window
• Menu
• Popup/context window
• Scroll Area
• Button
• Multi-line label:
  • Can be clickable for links
• Tooltips
• Slider
• Slider entry:
  • Combo slider and text entry
• Checkbox
• Radio buttons
• Toast
• Panes with draggable sash
• Dropdown
• Combo box
• Reorderable lists:
  • Drag to reorder/remove/add
• Data grid
• Group box (fieldset)

Widgets to be implemented:

• Docking

Design

Immediate Mode

Widgets are not stored between frames like in traditional GUI toolkits (GTK, Win32, Cocoa). In the example below, dvui.button() processes input events, draws the button on the screen, and returns true if a button click happened this frame:

if (dvui.button(@src(), "Ok", .{}, .{})) {
    dialog.close();
}

For an intro to immediate-mode GUIs (IMGUIs), see [this respective section from Dear ImGui](https://git