# Dear ImGui Bundle: the demos

The demos of the catalog, by category: what each one shows, the libraries it uses, and its code on GitHub (Python, and C++ when it exists). Read the code of a demo close to what you write. Most demos run in the browser: "Run" gives where (Python: the playground, C++: an explorer), a link for a user who wants to see it. The guide for AI assistants: https://imgui-bundle.pages.dev/llms.txt; the API in plain text: https://imgui-bundle.pages.dev/llms/api/index.txt; the explorers: https://imgui-bundle.pages.dev/llms/explorers.txt.


## Start here

The bundle in ten minutes: what it is, first apps, and a few lines that do a lot.

- What is an Immediate GUI: With Dear ImGui, your GUI code is simple and direct: no widget trees, no callbacks, no state synchronization. You call functions to create widgets, and they return the current value. That's it.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/welcome_imm_mode.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/welcome_imm_mode.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=welcome_imm_mode.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/welcome_imm_mode.html
- Hello world, in two lines: ImmApp opens the window, runs the loop, and calls your GUI function at every frame: immapp.run(gui) is all it takes. Add widgets to that function, and you have an app. The C++ version is three lines.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_hello_world.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_hello_world.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_hello_world.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_hello_world.html
- A parametric curve: Turn the knobs, or click Random: the curve follows at once. 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.
  Uses: ImPlot, knobs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_parametric_curve.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_parametric_curve.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_parametric_curve.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_parametric_curve.html
- A plot and markdown, in a few lines: A cosine wave moves in an ImPlot plot, under a text written in markdown. Both are add-ons, activated in one call: immapp.run(gui, with_implot=True, with_markdown=True). A good start for a small app.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_implot_markdown.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_implot_markdown.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_implot_markdown.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_implot_markdown.html
- Assets and add-ons: Load images and icons from your assets folder, and use two add-ons: markdown and ImPlot. 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.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_assets_addons.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_assets_addons.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_assets_addons.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_assets_addons.html
- A beating heart: A heart curve drawn with ImPlot beats at the rate set by a knob from imgui-knobs. 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.
  Uses: ImPlot, knobs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/haiku_implot_heart.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/haiku_implot_heart.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=haiku_implot_heart.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/haiku_implot_heart.html
- Butterfly effect, in a few lines: Two trajectories of the Lorenz system start almost at the same point, then drift apart: chaos in action. Drawn in 3D with ImPlot3D. Sliders change the system's parameters and the gap between the two starting points; Reset starts them over.
  Uses: ImPlot3D
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/haiku_butterfly.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/haiku_butterfly.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=haiku_butterfly.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/haiku_butterfly.html

## Interactive manuals

Dear ImGui, ImPlot, ImPlot3D and ImAnim: all their features, section by section, with the code beside.

- Dear ImGui: the interactive manual: Every widget and feature of Dear ImGui, section by section, with the Python and C++ code of each beside it. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.
  Uses: ImGui
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/manuals/manual_imgui.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/external/imgui_explorer/imgui_explorer_website/website/demo_code/imgui_demo.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=manual_imgui.py
  Run, C++: https://pthom.github.io/imgui_explorer/?lib=imgui
- ImPlot: the interactive manual: Every kind of plot of ImPlot, section by section, with the code of each beside it. 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.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/manuals/manual_implot.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/external/imgui_explorer/imgui_explorer_website/website/demo_code/implot_demo.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=manual_implot.py
  Run, C++: https://pthom.github.io/imgui_explorer/?lib=implot
- ImPlot3D: the interactive manual: The 3D plots of ImPlot3D, section by section, with the code of each beside it. Lines, scatter, surfaces, meshes and more, in Python and C++. From Dear ImGui Explorer, the interactive manual for Dear ImGui and its libraries.
  Uses: ImPlot3D
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/manuals/manual_implot3d.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/external/imgui_explorer/imgui_explorer_website/website/demo_code/implot3d_demo.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=manual_implot3d.py
  Run, C++: https://pthom.github.io/imgui_explorer/?lib=implot3d
