Dear ImGui Examples and Demos: A Complete Guide to Building Interactive UIs

Dear ImGui provides a comprehensive set of examples and demos in imgui_demo.cpp and the examples/ folder that demonstrate immediate-mode GUI implementation across multiple rendering backends including OpenGL, Vulkan, and DirectX.

Dear ImGui (ImGui) is a bloat-free immediate-mode GUI library developed by Omar Cornut that enables developers to create rich debugging interfaces and tools directly within C++ applications. The ocornut/imgui repository contains extensive Dear ImGui examples and demos that serve as both documentation and starting templates for integration. These resources demonstrate the library's rendering-agnostic architecture through practical implementations in the imgui_demo.cpp reference file and various backend adapters.

Core Architecture and Backend System

Immediate-Mode Rendering Paradigm

ImGui rebuilds its entire user interface every frame, emitting draw commands on the fly rather than maintaining a retained widget tree. This approach eliminates complex state management and allows for dynamic, context-sensitive interfaces with minimal overhead. The core logic resides in imgui.cpp and imgui_widgets.cpp, while imgui_draw.cpp handles primitive rendering operations.

Platform and Renderer Backends

The core library remains agnostic to rendering APIs, relying on thin adapter layers located in the backends/ directory. Key implementations include imgui_impl_opengl3.cpp for OpenGL 3.x+ support, imgui_impl_vulkan.cpp for Vulkan applications, and imgui_impl_win32.cpp for native Windows windowing. These backends translate ImGui's draw data into platform-specific rendering calls, allowing the same UI code to run across graphics pipelines.

Essential Demo Files and Structure

The Reference Implementation (imgui_demo.cpp)

The imgui_demo.cpp file serves as the primary learning resource, containing a fully functional showcase of nearly every widget and feature. This file demonstrates usage patterns for basic controls, complex tables, and docking systems without requiring external dependencies beyond the selected backend. Developers often copy sections from this file to bootstrap their own tools.

Core Library Components

• imgui.h – Public API header defining all widgets and data structures.
• imgui.cpp – Core implementation containing context management and frame logic.
• imgui_widgets.cpp – Widget definitions including buttons, sliders, and input fields.
• imgui_tables.cpp – Table and grid layout system implementation.
• imgui_draw.cpp – Rendering primitives and draw list management.
• imgui_internal.h – Internal helpers and advanced data structures for backend developers.

Optional Extensions

The misc/freetype/ directory contains imgui_freetype.cpp, which provides an alternative font rasterizer for improved text rendering quality compared to the default stb_truetype implementation. This optional module demonstrates how to extend ImGui without modifying core files.

Building Your First Dear ImGui Application

A typical integration follows a five-stage initialization and render loop pattern. The example below demonstrates GLFW and OpenGL 3 integration, though the pattern remains consistent across SDL, Win32, or other backend combinations.

// 1. Create window and rendering context
GLFWwindow* window = glfwCreateWindow(1280, 720, "Dear ImGui Demo", nullptr, nullptr);
glfwMakeContextCurrent(window);

// 2. Initialize ImGui context
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO(); // Configure flags, fonts, and I/O

// 3. Initialize platform and renderer backends
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init("#version 130");

// 4. Main application loop
while (!glfwWindowShouldClose(window))
{
    glfwPollEvents();
    
    // Start ImGui frame
    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplGlfw_NewFrame();
    ImGui::NewFrame();

    // Define UI
    ImGui::Begin("Hello, Dear ImGui!");
    ImGui::Text("Application average %.3f ms/frame (%.1f FPS)",
                1000.0f / io.Framerate, io.Framerate);
    ImGui::End();

    // Render
    ImGui::Render();
    int display_w, display_h;
    glfwGetFramebufferSize(window, &display_w, &display_h);
    glViewport(0, 0, display_w, display_h);
    glClear(GL_COLOR_BUFFER_BIT);
    ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
    
    glfwSwapBuffers(window);
}

// 5. Cleanup
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();
glfwDestroyWindow(window);
glfwTerminate();

Key Widgets and Features Demonstrated

The imgui_demo.cpp implementation showcases the complete widget toolkit available in the library.

Basic Interactive Controls

