Dear ImGui Bundle: Build Real-Time Python web applications with Zero Fuss #362

pthom · 2025-07-01T13:36:12Z

pthom
Jul 1, 2025
Maintainer

1. Introduction:

The web development environment is a jungle for the Python developer

Tools like Streamlit, Gradio, and Jupyter have gone a long way in simplifying the bridge between Python and the browser. They abstract away much of the boilerplate when building a Web Gui with Python. However, when things break, you're suddenly wrestling with JavaScript errors, layout issues in CSS, or debugging the front-end / back-end synchronization.

And you might think

But what if you could skip all that and just write Python? What if your GUI code could be:

clean and reactive
Pure Python
easy to write like print() statements,
and even run directly in the browser, without requiring a distant server?

Welcome to the Immediate Mode GUI paradigm — and the world of Dear ImGui and ImGui Bundle.

In this article:

We explain how Immediate Mode GUI works
We introduce Dear ImGui, a reputable Immediate Mode GUI library (C++)
We explore ImGui Bundle, which brings Dear ImGui to Python, together with lots of utilities
And we show how it all works in your browser, with Pyodide

Demonstration time!

Minimal demonstration

Below is a minimal example that draws a heart shape and allows you to adjust the heart pulse rate using a slider. Its code is almost entirely in Python (with a bit of HTML and JavaScript just to launch Python).

Code for this minimal demo

<!doctype html>
<html>
<head>
    <style>
        html, body { width: 100%; height: 100%; margin: 0; }
        #canvas { display: block; width: 100%; height: 100%;}
    </style>
    <script src="pyodide_dist/pyodide.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
    // ====================== Start of Python code ============================
    pythonCode = `
import time
import numpy as np

from imgui_bundle import implot, imgui, immapp, hello_imgui, icons_fontawesome_4

# Fill x and y whose plot is a heart
vals = np.arange(0, np.pi * 2, 0.01)
x = np.power(np.sin(vals), 3) * 16
y = 13 * np.cos(vals) - 5 * np.cos(2 * vals) - 2 * np.cos(3 * vals) - np.cos(4 * vals)
# Heart pulse rate and time tracking
phase = 0.0
t0 = time.time() + 0.2
heart_pulse_rate = 80


def gui():
global heart_pulse_rate, phase, t0, x, y

    imgui.text("Made with " + icons_fontawesome_4.ICON_FA_HEART + " using Dear ImGui and ImPlot")
    imgui.text(f"Running at {hello_imgui.frame_rate():.1f} FPS")

    t = time.time()
    phase += (t - t0) * heart_pulse_rate / (np.pi * 2)
    k = 0.8 + 0.1 * np.cos(phase)
    t0 = t

    implot.begin_plot("Heart", immapp.em_to_vec2(21, 21))
    implot.plot_line("", x * k, y * k)
    implot.end_plot()

    imgui.set_next_item_width(hello_imgui.em_size(10))
    _, heart_pulse_rate = imgui.slider_float("Pulse", heart_pulse_rate, 30, 180)


if __name__ == "__main__":
    immapp.run(gui, window_size=(300, 450), window_title="Hello!", with_implot=True, fps_idle=0)

`
// ====================== End of Python code ==============================
    
    // JavaScript code which loads Pyodide and runs our Python code
    async function main(){
        document.addEventListener('contextmenu', event => event.preventDefault());

        let pyodide = await loadPyodide();

        let sdl2Canvas = document.getElementById("canvas");
        pyodide.canvas.setCanvas2D(sdl2Canvas);
        pyodide._api._skip_unwind_fatal_error = true;

        await pyodide.loadPackage("imgui_bundle");
        pyodide.runPython(pythonCode);
    }
    main();
</script>
</body>
</html>

Run this demo online

This runs:
* in your browser
* in pure Python (via Pyodide)
* with real ImGui + ImPlot rendering (no HTML/CSS involved)

Under the hood: this uses the actual Dear ImGui engine, compiled to WebAssembly with Emscripten. You're writing Python, but you're still driving real ImGui calls, just like in C++.

Online playground

An online playground will enable you to run and edit ImGui applications in the browser without any setup.

2. The Immediate Mode GUI Paradigm

What is Immediate Mode GUI?

Immediate Mode GUIs (IMGUI) differ from traditional retained-mode frameworks. Instead of building and maintaining an abstract UI tree, you declare your widgets anew each frame — just like calling print() repeatedly in a loop.

This approach leads to:

Simple, stateless, and readable code
Full control over rendering and logic, frame-by-frame
Great debugging and introspection: there's no hidden state behind the GUI