- ImAnim: the interactive manual: The animations of ImAnim, section by section, with the code of each beside it. 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.
  Uses: ImAnim
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/manuals/manual_im_anim.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/external/imgui_explorer/imgui_explorer_website/website/demo_code/im_anim_demo_basics.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=manual_im_anim.py
  Run, C++: https://pthom.github.io/imgui_explorer/?lib=imanim

## Build an app

Layouts, docking, backgrounds, fonts, testing: what a real application needs.

- Resizable panels with child windows: Learn how to create resizable adjacent panels, using child windows.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/layout_child.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/layout_child.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=layout_child.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/layout_child.html
- Dockable windows: Hello ImGui provides a docking system: define named dock spaces, then assign windows to them. Windows can be dragged, tabbed, and rearranged by the user.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/layout_docking.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/layout_docking.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=layout_docking.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/layout_docking.html
- A full app: docking, fonts, logs: A template for a real application, built with Hello ImGui: copy it and start from there. 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.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_docking.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_docking.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_docking.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_docking.html
- Power save when idle: When nothing happens, Hello ImGui lowers the frame rate to spare the CPU: after 3 seconds, the live plot and the spinner become choppy. 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.
  Uses: ImPlot, toggles, spinners
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_powersave.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_powersave.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_powersave.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_powersave.html
- Chinese and other non-Latin fonts: The bundled fonts cover Latin, Greek and Cyrillic only: other scripts show up as ???. The fix: load a font that has the glyphs you need. This demo shows two ways, with Noto Sans SC:
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_chinese_font.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_chinese_font.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_chinese_font.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_chinese_font.html
- Drag and drop: Drag a name onto another button to copy it, move it, or swap the two: the radio buttons pick the mode. Each button is both a drag source and a drop target. Adapted from the drag and drop section of the Dear ImGui demo.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_drag_and_drop.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_drag_and_drop.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_drag_and_drop.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_drag_and_drop.html
- Command palette: A searchable list of commands, as in VS Code: press Ctrl+Shift+P (Cmd+Shift+P on macOS), or its button. 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.
  Uses: command palette
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_command_palette.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_command_palette.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_command_palette.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_command_palette.html
- Test engine: Watch a ImGui Test Engine drive the mouse and the keyboard: it clicks buttons, types text, etc., and checks the results. 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.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_testengine.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_testengine.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_testengine.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_testengine.html
- immapp.testing: scripted runs: Easy automated tests with immapp.testing, a thin layer on the test engine: a script drives the app, then exits. 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.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_immapp_testing.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_immapp_testing.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_immapp_testing.py

## Library tours

The libraries in the bundle: full demos, widget tours, showcases.

- Themes and theme tweaking: Pick a complete look for your app, then fine-tune its colors, rounding and spacing. The complete looks come from Hello ImGui.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/themes.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=themes.py
- Knobs, toggles, spinners and more: Knobs, toggle switches, spinners, a command palette, a dock-like cool bar: widgets beyond Dear ImGui's own. 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.
  Uses: knobs, toggles, spinners, cool bar, command palette, file dialogs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_widgets.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_widgets.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_widgets.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_widgets.html