Buttons trigger actions via ImGui::Button("Click Me"), returning true when clicked during the current frame. Sliders provide numeric input through functions like ImGui::SliderFloat("Speed", &speed, 0.0f, 1.0f), which clamps values and provides intuitive drag interaction.

Selection and Hierarchy Widgets

Combo boxes enable item selection from defined sets using ImGui::Combo("Mode", &mode, "A\0B\0C\0"). TreeNode widgets create collapsible hierarchical structures, requiring paired ImGui::TreePop() calls to maintain stack integrity:

if (ImGui::TreeNode("Folder Contents")) 
{
    ImGui::Text("File A");
    ImGui::Text("File B");
    ImGui::TreePop();
}

Data Visualization and Tables

PlotLines and PlotHistogram provide immediate data visualization through ImGui::PlotLines("History", values, values_count) for time-series data or distribution charts. The Table API in imgui_tables.cpp supports sortable columns and complex layouts via ImGui::BeginTable("my_table", 3) and ImGui::EndTable() pairs.

Docking and Multi-Viewport

When io.ConfigFlags |= ImGuiConfigFlags_DockingEnable is set, DockSpace enables window docking within a main viewport. Enabling ImGuiConfigFlags_ViewportsEnable allows ImGui windows to render outside the application window boundaries, creating native OS window decorations for tool palettes.

Advanced Customization Techniques

Developers typically extend the base examples by integrating additional rendering pipelines and customization hooks.

Custom Font Rendering

Replace the default font atlas with the FreeType rasterizer by including misc/freetype/imgui_freetype.cpp and calling io.Fonts->AddFontFromFileTTF("path/to/font.ttf", size_pixels). This improves glyph rendering at small sizes and supports advanced typographic features.

Custom Draw Callbacks

Advanced rendering scenarios utilize ImDrawList::AddCallback to inject custom GPU state changes or overlay debug geometry onto ImGui's render output. These callbacks execute during the ImGui_ImplOpenGL3_RenderDrawData phase, allowing seamless integration with existing application rendering.

Documentation Resources

The repository includes comprehensive documentation beyond the source code examples. The docs/EXAMPLES.md file provides concise integration guides for first-time users, while docs/BACKENDS.md details the architecture and implementation specifics of each platform adapter. For troubleshooting and optimization, consult docs/FAQ.md and docs/CHANGELOG.txt to track API evolution and common implementation pitfalls.

Summary

• Dear ImGui examples and demos reside primarily in imgui_demo.cpp and the examples/ directory, providing reference implementations for every widget.
• The architecture separates platform-agnostic core logic (imgui.cpp, imgui_widgets.cpp) from rendering-specific backends in the backends/ folder.
• Integration requires initializing the ImGui context, platform backend, and renderer backend before entering the frame loop.
• The demo showcases immediate-mode widgets including tables, docking systems, and plotting utilities without retained state.
• Optional extensions like the FreeType rasterizer (misc/freetype/) and multi-viewport support extend functionality for production tools.

Frequently Asked Questions

Where can I find the main Dear ImGui demo source code?

The primary demonstration code lives in imgui_demo.cpp at the repository root. This file contains a comprehensive showcase of all widgets and features, and you can run it directly through the project files in the examples/ folder for your specific platform and renderer combination.

How do I integrate Dear ImGui with my existing OpenGL or Vulkan application?

You must include the appropriate backend files from the backends/ directory, such as imgui_impl_opengl3.cpp or imgui_impl_vulkan.cpp, alongside a platform backend like imgui_impl_glfw.cpp or imgui_impl_win32.cpp. Initialize these after creating your graphics context, then call the NewFrame and RenderDrawData functions within your main loop as shown in the standard examples.

What is the difference between the core ImGui library and the examples?

The core library (imgui.h, imgui.cpp, imgui_widgets.cpp) contains the platform-agnostic immediate-mode UI logic and widget definitions. The examples and demos provide concrete integration code showing how to wire this core to specific rendering APIs (OpenGL, DirectX, etc.) and windowing systems, along with usage patterns for complex features like docking and tables.

Can I use Dear ImGui for commercial applications?

Yes, Dear ImGui is licensed under the MIT License, permitting commercial use, modification, and distribution. The examples and demos follow the same licensing terms, allowing you to copy and adapt the integration code for proprietary tools and debugging interfaces.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}