Demos & Tutorials

You call functions to create widgets, and they return the current value. That’s it.

Add widgets to that function, and you have an app. The C++ version is three lines.

At every frame, the GUI function draws the plot with ImPlot and the knobs with imgui-knobs, and reads their values right there. No callbacks, no widget objects: that is the immediate mode.

Both are add-ons, activated in one call: immapp.run(gui, with_implot=True, with_markdown=True). A good start for a small app.

A markdown editor with a live preview, and a pie chart whose values you can drag. Tick More info under each part to see how it is done. The add-ons are activated with immapp.AddOnsParams.

The reference to learn Dear ImGui by example (a port of imgui_demo.cpp). Browse it next to its code in the Dear ImGui Explorer.

A port of implot_demo.cpp: browse it next to its code in the Dear ImGui Explorer.

A port of implot3d_demo.cpp: browse it next to its code in the Dear ImGui Explorer.

This is the butterfly effect, the signature of chaos theory. The plot uses ImPlot3D, which adds rotatable, zoomable 3D plots to Dear ImGui.

The complete looks come from Hello ImGui.

Windows can be dragged, tabbed, and rearranged by the user.

Dockable windows with several layouts, colored fonts and emojis, a log window, a status bar, toolbars, menus and a theme chooser. Your settings are saved, and restored at the next start. The code is heavily commented.

The Seascape shader is by Alexander Alekseev (TDM, 2014). Hello ImGui calls runner_params.callbacks.custom_background at each frame, before the GUI: that is where it draws, with OpenGL (PyOpenGL in Python).

Move the mouse, and they speed up again. The slider sets fps_idle (0 means full speed), and the checkbox turns idling off, for example during an animation.

The fix: load a font that has the glyphs you need, first, so that it becomes the default font. This demo shows how, with Noto Sans SC: download it, and the demo’s sample lines come alive.

Each button is both a drag source and a drop target. Adapted from the drag and drop section of the Dear ImGui demo.

Type a few letters to filter it. One command changes the theme in two steps, another writes to the log below. Learn how to register commands and their callbacks with imgui-command-palette.

Watch a test drive the mouse and the keyboard: it opens tree nodes, clicks buttons, types text, and checks the results. See the test engine doc.

immapp.testing.run() starts the app, runs the test function, then exits. Handy for automated checks and for documentation pictures. See the test engine doc.

Fly to famous values of c, and zoom into both pictures: near each point, the two sets look alike.

Then read how it works, formula by formula, next to its numpy code.

It is the equation of simple harmonic motion (for the pendulum, at small angles). Adjust the mass and the spring stiffness, and watch how the motion changes.

Drag the angles to set initial positions, then release and watch chaos unfold.

Adjust the number of circles to see how the approximation improves.

Each bird stays apart from its neighbors (separation), flies their way (alignment), and stays with them (cohesion). This is the boids model of Craig Reynolds (1986).

The logistic map, x(n+1) = r * x(n) * (1 - x(n)), models for example the growth of a population with limited resources. Depending on r, it is stable, periodic (in 2-cycles, 4-cycles, etc), or chaotic. Let’s explore this.

The same exists for child windows, menus, popups, tables, tabs, fonts and styles, and for ImPlot with implot_ctx. Open a section to try it and read its code. See the Python tips.

The window shows both rates: the GUI’s frames per second, and the loop’s computations per second. The loop yields with await asyncio.sleep(0) to share the event loop. See async support.

With it, any function of pyGLFW works on your app’s window. Here, buttons maximize, restore, minimize or center it, a slider sets its opacity, and another button makes it ask for attention in the taskbar.

On the left, an animated sine wave, redrawn at each frame, with a slider for its amplitude. On the right, a static figure, drawn once. Handy to reuse existing Matplotlib code; for fast interactive plots, prefer ImPlot.

ImVec2_Pydantic, ImVec4_Pydantic and ImColor_Pydantic are the usual ImVec2, ImVec4 and ImColor, usable as fields of a Pydantic model. The demo shows such a model, turns it into JSON, validates it back, and checks that nothing was lost.

The backend passes the inputs to ImGui and draws it with PyOpenGL. Shows the ImGui demo, and a window with markdown and a formula. Needs pip install imgui-bundle[glfw,opengl].

It uses PySDL2; the backend passes the events to ImGui and draws it with PyOpenGL. Shows the ImGui demo, and a window with markdown and a formula. Needs pip install imgui-bundle[sdl2,opengl] pysdl2-dll.

It uses PySDL3; the backend passes the events to ImGui and draws it with PyOpenGL. Shows the ImGui demo, and a window with markdown and a formula. Needs pip install imgui-bundle[sdl3,opengl].

The backend passes pyglet’s events to ImGui and draws it with PyOpenGL. Shows the ImGui demo, and a window with markdown and a formula. Needs pip install imgui-bundle[pyglet,opengl].

The backend passes pygame’s events to ImGui and draws it with PyOpenGL. Shows a window with markdown, a formula and a few widgets. Needs pip install imgui-bundle[opengl] pygame.

wgpu-py uses Dear ImGui Bundle for its GUIs. Shows the ImGui demo, and a window with markdown and a formula. Needs pip install imgui-bundle[wgpu].

The HTML file below is a complete, self-contained app in about 80 lines - no server, no build step.

Pyodide only: this demo calls the browser’s WebGL2 API directly, through Python’s js interop. On desktop, you would use PyOpenGL instead.

The shader is the famous “Seascape” from Shadertoy, by Alexander Alekseev. In the browser, the app runs with Pyodide.

No copy between the GPU and the CPU at each frame.

Pick a waveform, add some echo, and watch the scope. Pyodide only: it plays through the browser’s WebAudio API, via Pyodide’s js interop.

A few lines of Python: a parametric curve, scaled by a pulse at each frame. Turn the knobs to change the heart rate, or its thickness.

Drawn in 3D with ImPlot3D. Sliders change the system’s parameters and the gap between the two starting points; Reset starts them over.