- Markdown tour: Markdown rendered in an ImGui window: styled text, tables, code, images, math, diagrams, admonitions and more. 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).
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_imgui_md.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_imgui_md.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_imgui_md.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_imgui_md.html
- Markdown: a document with a table of contents and a search: Markdown as a document: a table of contents beside it, links between its sections, and a search (Ctrl+F). 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.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_imgui_md_document.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_imgui_md_document.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_imgui_md_document.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_imgui_md_document.html
- Code editor: A code editor widget, with syntax highlighting, multiple cursors, a diff view, filters, annotations and context menus. Each tab shows one feature, and a checkbox shows its source. The editor is ImGuiColorTextEdit, by Johan A. Goossens.
  Uses: code editor
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_text_edit.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_text_edit.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_text_edit.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_text_edit.html
- Markdown editor: the source and its live preview: A markdown editor in a few lines: ImGuiColorTextEdit edits the source, rich_md previews it as you type. On a narrow screen (a phone), two tabs show one of them at a time.
  Uses: code editor
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_markdown_editor.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_markdown_editor.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_markdown_editor.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_markdown_editor.html
- Log window: A log window for your app, with four levels: debug, info, warning and error. Call hello_imgui.log() anywhere, and show the window with hello_imgui.log_gui(). Its colors follow the theme. Adapted from ImGuiAl.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_logger.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demo_logger.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_logger.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_logger.html
- Terminal (desktop only): A real shell in an ImGui widget: type commands, scroll back through the history, select and copy. 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.
  Uses: terminal
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demo_terminal.py
- ImmVision: display and inspect: Two ways to show an image (a NumPy array in Python, a cv::Mat in C++). 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).
  Uses: ImmVision, OpenCV
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immvision/demo_immvision_display.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immvision/demo_immvision_display.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_immvision_display.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_immvision_display.html
- ImmVision: the inspector: Call immvision.inspector_add_image() anywhere, for example at each step of an image processing algorithm. 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.
  Uses: ImmVision, OpenCV
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immvision/demo_immvision_inspector.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immvision/demo_immvision_inspector.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_immvision_inspector.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_immvision_inspector.html
- ImmVision: images that zoom together: Image params that share a zoom_key follow each other: pan or zoom one image, and the others move with it. 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]).
  Uses: ImmVision, OpenCV
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immvision/demo_immvision_link.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immvision/demo_immvision_link.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_immvision_link.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_immvision_link.html
- ImmVision: image processing, tuned live: A Sobel filter on a photo: change the blur, the derivative's order and its orientation, and the result updates at once. 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.
  Uses: ImmVision, OpenCV
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immvision/demo_immvision_process.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immvision/demo_immvision_process.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_immvision_process.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_immvision_process.html
- Node editor: a color mixer: Colors flow through a small graph: pick two colors, mix them, and see the result in the swatches. 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.
  Uses: node editor
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_node_editor/demo_node_editor_color_mixer.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_node_editor/demo_node_editor_color_mixer.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_node_editor_color_mixer.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_node_editor_color_mixer.html
- Node editor: an image pipeline: An image flows through a graph of filters, and each node shows its result. 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.
  Uses: ImPlot, ImmVision, node editor, OpenCV
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_node_editor/demo_node_editor_image_pipeline.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_node_editor/demo_node_editor_image_pipeline.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_node_editor_image_pipeline.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_node_editor_image_pipeline.html
- ImGuizmo: a 3D gizmo: Move, rotate and scale cubes with a gizmo, as in a 3D editor. 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.
  Uses: ImGuizmo
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_imguizmo/demo_gizmo.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_imguizmo/demo_gizmo.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_gizmo.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_gizmo.html
- NanoVG: the full demo (desktop only): The demo of NanoVG, a vector drawing library: shapes, gradients, text, images. 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.
  Uses: NanoVG
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_nanovg/demo_nanovg_full.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_nanovg/demo_nanovg_full.cpp
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_nanovg_full.html
- NanoVG: a beating heart: A heart drawn with NanoVG beats in an ImGui image. 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().
  Uses: NanoVG
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_nanovg/demo_nanovg_heart.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_nanovg/demo_nanovg_heart.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_nanovg_heart.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_nanovg_heart.html
- Terminal: several shells in tabs (desktop only): Real shells in a tab bar, each behind a pseudo-terminal. 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.
  Uses: terminal
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_terminal/demo_terminal_pyte.py
- Terminal over SSH (desktop only): The same terminal widget, fed by an SSH channel instead of a local shell. 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.
  Uses: terminal
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_terminal/demo_terminal_ssh.py
- Terminal over a websocket (desktop only): The same terminal widget, its bytes carried by a websocket to a pty bridge server. 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.
  Uses: terminal
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_terminal/demo_terminal_websocket.py

