Dear ImGui Bundle on the Web via Pyodide #361

pthom · 2025-06-30T21:00:19Z

pthom
Jun 30, 2025
Maintainer

Dear ImGui, in the browser. In Python. With all the immediacy you’d expect; and none of the JS.

Thanks to Pyodide support (added in v1.92.0), you can now build and run Dear ImGui apps on Web, using Python.

ImGui running in the browser with Python only and zero boilerplate

No HTML/CSS/JavaScript
Static pages: no tinkering with client-server synchronization issues

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 surprisingly short: it fits in a single 50 lines file, almost entirely in Python (with a bit of HTML and JavaScript). Since pyodide's distribution is available via a CDN, you can reproduce this on your side : just copy-paste code below into a html file

Note: Dear ImGui Bundle brings full support for docking, ImPlot, Markdown, node editors, image tools, and more, in both desktop and web builds.

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>

   <!-- Available via Pyodide CDN! -->
   <script src="https://cdn.jsdelivr.net/pyodide/v0.28.2/full/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++.

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

ImGui Bundle is now available in the standard Pyodide distribution!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dear ImGui Bundle on the Web via Pyodide #361

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 on the Web via Pyodide #361

Uh oh!

Uh oh!

pthom Jun 30, 2025 Maintainer

Replies: 0 comments

pthom
Jun 30, 2025
Maintainer