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 nearly identical to what you'd write for a native ImGui app — just translated to Python and wrapped in a Pyodide shell.

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>
    <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++.

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

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 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