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.

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.

From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.

Lines, scatter, bars, heatmaps, histograms, real-time plots and more, in Python and C++. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.

Lines, scatter, surfaces, meshes and more, in Python and C++. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.

Tweens, easings, oscillators, delays, callbacks, stagger, loops and chains, in Python and C++. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.

Em units, rows that fill, aligned groups, label columns, a help marker for mouse and touch, a segmented switch, in Python and C++. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.

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.

Content that changes on its own says so with hello_imgui.set_item_is_live(), and keeps the full speed while it is visible. The idling settings are global.

The fix: load a font that has the glyphs you need. This demo shows two ways, with Noto Sans SC:

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.

For scripted runs on top of it (automated tests, pictures, an AI agent at the mouse), see the immapp.testing demo. See the test engine doc.

The test engine demo shows the engine itself, which runs in the browser too. Here, a test function drives the GUI (it clicks, moves a slider, opens a header) and captures a picture at each step; immapp.testing.run() starts the app, runs the test, then exits. The same recipe gives documentation pictures, and lets an AI agent see and drive the app it writes, with nobody at the mouse (the bundle’s screenshot skills are built on it). See the test engine doc.

The complete looks come from Hello ImGui.

They come from the libraries in the bundle: imgui-knobs, imgui_toggle, imspinner, imgui-command-palette and ImCoolBar. Also file dialogs: the native ones (portable-file-dialogs), and ImFileDialog, drawn with ImGui.

Each section shows its source, ready to copy. The page is a document: a table of contents, a search, headings that fold, and widgets between its renders (a live plot).

Several renders and a section of widgets (a plot) share them, in one scroll area. The search also finds the text of the code blocks and of the collapsed sections. The headings fold.

Each tab shows one feature, and a checkbox shows its source. The editor is ImGuiColorTextEdit, by Johan A. Goossens.

On a narrow screen (a phone), two tabs show one of them at a time.

Call hello_imgui.log() anywhere, and show the window with hello_imgui.log_gui(). Its colors follow the theme. Adapted from ImGuiAl.

The shell runs behind a pseudo-terminal (macOS and Linux), pyte parses its VT100 output, and imgui_bundle.imgui_terminal.TerminalView draws it. A standalone version, with more comments: demos_terminal/demo_terminal_pyte.py.

immvision.image_display_resizable() draws it, and you drag its corner to resize it. immvision.image() adds the inspection tools: zoom with the mouse wheel until the pixel values show, pan by dragging, and a button at the bottom right corner opens the settings (colormaps, channels, values).

Then immvision.inspector_show() shows all the collected images, with the zoom, the pan and the pixel inspection of immvision.image(). Here, two photos at startup; on the desktop, a button adds images of every depth and channel count.

Here, a photo and its three color channels. Pan by dragging, zoom with the mouse wheel. The image is read with OpenCV (pip install imgui-bundle[imgproc]).

The original and the filtered image share a zoom key, so they pan and zoom together; the options panel of the filtered image applies colormaps. A button downloads a random photo. The processing is OpenCV’s (pip install imgui-bundle[imgproc]), the display ImmVision’s.

Each link is drawn in the color it carries. A first graph with imgui-node-editor: the nodes, pins and links that the app owns, and how the user edits them.

Change a parameter, and the nodes downstream follow at once. The patterns of imgui-node-editor for a real app: typed pins, links refused with a reason, a node created by dropping a link in empty space, menus, a group.

Pick the operation and the mode (local or world) in the editor panel, drag the gizmo’s handles, and turn the view with the cube at the top right corner. The gizmo is ImGuizmo; the camera matrices are a few lines of plain Python.

Drawn each frame behind the GUI, or into a framebuffer that an ImGui image shows. The scene follows the mouse, and a checkbox blows it up.

NanoVG is a vector drawing library; the drawing goes into a framebuffer that the image shows, and a color picker changes the heart’s color. The pattern for any NanoVG drawing inside a GUI: nvg_imgui.render_nvg_to_frame_buffer().

Type, scroll the history, select and copy, and open more terminals with the “+” tab. This file is the application only: the widget is imgui_bundle.imgui_terminal’s TerminalView, fed by a LocalShellTransport. Needs pip install "imgui-bundle[terminal]" (pyte), on macOS or Linux.

With paramiko: the shape of a shell on a server or a robot, from a desktop GUI. By default it connects to localhost as you, through the SSH agent; edit the host and the user in the file. Needs pip install "imgui-bundle[terminal]" paramiko.

The demo starts the bridge (pty_bridge_server.py); replace it by a shell on a robot, a server or a container, and the GUI stays the same. Needs pip install "imgui-bundle[terminal]" websockets.

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 works in short slices, and yields between them with await asyncio.sleep(...) to share the event loop. See async support.

In async mode (immapp.nb.start()), another cell keeps computing, as fast as it can, between the frames: stream data into a plot, or train a model and tune it while it learns. The page explains both modes; its video trains a neural network live, its learning rate on a slider.

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.

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.

See Pure Python backends. Unlike immapp.run(), there is no Hello ImGui here: no DPI handling, themes or assets.

Here, the phase portrait of a damped pendulum: the flow of its motion (a stream plot) over its energy (filled contours). Click in the portrait: the pendulum starts from there, and swings beside it.

Here, a joint plot of two correlated variables: their scatter plot in the middle, the distribution of each on its side. Move the correlation: the cloud stretches along a line.

Here, two routes between two cities: the shortest one (in red, an arc of a great circle), and the straight line that a ruler draws on a flat map (dashed). Pick the cities and the projection: on a flat map, the shortest route looks curved.

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.

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

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

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

On a mobile or a tablet, Hello ImGui turns a finger into what its user expects: a swipe scrolls, a tap clicks, a held finger opens a context menu, a pinch scales the app (its font) or zooms a plot or an image, two fingers pan, and a keyboard button appears next to a text field.

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.

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.

The dashboard shows what a vibration analyst would watch:

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.

Press Play and two centuries go by. Click a bubble to pin it and draw its path through time; pick other indicators for the axes.

Choose a window preset or drag its bounds on the histogram. Click a structure: the region grows across the slices, and the app measures it and shows it in 3D. A second tab finds the blood vessels of a retina. For research and teaching, not for diagnosis.

The left sky shows the galaxy as it is, the right one what we see through the lens. Drag the galaxy (yellow) and the lens (blue), turn the knobs, or start from a preset: an Einstein ring, two images, a giant arc, the Einstein Cross. The thin lines are the critical curve, where the magnification diverges, and its map in the source plane, the caustic: as the galaxy crosses it, images are born or merge. Hover a pixel of the observed sky to see where its light comes from.