## Python specifics

Async, Pydantic, context managers, the GLFW window, and pure Python backends.

- Context managers (imgui_ctx): In Python, with imgui_ctx.begin("Window"): replaces a begin() / end() pair, and the end() can no longer be forgotten. 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.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/demo_python_context_manager.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_python_context_manager.py
- Async: compute beside the GUI: The GUI runs as an asyncio task, while a Python loop keeps computing. 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.
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/demo_run_async.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_run_async.py
- A GUI beside a Jupyter notebook (desktop only): At 60 or 120 frames per second, a live GUI beside your Jupyter notebook while the cells run. 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.
  Uses: ImPlot
  Page: https://imgui-bundle.pages.dev/doc/python/notebook-runners/
  Video: https://www.youtube.com/watch?v=VqLz5F_bk60
- Control the GLFW window (desktop only): glfw_utils.glfw_window_hello_imgui() returns the GLFW window that Hello ImGui created. 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.
  Uses: GLFW
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/demo_glfw_window_manip.py
- Pydantic models: Save and load your app's settings with Pydantic, ImVec2 and colors included. 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.
  Uses: Pydantic
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/demo_pydantic.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_pydantic.py
- Python backends: GLFW, SDL, pyglet, pygame, wgpu (desktop only): With a pure Python backend, you drive the full app loop. See Pure Python backends. Unlike immapp.run(), there is no Hello ImGui here: no DPI handling, themes or assets.
  Uses: OpenGL, GLFW, SDL, pyglet, pygame, wgpu
  Python (GLFW): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_glfw3.py
  Python (SDL2): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_sdl2.py
  Python (SDL3): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_sdl3.py
  Python (pyglet): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_pyglet.py
  Python (pygame): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_pygame.py
  Python (wgpu): https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/python_backends/examples/example_python_backend_wgpu.py

## Plotting with Python

Python's plotting libraries in the GUI: Matplotlib, seaborn and Cartopy figures, beside ImPlot's real-time plots.

- Matplotlib: a phase portrait: imgui_fig.fig() shows a Matplotlib figure in the GUI. 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.
  Uses: Matplotlib
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/plotting/demo_matplotlib.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_matplotlib.py
- Seaborn: a joint plot: Seaborn draws statistics figures on top of Matplotlib, so imgui_fig.fig() shows them as they are. 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.
  Uses: Matplotlib, seaborn
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/plotting/demo_seaborn.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_seaborn.py
- Cartopy: the shortest route around the globe: Cartopy draws maps with Matplotlib, in many projections. 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.
  Uses: Matplotlib
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_python_specifics/plotting/demo_cartopy.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_cartopy.py

## 3D and shaders

Draw behind the GUI or into a texture with OpenGL and WebGL shaders, from Python.

- Shader background, minimal (browser only): The Mandelbrot set, drawn by a fragment shader behind the GUI. Pyodide only: this demo calls the browser's WebGL2 API directly, through Python's js interop. On desktop, you would use PyOpenGL instead.
  Uses: browser APIs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/webgl_minimal_mandelbrot.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=webgl_minimal_mandelbrot.py
- Shader background: a 3D sea: One source file, two platforms: a shader behind the GUI, with OpenGL on desktop and WebGL in the browser. The shader is the famous "Seascape" from Shadertoy, by Alexander Alekseev. In the browser, the app runs with Pyodide.
  Uses: OpenGL, browser APIs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/webgl_background_shader.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=webgl_background_shader.py
- 3D sea in OpenGL (desktop) (desktop only): Draw anything behind your GUI with OpenGL: here, an animated sea whose waves and colors you can tune. 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).
  Uses: OpenGL
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_custom_background.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_custom_background.cpp
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_custom_background.html
- 3D cube in a texture (browser only): A 3D cube drawn with WebGL2 into a texture, and shown in the GUI by imgui.image(). No copy between the GPU and the CPU at each frame.
  Uses: browser APIs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/webgl_texture_in_image.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=webgl_texture_in_image.py

