david-vanderson / dvui

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). Homepage · Demo · Docs · Devlog Examples • sdl3 backend, dvui handles mainloop • good place to start, try changing frame() inside ./examples/app.zig • see Getting Started Backend As app dvui handles main loop app.zig Standalone you control main loop *-standalone.zig On top debug HUD on existing app/game *-ontop.zig SDL3 sdl3-app sdl3-standalone sdl3-ontop SDL3GPU Rendering via SDL GPU todo sdl3gpu-standalone sdl3gpu-ontop SDL2 sdl2-app sdl2-standalone sdl2-ontop Raylib C API raylib-app raylib-standalone raylib-ontop Raylib Bindings raylib-zig raylib-zig-app raylib-zig-standalone raylib-zig-ontop DX11 dx11-app dx11-standalone dx11-ontop GLFW glfw-opengl-app todo glfw-opengl-ontop wio OpenGL on wio wio-app todo todo Web web-app none none is a template repository that also includes these examples. See Getting Started. Docs • • Load • Online Docs Troubleshooting Raylib • If you encounter error , then also add flag Troubleshooting Web • To load examples for this backend, they must first be served through a (local) web server using: • Python • Caddy • Any other web server • Outputs are stored in 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 • Zig Libera IRC • DVUI GitHub Discussions Feature Overview • Immediate-mode API): • see Design • Processs every input event • suitable for low frame rate situations • Appropriate for • whole UI ( 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 • - more icons at • Raster images • • Fonts • FreeType • • Touch • selection draggables in text entries • pinch-zoom scaling • Accessibility: • AccessKit, enabled by adding flag to • see Accessibility • Native file dialogs • • Animations • Themes • FPS throttling • see FPS-Throttling Further reading: • Implementation details for how to write and modify container widgets: • Getting Started is a template repository • and reference dvui as a zig dependency • includes all the examples Alternatively: • Add DVUI as a dependency: • Add logic (here using SDL3 backend): Further reading: • Using a version of that's not bundled with DVUI: • Frequently Asked Questions How can I enable LSP autocompletion for DVUI? For ZLS autocomplete to work on DVUI's backend, you must import the latter directly: In (here using the SDL3 backend): exe.root_module.addImport("sdl-backend", dvui_dep.module("sdl3")); Then in your code: const SDLBackend = @import("sdl-backend"); How to debug DVUI? Use the debug window dvui.toggleDebugWindow() . Its preview is available as a Debug Window button on the front page of the online demo. Where to receive updates on new DVUI features? Read the DVUI Devlog which also covers topics such as units in DVUI . Subscribing to its RSS feed is possible. 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, processes input events, draws the button on the screen, and returns true if a button click happened this frame: For an intro to immediate-mode GUIs (IMGUIs), see this respective section from Dear ImGui. Advantages • Reducing widget state • For example, a checkbox which directly uses your app's bool • Reducing GUI state • The widgets shown each frame directly reflect the code run each frame • Harder to be in a state where the GUI is showing one thing but the app thinks it's showing something else • Don't have to clean up widgets that aren't needed anymore • Functions are the composable building blocks of the GUI • Since running a widget is a function, you can wrap a widget easily: Drawbacks • Hard to do fire-and-forget • For example, showing a dialog with an error message from code that won't be run next frame • DVUI includes a retained mode space for dialogs and toasts for this • Hard to do dialog sequence • Retained mode GUIs can run a modal dialog recursively so that dialog code can only exist in a single function • DVUI's retained dialogs can be chained together for this Handling All Events DVUI processes every input event, making it useable in low frame rate situations. A button can receive a mouse-down event and a mouse-up event in the same frame and correctly report a click. A custom button could even report multiple clicks per frame (the higher level function only reports 1 click per frame). In the same frame, these can all happen: • Text entry field A receives text events • Text entry field A receives a tab that moves keyboard focus to field B • Text entry field B receives more text events Because everything is in a single pass, this works in the normal case where widge…