For instance, displaying button and handling its action in ImGui might just look like:

if imgui.button("Click me"):  # Display a button
    do_something()            # Call this action on click

Compared to retained-mode and web-based GUIs

Frameworks like Streamlit, Gradio, and Dash rely on a layered architecture that separates logic from rendering. When things go wrong, you often find yourself debugging JavaScript, CSS, or frontend/backend sync issues.

In contrast, Immediate Mode GUIs are radically simple.

There’s no event queue to wire, no hidden reactive state — just Python code running in a loop, directly rendering the GUI. Whether you run it natively or in the browser via Pyodide, your UI logic stays local, explicit, and easy to debug.

Comparison: Immediate Mode vs classic Python Web GUIs

Feature	Immediate Mode GUI (e.g. ImGui)	Python Web GUI (Streamlit, Gradio)
Frontend stack	None (single process)	HTML + CSS + JS + Python
Architecture	Monolithic loop	Client–server (multi-process)
GUI logic location	In the Python loop	Split between Python and JS
Event model	Immediate / synchronous	Asynchronous / message-passing
State handling	Explicit, local	Hidden reactive model
Debuggability	Direct (print/debug in place)	Sometimes requires JS inspection
Deployment	Native or via Pyodide (static web pages)	Requires server or hosted infra
Custom styling / layout	Code-driven, limited theming	HTML/CSS-driven
Performance	High (real-time loop)	Variable (network + rendering)

3. Enter Dear ImGui

Dear ImGui is a fast, lightweight C++ library designed for building rich graphical user interfaces in real-time applications. Originally developed for debugging tools in game engines, it's now used across industries for visualization, simulation, embedded UIs, and more.

ImGui follows the Immediate Mode GUI paradigm: widgets are declared directly in your rendering loop, which makes it incredibly responsive, debuggable, and easy to integrate.

It’s known for:

Extremely low overhead and high performance
Plug-and-play usability — no GUI designer, no layout files
A focus on developer productivity and iteration speed
A powerful ecosystem: docking, plots (ImPlot), markdown, node editors, fonts, multi-viewports, and more

With 66k+ GitHub stars and a passionate community, ImGui has become a go-to for developers who want full control and minimal friction when building UIs.

4. Meet Dear ImGui Bundle

Dear ImGui Bundle builds on top of Dear ImGui to offer a ready-to-use, cross-platform toolkit for both C++ and Python. It wraps the core ImGui API with batteries included: advanced widgets, plotting (ImPlot), image handling, markdown rendering, node editors, and more.

With full Python bindings and API consistency with C++, it’s a great match for data scientists, educators, and toolmakers who want to go fast — without giving up control.

One codebase, runs natively or in the browser (via Pyodide)
Great for interactive prototypes, apps, and scientific GUIs
Same API across platforms and languages

5. ImGui Bundle in the Browser (via Pyodide)

ImGui Bundle isn't just another GUI library — it offers something rare:

✅ Immediate feedback: tweak parameters and visualize instantly
✅ Same code everywhere: write once, run natively or in the browser
✅ No web stack: skip the complexity of JS, CSS, and frontend frameworks
✅ Perfect for prototypes & notebooks: interactive tools, small apps, scientific GUIs
✅ Performance that scales: real-time updates, native responsiveness

For anyone building internal tools, teaching environments, or portable visual apps, this approach offers unmatched simplicity and power.
This makes ImGui Bundle a rare breed: a Python GUI framework that works identically across desktop and browser — with the same codebase. Porting python GUI to C++ is easy too, since the Python and C++ API are very close.

Demo: Interactive playground: Try it in your browser

6. Test it

You can download the Pyodide distribution with ImGui Bundle pre-installed from the following link: Download Pyodide with ImGui Bundle

ImGui Bundle is in the process of being added to the official Pyodide recipes, so you will be able to use it without downloading anything in the future. See relevant PR

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dear ImGui Bundle: Build Real-Time Python web applications with Zero Fuss #362

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Dear ImGui Bundle: Build Real-Time Python web applications with Zero Fuss #362

Uh oh!

Uh oh!

pthom Jul 1, 2025 Maintainer

1. Introduction:

Demonstration time!

Minimal demonstration

Online playground

2. The Immediate Mode GUI Paradigm

Comparison: Immediate Mode vs classic Python Web GUIs

3. Enter Dear ImGui

4. Meet Dear ImGui Bundle

5. ImGui Bundle in the Browser (via Pyodide)

6. Test it

Replies: 0 comments

pthom
Jul 1, 2025
Maintainer