## In the browser

Deploy to the web, and use the browser's WebAudio and WebGL from Python.

- Minimal HTML page: Dear ImGui Bundle apps can run entirely in the browser using Pyodide. The HTML file below is a complete, self-contained app in about 80 lines - no server, no build step.
  Uses: code editor
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/minimal_example.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=minimal_example.py
- Touch screens (phones, tablets): The gestures of a phone in the browser: a swipe, a tap, a long press, a pinch, the keyboard. 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), two fingers pan, and a keyboard button appears next to a text field.
  Uses: ImPlot, ImmVision
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/demos_immapp/demo_touch_screen.py
  C++: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_cpp/demos_immapp/demo_touch_screen.cpp
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=demo_touch_screen.py
  Run, C++: https://imgui-bundle.pages.dev/explorer/demo_touch_screen.html
- WebAudio synthesizer (browser only): A small synthesizer written in Python: play the piano with the mouse or the computer keyboard, or let it play a tune. 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.
  Uses: knobs, browser APIs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/webaudio_synth.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=webaudio_synth.py

## Interactive science

Explorable lessons in physics, chaos and machine learning, built with the bundle.
Dear ImGui Bundle excels at real-time scientific visualization: 60 frames per second or more, even under load. These demos show it.

- Interactive exploration of the Mandelbrot set: Click a point of the Mandelbrot set to see its Julia set. Fly to famous values of c, and zoom into both pictures: near each point, the two sets look alike.
  Uses: ImmVision
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/julia_map/julia_map.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/julia_map/julia_map.py
- A tiny neural network learns two spirals: Can 16 neurons tell two spirals apart? Watch a tiny neural network) learn, live, as in the TensorFlow Playground. Then read how it works, formula by formula, next to its numpy code.
  Uses: ImPlot
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/neural_spiral/neural_spiral.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/neural_spiral/neural_spiral.py
- Rotor run-up monitor: vibration analysis: A simulated three-axis accelerometer sits on the bearing housing of a rotor whose speed sweeps up and down. The dashboard shows what a vibration analyst would watch:
  Uses: ImPlot, knobs, toggles, node editor
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/rotor_dashboard.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/rotor_dashboard.py
- Simple harmonic motion: A mass on a spring, a pendulum, a vibrating string: they all follow the same equation. 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.
  Uses: ImPlot, knobs
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/lesson_harmonic_motion.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/lesson_harmonic_motion.py
- Double pendulum: A double pendulum is a chaotic system: tiny changes in its initial conditions lead to wildly different trajectories. Drag the angles to set initial positions, then release and watch chaos unfold.
  Uses: ImPlot, knobs, toggles
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/double_pendulum.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/double_pendulum.py
- Fourier epicycles: Any closed curve can be approximated by a sum of rotating circles (a Fourier series). Adjust the number of circles to see how the approximation improves.
  Uses: ImPlot, knobs, toggles
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/fourier_epicycles.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/fourier_epicycles.py
- Boids (flocks): A flock of birds emerges from three simple local rules, with no leader and no plan. 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).
  Uses: ImPlot, knobs, toggles
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/boids.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/boids.py
- Logistic map: A very simple equation, and yet it can lead to wildly different behaviors, up to chaos. 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.
  Uses: ImPlot, toggles
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/logistic_map.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/logistic_map.py
- Health and wealth of nations, 1800 to 2100: Each bubble is a country: income per person across, life expectancy up, population as the size, world region as the color. 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.
  Uses: ImPlot, spinners
  Python: https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/playground/examples/explorables/health_and_wealth.py
  Run, Python: https://imgui-bundle.pages.dev/playground/?demo=explorables/health_and_wealth.py