Dear ImGui — User Guide

Dear ImGui is a bloat-free graphical user interface library for C++. It outputs optimized vertex buffers that you can render anytime in your 3D-pipeline-enabled application. It is fast, portable, renderer-agnostic, and self-contained (no external dependencies). Dear ImGui is designed to enable fast iterations and to empower programmers to create content creation tools, visualization/debug tools, and any UI for games or real-time applications.

Dear ImGui is particularly suited to integration in game engines (for tooling), real-time 3D applications, fullscreen applications, embedded applications, or any application where operating-system features are non-standard.

1. Quick Start

What Is Dear ImGui?

Dear ImGui (short for "Dear Immediate Mode Graphical User Interface") is a C++ library that makes it trivially easy to add debug UIs, tools, and overlays to any application that already has a rendering pipeline. Unlike retained-mode GUI frameworks (Qt, wxWidgets, GTK), Dear ImGui redraws the entire UI every frame from your code — there is no hidden widget state to synchronize. You describe the UI, Dear ImGui draws it, and returns interaction results immediately.

Key Features

• Immediate mode — no widget objects, no callbacks, no synchronization. UI code lives alongside your logic.
• Renderer agnostic — outputs vertex buffers (ImDrawList) that you feed to any GPU API: OpenGL, DirectX 9/10/11/12, Vulkan, Metal, WebGPU, SDL_GPU, or your own.
• Self-contained — no external dependencies. STB-style single-header libraries for font rasterization and text editing are bundled.
• Keyboard & gamepad navigation — full navigation support without a mouse, including tabbing, directional movement, and activation.
• Tables — feature-rich table widget with sorting, reordering, hiding columns, horizontal scrolling, and freeze rows/columns.
• Multi-select — beta API for multi-selection in lists, tables, and tree nodes with range-select and Ctrl+click.
• Drag and drop — built-in drag-and-drop system with typed payloads between any widgets.
• Extensive widget library — text inputs, sliders, drags, color pickers, trees, tabs, menus, popups, modals, plots, images, and more.

Prerequisites

Minimal Code Example

#include "imgui.h"
#include "imgui_impl_allegro5.h"
#include <allegro5/allegro.h>
#include <allegro5/allegro_primitives.h>

int main()
{
    // Platform/renderer setup (Allegro5 example)
    al_init();
    al_init_primitives_addon();
    ALLEGRO_DISPLAY* display = al_create_display(1280, 720);

    // Initialize Dear ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();

    // Setup platform/renderer backends
    ImGui_ImplAllegro5_Init(display);

    // Style
    ImGui::StyleColorsDark();

    bool running = true;
    while (running)
    {
        // Poll events...
        ImGui_ImplAllegro5_NewFrame();
        ImGui::NewFrame();

        // Your UI code — this is the entire API pattern:
        ImGui::Begin("My Tool");
        ImGui::Text("Hello, Dear ImGui!");
        static float value = 0.0f;
        ImGui::SliderFloat("Value", &value, 0.0f, 1.0f);
        if (ImGui::Button("Press Me"))
        {
            // React to button press
        }
        ImGui::End();

        // Render
        ImGui::Render();
        al_clear_to_color(al_map_rgb(0, 0, 0));
        ImGui_ImplAllegro5_RenderDrawData(ImGui::GetDrawData());
        al_flip_display();
    }

    // Cleanup
    ImGui_ImplAllegro5_Shutdown();
    ImGui::DestroyContext();
    al_destroy_display(display);
    return 0;
}

What to Try Next

1. ShowDemoWindow() — call ImGui::ShowDemoWindow() anywhere in your frame loop to see every widget in action with source code.
2. Examples — the examples/ folder contains 26 ready-to-build projects for every major platform/renderer combination.
3. Wiki — the Dear ImGui Wiki covers integration, third-party bindings, and community resources.

Tip

ImGui::ShowDemoWindow() is the single best learning resource for Dear ImGui. Every widget, layout technique, and API pattern is demonstrated with inline code. You can Ctrl+click on any demo code in the Demo window to jump to the corresponding source in imgui_demo.cpp. Treat it as a living, interactive reference manual.

2. Installation

Dear ImGui is a source-level library — there is no package manager install, no pre-built binaries, and no cmake install target. You add the source files directly to your project.

System Requirements

Step 1: Add Core Files

Copy these files into your project (or add them as includes from the imgui directory):

Step 2: Pick a Platform + Renderer Backend

Backends live in the backends/ folder. You need one platform backend (handles window creation, input, clipboard) and one renderer backend (handles drawing via GPU API).

Backend Combinations

Backend files follow the naming convention imgui_impl_<name>.h and imgui_impl_<name>.cpp. For example, to use GLFW + OpenGL3:

// Add these files to your build:
// backends/imgui_impl_glfw.cpp
// backends/imgui_impl_glfw.h
// backends/imgui_impl_opengl3.cpp
// backends/imgui_impl_opengl3.h

#include "imgui_impl_glfw.h"
#include "imgui_impl_opengl3.h"

Step 3: Review Example Applications

The examples/ folder contains ready-to-build projects for every supported backend combination:

Each example directory contains a main.cpp and platform-specific project files (.vcxproj, Makefile, build_win32.bat, etc.).

Step 4: Build

Add the .cpp files to your existing build system. No special build process is required — no code generation, no pre-processing, no configure step.

Visual Studio: Add the .cpp files to your project. Add the imgui/ and imgui/backends/ directories to your include paths.

CMake:

add_executable(my_app
    main.cpp
    imgui/imgui.cpp
    imgui/imgui_draw.cpp
    imgui/imgui_tables.cpp
    imgui/imgui_widgets.cpp
    imgui/backends/imgui_impl_glfw.cpp
    imgui/backends/imgui_impl_opengl3.cpp
)
target_include_directories(my_app PRIVATE imgui imgui/backends)

Makefile:

IMGUI_SRCS = imgui/imgui.cpp imgui/imgui_draw.cpp imgui/imgui_tables.cpp imgui/imgui_widgets.cpp
BACKEND_SRCS = imgui/backends/imgui_impl_glfw.cpp imgui/backends/imgui_impl_opengl3.cpp

Step 5: Verify

// In your initialization code:
IMGUI_CHECKVERSION();  // Verify header/library version match
ImGui::CreateContext();
ImGui::ShowDemoWindow(); // Should display the demo window

Important

imconfig.h is a compile-time configuration file. If you modify it, you must recompile ALL translation units that include imgui.h. Inconsistent imconfig.h across translation units causes subtle memory corruption and crashes. If Dear ImGui is compiled as a static library or DLL, the same imconfig.h must be used for both the library build and your application.

Optional: FreeType Font Rasterizer

For higher-quality font rendering, enable FreeType:

1. #define IMGUI_ENABLE_FREETYPE in imconfig.h
2. Add misc/freetype/imgui_freetype.cpp to your build
3. Link against FreeType library

For SVG-in-font support (color emoji, icon fonts), additionally define IMGUI_ENABLE_FREETYPE_PLUTOSVG or IMGUI_ENABLE_FREETYPE_LUNASVG and link the corresponding library.

Optional: std::string Support

// Add to your build:
// misc/cpp/imgui_stdlib.cpp
// misc/cpp/imgui_stdlib.h

#include "misc/cpp/imgui_stdlib.h"

std::string my_text = "Hello";
ImGui::InputText("Input", &my_text);  // Works with std::string directly

Optional: Debugger Helpers

Optional: Single-File Build

For projects that prefer a single compilation unit:

// imgui_single_file.h is provided in misc/single_file/
#include "misc/single_file/imgui_single_file.h"

This #includes all four core .cpp files into a single translation unit.

3. Configuration

Compile-Time Configuration (imconfig.h)

These #defines must be set in imconfig.h before compiling. They cannot be changed at runtime.

Math type interop example:

// In imconfig.h — let ImVec2 convert to/from your engine's Vector2:
#define IM_VEC2_CLASS_EXTRA \
    constexpr ImVec2(const MyEngine::Vector2& v) : x(v.x), y(v.y) {} \
    operator MyEngine::Vector2() const { return MyEngine::Vector2(x, y); }

Runtime Configuration (ImGuiIO)

After CreateContext(), configure behavior through ImGui::GetIO():

ImGuiIO& io = ImGui::GetIO();

// Navigation
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;  // Keyboard navigation
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;    // Gamepad navigation

// Behavior
io.ConfigInputTextCursorBlink = true;          // Blinking cursor in text inputs
io.ConfigWindowsResizeFromEdges = true;        // Resize from window edges (not just corner)
io.ConfigWindowsMoveFromTitleBarOnly = false;   // If true, only title bar drags windows
io.ConfigScrollbarScrollByPage = true;         // Page-scroll when clicking scrollbar track

// Persistence
io.IniFilename = "imgui.ini";  // Set to NULL to disable auto-save/load

// Display
io.FontGlobalScale = 1.0f;    // Global font scale multiplier

Key ImGuiConfigFlags:

Built-In Styles

ImGui::StyleColorsDark();     // Dark theme (default) — best for most tools
ImGui::StyleColorsLight();    // Light theme
ImGui::StyleColorsClassic();  // Classic ImGui theme (gray with blue highlights)

Tip

Call ImGui::ShowStyleEditor() anywhere in your frame loop to open an interactive style editor. You can tweak every color, size, and rounding value in real time and export the result as code. This is the fastest way to create a custom theme.

For a complete reference of all configuration options, style variables, and color IDs, see the Admin Guide.

4. Core Usage

Dear ImGui follows a consistent pattern: every frame, you call functions that describe your UI, and Dear ImGui handles layout, drawing, and interaction. This section covers every widget category organized by what you want to accomplish.

4.1 Creating Windows

Every piece of Dear ImGui content lives inside a window created with Begin()/End():

ImGui::Begin("My Window");
// ... widgets go here ...
ImGui::End();

Begin() returns false when the window is collapsed, but you must always call End() regardless. For optimization, skip widget code when collapsed:

if (ImGui::Begin("My Window"))
{
    ImGui::Text("Visible content");
}
ImGui::End();  // Always required

Window Flags

Pass flags as the third parameter to Begin():

ImGui::Begin("My Window", &show_window, ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoResize);

Window Manipulation

Set properties for the next Begin() call:

ImGui::SetNextWindowPos(ImVec2(100, 100), ImGuiCond_FirstUseEver);
ImGui::SetNextWindowSize(ImVec2(400, 300), ImGuiCond_FirstUseEver);
ImGui::SetNextWindowCollapsed(false, ImGuiCond_Once);
ImGui::SetNextWindowFocus();
ImGui::SetNextWindowBgAlpha(0.8f);

Condition flags (ImGuiCond_):

Child Windows

Create scrollable sub-regions within a window:

// With explicit size
ImGui::BeginChild("ScrollRegion", ImVec2(0, 300), ImGuiChildFlags_Borders);
for (int i = 0; i < 100; i++)
    ImGui::Text("Item %d", i);
ImGui::EndChild();

// Auto-sizing child
ImGui::BeginChild("AutoChild", ImVec2(0, 0), ImGuiChildFlags_AutoResizeY);
ImGui::Text("This child sizes to its content vertically");
ImGui::EndChild();

Window Queries

bool focused = ImGui::IsWindowFocused();
bool hovered = ImGui::IsWindowHovered();
ImVec2 pos   = ImGui::GetWindowPos();
ImVec2 size  = ImGui::GetWindowSize();

4.2 Displaying Text and Basic Widgets

Text Display

ImGui::Text("Simple text");
ImGui::Text("Formatted: %d items, %.2f seconds", count, elapsed);
ImGui::TextColored(ImVec4(1,0,0,1), "Red warning text");
ImGui::TextDisabled("Grayed out hint");
ImGui::TextWrapped("This long text will wrap to the available width "
                   "of the current window or column.");
ImGui::BulletText("Bulleted item");
ImGui::SeparatorText("Section Header");

Buttons

if (ImGui::Button("Click Me"))
{
    // Action happens on the frame the button is clicked
}

if (ImGui::Button("Sized Button", ImVec2(200, 40)))
{
    // Button with explicit size
}

ImGui::SmallButton("Compact");          // Small, no frame padding
ImGui::ArrowButton("##left", ImGuiDir_Left);  // Directional arrow

// Invisible button — a clickable region with no visual
if (ImGui::InvisibleButton("zone", ImVec2(100, 100)))
{
    // Clicked in the invisible region
}

// Hyperlinks
ImGui::TextLink("Open Documentation");     // Returns true when clicked
ImGui::TextLinkOpenURL("Visit GitHub", "https://github.com/ocornut/imgui");

Checkboxes and Radio Buttons

static bool enabled = true;
ImGui::Checkbox("Enable Feature", &enabled);

static int mode = 0;
ImGui::RadioButton("Mode A", &mode, 0); ImGui::SameLine();
ImGui::RadioButton("Mode B", &mode, 1); ImGui::SameLine();
ImGui::RadioButton("Mode C", &mode, 2);

Progress Bar

ImGui::ProgressBar(0.65f, ImVec2(0, 0), "65%");

4.3 Input Widgets

Text Input

static char buf[256] = "";
if (ImGui::InputText("Name", buf, sizeof(buf)))
{
    // Text changed this frame
}

static char multiline[1024] = "";
ImGui::InputTextMultiline("Description", multiline, sizeof(multiline),
                          ImVec2(-FLT_MIN, ImGui::GetTextLineHeight() * 8));

static char search[128] = "";
ImGui::InputTextWithHint("##search", "Search...", search, sizeof(search));

Key ImGuiInputTextFlags:

Numeric Input

static float f = 0.5f;
static int i = 42;

// Drag widgets — click and drag to adjust
ImGui::DragFloat("Speed", &f, 0.01f, 0.0f, 1.0f, "%.3f");
ImGui::DragInt("Count", &i, 1, 0, 100);

// Slider widgets — slide within a fixed range
ImGui::SliderFloat("Volume", &f, 0.0f, 1.0f, "%.2f");
ImGui::SliderInt("Quality", &i, 0, 10);
ImGui::SliderAngle("Rotation", &f);  // Displays in degrees, stores radians

// Direct numeric input
ImGui::InputFloat("Value", &f, 0.1f, 1.0f, "%.3f");
ImGui::InputInt("Count", &i, 1, 10);
ImGui::InputDouble("Precision", &d, 0.001, 0.01, "%.6f");

// Multi-component
static float vec3[3] = {0, 0, 0};
ImGui::DragFloat3("Position", vec3, 0.1f);
ImGui::SliderFloat3("Color", vec3, 0.0f, 1.0f);
ImGui::InputFloat3("Coords", vec3);

Note

Ctrl+Click on any SliderFloat, SliderInt, DragFloat, or DragInt widget to convert it into a direct text input box. This lets users type exact values when precision matters. The behavior is automatic and requires no extra code.

Color Editing

static float col3[3] = {1.0f, 0.5f, 0.0f};
static float col4[4] = {1.0f, 0.5f, 0.0f, 1.0f};

ImGui::ColorEdit3("Color", col3);           // RGB
ImGui::ColorEdit4("Color+Alpha", col4);     // RGBA
ImGui::ColorPicker3("Pick Color", col3);    // Full picker widget
ImGui::ColorPicker4("Pick Color+A", col4);  // Full picker with alpha

// Color button (shows a color swatch, opens picker on click)
ImGui::ColorButton("Preview", ImVec4(col4[0], col4[1], col4[2], col4[3]));

std::string Support

#include "misc/cpp/imgui_stdlib.h"

std::string name = "Default";
ImGui::InputText("Name", &name);  // Automatically resizes the string

4.4 Layout and Positioning

Cursor and Content Region

// The two most important layout functions:
ImVec2 pos = ImGui::GetCursorScreenPos();     // Where the next widget will be drawn (screen coords)
ImVec2 avail = ImGui::GetContentRegionAvail(); // Remaining space in current region

Horizontal Layout

ImGui::Button("A"); ImGui::SameLine();
ImGui::Button("B"); ImGui::SameLine();
ImGui::Button("C");
// Result: [A] [B] [C] on one line

ImGui::SameLine(200);    // Position next item at x=200 within the window
ImGui::SameLine(0, 20);  // Default position, but with 20px spacing

Spacing and Separators

ImGui::NewLine();        // Empty line
ImGui::Spacing();        // Small vertical gap
ImGui::Dummy(ImVec2(0, 20));  // Explicit spacer of given size
ImGui::Separator();      // Horizontal line
ImGui::SeparatorText("Section");  // Line with centered text

Indentation

ImGui::Text("Root");
ImGui::Indent();
ImGui::Text("Indented");
ImGui::Indent();
ImGui::Text("More indented");
ImGui::Unindent(2 * ImGui::GetTreeNodeToLabelSpacing());  // Reset

Groups

Groups let you treat multiple widgets as a single item for layout purposes:

ImGui::BeginGroup();
ImGui::Text("Label:");
ImGui::Text("Value:");
ImGui::EndGroup();

ImGui::SameLine();

ImGui::BeginGroup();
ImGui::Text("Name");
ImGui::Text("42");
ImGui::EndGroup();

Item Width

// Set width for the next widget
ImGui::SetNextItemWidth(200);
ImGui::InputFloat("##val", &val);

// Push width for multiple widgets
ImGui::PushItemWidth(200);
ImGui::InputFloat("A", &a);
ImGui::InputFloat("B", &b);
ImGui::PopItemWidth();

// Negative width: relative to right edge
ImGui::PushItemWidth(-100);  // Leave 100px on the right for labels

Text Wrapping

ImGui::PushTextWrapPos(ImGui::GetCursorPos().x + 300); // Wrap at 300px from cursor
ImGui::TextWrapped("This text wraps within the specified width...");
ImGui::PopTextWrapPos();

// Wrap to window edge:
ImGui::PushTextWrapPos(0.0f);
ImGui::TextWrapped("Wraps to the window edge.");
ImGui::PopTextWrapPos();

4.5 Trees and Hierarchies

if (ImGui::TreeNode("Root Node"))
{
    ImGui::Text("Leaf content");
    if (ImGui::TreeNode("Child Node"))
    {
        ImGui::Text("Nested content");
        ImGui::TreePop();
    }
    ImGui::TreePop();  // Required for every TreeNode that returns true
}

TreeNodeEx with Flags

ImGuiTreeNodeFlags flags = ImGuiTreeNodeFlags_OpenOnArrow
                         | ImGuiTreeNodeFlags_OpenOnDoubleClick
                         | ImGuiTreeNodeFlags_SpanAvailWidth;

// Leaf node (no arrow, not expandable)
ImGuiTreeNodeFlags leaf_flags = flags | ImGuiTreeNodeFlags_Leaf | ImGuiTreeNodeFlags_NoTreePushOnOpen;

if (ImGui::TreeNodeEx("Parent", flags))
{
    ImGui::TreeNodeEx("Leaf Item", leaf_flags);
    ImGui::TreePop();
}

CollapsingHeader

Unlike TreeNode, CollapsingHeader does not require TreePop():

if (ImGui::CollapsingHeader("Settings"))
{
    ImGui::SliderFloat("Volume", &volume, 0.0f, 1.0f);
    ImGui::Checkbox("Mute", &mute);
}

// With close button:
static bool show_header = true;
if (ImGui::CollapsingHeader("Closeable", &show_header))
{
    ImGui::Text("Content");
}

Controlling Open State

ImGui::SetNextItemOpen(true, ImGuiCond_Once);  // Open by default
if (ImGui::TreeNode("Open by default"))
{
    // ...
    ImGui::TreePop();
}

4.6 Tables

The table widget is one of Dear ImGui's most powerful features, supporting sorting, reordering, column hiding, freezing, and more.

// Basic table
if (ImGui::BeginTable("my_table", 3, ImGuiTableFlags_Borders | ImGuiTableFlags_RowBg))
{
    // Setup columns (optional but recommended)
    ImGui::TableSetupColumn("Name");
    ImGui::TableSetupColumn("Type");
    ImGui::TableSetupColumn("Value");
    ImGui::TableHeadersRow();

    // Rows
    for (int row = 0; row < 5; row++)
    {
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0);
        ImGui::Text("Item %d", row);
        ImGui::TableSetColumnIndex(1);
        ImGui::Text("Type A");
        ImGui::TableSetColumnIndex(2);
        ImGui::Text("%.2f", row * 1.5f);
    }
    ImGui::EndTable();
}

Alternative row traversal using TableNextColumn():

if (ImGui::BeginTable("table2", 3))
{
    for (int row = 0; row < 5; row++)
    {
        ImGui::TableNextColumn(); ImGui::Text("Cell %d,0", row);
        ImGui::TableNextColumn(); ImGui::Text("Cell %d,1", row);
        ImGui::TableNextColumn(); ImGui::Text("Cell %d,2", row);
    }
    ImGui::EndTable();
}

Table Flags

Sorting

if (ImGui::BeginTable("sortable", 3, ImGuiTableFlags_Sortable))
{
    ImGui::TableSetupColumn("ID", ImGuiTableColumnFlags_DefaultSort);
    ImGui::TableSetupColumn("Name");
    ImGui::TableSetupColumn("Score");
    ImGui::TableHeadersRow();

    if (ImGuiTableSortSpecs* sort_specs = ImGui::TableGetSortSpecs())
    {
        if (sort_specs->SpecsDirty)
        {
            // Re-sort your data based on sort_specs->Specs[0].ColumnIndex
            // and sort_specs->Specs[0].SortDirection
            sort_specs->SpecsDirty = false;
        }
    }

    // ... render sorted rows ...
    ImGui::EndTable();
}

Freeze Rows/Columns

if (ImGui::BeginTable("frozen", 3, ImGuiTableFlags_ScrollX | ImGuiTableFlags_ScrollY,
                      ImVec2(0, 300)))
{
    ImGui::TableSetupScrollFreeze(1, 1);  // Freeze 1 column, 1 row
    ImGui::TableSetupColumn("Frozen Col");
    ImGui::TableSetupColumn("Col 2");
    ImGui::TableSetupColumn("Col 3");
    ImGui::TableHeadersRow();
    // ...
    ImGui::EndTable();
}

Warning

The legacy Columns() API is deprecated. Use the BeginTable()/EndTable() API instead. The table widget offers vastly superior features including sorting, column reordering, column hiding, scrolling, and freeze rows/columns. The old Columns() API is retained only for backward compatibility and will be removed in a future version.

4.7 Tab Bars

if (ImGui::BeginTabBar("Tabs"))
{
    if (ImGui::BeginTabItem("General"))
    {
        ImGui::Text("General settings");
        ImGui::EndTabItem();
    }
    if (ImGui::BeginTabItem("Graphics"))
    {
        ImGui::Text("Graphics settings");
        ImGui::EndTabItem();
    }
    if (ImGui::BeginTabItem("Audio"))
    {
        ImGui::Text("Audio settings");
        ImGui::EndTabItem();
    }
    ImGui::EndTabBar();
}

Closeable tabs:

static bool show_tab = true;
if (ImGui::BeginTabItem("Closeable", &show_tab))
{
    ImGui::Text("This tab can be closed");
    ImGui::EndTabItem();
}

Tab bar utilities:

ImGui::TabItemButton("+", ImGuiTabItemFlags_Trailing);  // Add-tab button
ImGui::SetTabItemClosed("Tab Name");  // Programmatically close

4.8 Menus

Window Menu Bar

ImGui::Begin("Editor", nullptr, ImGuiWindowFlags_MenuBar);
if (ImGui::BeginMenuBar())
{
    if (ImGui::BeginMenu("File"))
    {
        if (ImGui::MenuItem("New", "Ctrl+N"))  { /* action */ }
        if (ImGui::MenuItem("Open", "Ctrl+O")) { /* action */ }
        ImGui::Separator();
        if (ImGui::MenuItem("Quit", "Alt+F4")) { /* action */ }
        ImGui::EndMenu();
    }
    if (ImGui::BeginMenu("Edit"))
    {
        if (ImGui::MenuItem("Undo", "Ctrl+Z", false, has_undo)) { /* action */ }
        if (ImGui::MenuItem("Redo", "Ctrl+Y", false, has_redo)) { /* action */ }
        ImGui::EndMenu();
    }
    ImGui::EndMenuBar();
}
ImGui::End();

Main Menu Bar (top of screen)

if (ImGui::BeginMainMenuBar())
{
    if (ImGui::BeginMenu("File")) { /* ... */ ImGui::EndMenu(); }
    if (ImGui::BeginMenu("Edit")) { /* ... */ ImGui::EndMenu(); }
    ImGui::EndMainMenuBar();
}

Submenus and Toggle Items

if (ImGui::BeginMenu("View"))
{
    ImGui::MenuItem("Show Grid", nullptr, &show_grid);     // Toggle
    ImGui::MenuItem("Show FPS", nullptr, &show_fps);       // Toggle
    if (ImGui::BeginMenu("Layout"))                        // Submenu
    {
        ImGui::MenuItem("Horizontal");
        ImGui::MenuItem("Vertical");
        ImGui::EndMenu();
    }
    ImGui::EndMenu();
}

4.9 Popups and Modals

Basic Popup

if (ImGui::Button("Open Popup"))
    ImGui::OpenPopup("my_popup");

if (ImGui::BeginPopup("my_popup"))
{
    ImGui::Text("Popup content");
    if (ImGui::Button("Close"))
        ImGui::CloseCurrentPopup();
    ImGui::EndPopup();
}

Modal Dialog

if (ImGui::Button("Delete"))
    ImGui::OpenPopup("Confirm Delete");

if (ImGui::BeginPopupModal("Confirm Delete", nullptr, ImGuiWindowFlags_AlwaysAutoResize))
{
    ImGui::Text("Are you sure you want to delete this item?");
    ImGui::Separator();
    if (ImGui::Button("OK", ImVec2(120, 0)))
    {
        // Perform delete
        ImGui::CloseCurrentPopup();
    }
    ImGui::SameLine();
    if (ImGui::Button("Cancel", ImVec2(120, 0)))
    {
        ImGui::CloseCurrentPopup();
    }
    ImGui::EndPopup();
}

Context Menus

// Context menu on the last item
ImGui::Text("Right-click me");
if (ImGui::BeginPopupContextItem("item_context"))
{
    if (ImGui::MenuItem("Copy"))  { /* ... */ }
    if (ImGui::MenuItem("Paste")) { /* ... */ }
    ImGui::EndPopup();
}

// Context menu on window background
if (ImGui::BeginPopupContextWindow())
{
    if (ImGui::MenuItem("Add Item"))  { /* ... */ }
    ImGui::EndPopup();
}

// Context menu on void (no window hovered)
if (ImGui::BeginPopupContextVoid())
{
    if (ImGui::MenuItem("Settings")) { /* ... */ }
    ImGui::EndPopup();
}

Warning

In Dear ImGui 1.92.6, the default popup trigger changed to right-click (ImGuiPopupFlags_MouseButtonRight). If you relied on left-click to open popups via OpenPopupOnItemClick(), you must now explicitly pass ImGuiPopupFlags_MouseButtonLeft. The BeginPopupContextItem/Window/Void helpers already default to right-click and are unaffected.

4.10 Tooltips

// Simple tooltip on hover
ImGui::Button("Hover me");
if (ImGui::IsItemHovered())
    ImGui::SetTooltip("This is a tooltip");

// Rich tooltip with multiple widgets
ImGui::Button("Rich tooltip");
if (ImGui::BeginItemTooltip())
{
    ImGui::Text("Detailed information:");
    ImGui::BulletText("Point 1");
    ImGui::BulletText("Point 2");
    ImGui::ProgressBar(0.7f);
    ImGui::EndTooltip();
}

// Shorthand for text-only item tooltip
ImGui::Button("Short");
ImGui::SetItemTooltip("Tooltip text for the preceding item");

4.11 Images

Dear ImGui can render application textures via Image() and ImageButton(). You must create the texture using your graphics API and pass its handle.

// ImTextureRef wraps a texture identifier + size information (new in 1.92)
ImTextureRef tex = ...; // Backend-specific: e.g., (ImTextureID)(intptr_t)opengl_texture_id

ImGui::Image(tex, ImVec2(256, 256));                        // Display at 256x256
ImGui::Image(tex, ImVec2(128, 128), ImVec2(0,0), ImVec2(1,1)); // With UV coords

// Image with background color (for transparent images)
ImGui::ImageWithBg(tex, ImVec2(256, 256), ImVec2(0,0), ImVec2(1,1),
                   ImVec4(0,0,0,1));  // Black background

// Image button
if (ImGui::ImageButton("btn_id", tex, ImVec2(32, 32)))
{
    // Clicked
}

The exact type of ImTextureID depends on your renderer backend:

4.12 Selectables and Multi-Select

Selectable

static int selected = -1;
const char* items[] = { "Apple", "Banana", "Cherry", "Date" };
for (int i = 0; i < 4; i++)
{
    if (ImGui::Selectable(items[i], selected == i))
        selected = i;
}

Multi-Select (Beta)

static ImGuiSelectionBasicStorage selection;
ImGuiMultiSelectFlags ms_flags = ImGuiMultiSelectFlags_ClearOnEscape;
ImGuiMultiSelectIO* ms_io = ImGui::BeginMultiSelect(ms_flags, selection.Size, item_count);
selection.ApplyRequests(ms_io);

for (int i = 0; i < item_count; i++)
{
    ImGui::SetNextItemSelectionUserData(i);
    bool is_selected = selection.Contains((ImGuiID)i);
    ImGui::Selectable(items[i], is_selected);
}

ms_io = ImGui::EndMultiSelect();
selection.ApplyRequests(ms_io);

4.13 List Boxes and Combo Boxes

Combo Box

static int current_item = 0;
const char* items[] = { "Option A", "Option B", "Option C" };

// Simple version
ImGui::Combo("Combo", &current_item, items, IM_ARRAYSIZE(items));

// Begin/End version (custom content)
if (ImGui::BeginCombo("Custom Combo", items[current_item]))
{
    for (int i = 0; i < IM_ARRAYSIZE(items); i++)
    {
        bool is_selected = (current_item == i);
        if (ImGui::Selectable(items[i], is_selected))
            current_item = i;
        if (is_selected)
            ImGui::SetItemDefaultFocus();
    }
    ImGui::EndCombo();
}

List Box

static int current = 0;
if (ImGui::BeginListBox("Items", ImVec2(-FLT_MIN, 5 * ImGui::GetTextLineHeightWithSpacing())))
{
    for (int i = 0; i < item_count; i++)
    {
        bool is_selected = (current == i);
        if (ImGui::Selectable(items[i], is_selected))
            current = i;
        if (is_selected)
            ImGui::SetItemDefaultFocus();
    }
    ImGui::EndListBox();
}

4.14 Data Plotting

static float values[100];
// ... fill values ...

ImGui::PlotLines("Signal", values, IM_ARRAYSIZE(values), 0, "overlay text",
                 -1.0f, 1.0f, ImVec2(0, 80));

ImGui::PlotHistogram("Distribution", values, IM_ARRAYSIZE(values), 0, nullptr,
                     0.0f, 1.0f, ImVec2(0, 80));

For advanced plotting (axes, legends, multiple series, heatmaps), use the companion library ImPlot.

4.15 Drag and Drop

// Source: the widget you drag FROM
if (ImGui::Button("Drag me"))
{
}
if (ImGui::BeginDragDropSource())
{
    int payload_data = 42;
    ImGui::SetDragDropPayload("MY_TYPE", &payload_data, sizeof(int));
    ImGui::Text("Dragging value: %d", payload_data);  // Preview tooltip
    ImGui::EndDragDropSource();
}

// Target: the region you drop INTO
ImGui::Button("Drop here");
if (ImGui::BeginDragDropTarget())
{
    if (const ImGuiPayload* payload = ImGui::AcceptDragDropPayload("MY_TYPE"))
    {
        int received = *(const int*)payload->Data;
        // Handle the drop
    }
    ImGui::EndDragDropTarget();
}

The payload type string ("MY_TYPE") acts as a type filter — only matching payloads are accepted.

4.16 Keyboard and Gamepad Navigation

Enabling Navigation

ImGuiIO& io = ImGui::GetIO();
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;  // Arrow keys, Tab, Enter, Escape
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;    // D-pad, face buttons, triggers

Keyboard Shortcuts

// Global shortcut (works when Dear ImGui has focus)
if (ImGui::Shortcut(ImGuiMod_Ctrl | ImGuiKey_S))
{
    // Save
}

// Shortcut bound to a menu item
if (ImGui::MenuItem("Save", "Ctrl+S"))
{
    // Save action
}

// Shortcut assigned to a specific widget
ImGui::SetNextItemShortcut(ImGuiMod_Ctrl | ImGuiKey_Z);
if (ImGui::Button("Undo"))
{
    // Undo action — also triggered by Ctrl+Z
}

Modifier keys: ImGuiMod_Ctrl, ImGuiMod_Shift, ImGuiMod_Alt, ImGuiMod_Super.

4.17 Fonts

Default Fonts

ImGuiIO& io = ImGui::GetIO();

// Vector-based default font (scalable, new approach)
io.Fonts->AddFontDefaultVector();

// Bitmap-based default font (ProggyClean 13px)
io.Fonts->AddFontDefaultBitmap();

Loading Custom Fonts

// From file
ImFont* font = io.Fonts->AddFontFromFileTTF("fonts/Roboto-Regular.ttf", 16.0f);

// From memory (e.g., embedded font data)
ImFont* font2 = io.Fonts->AddFontFromMemoryTTF(font_data, font_data_size, 16.0f);

// With specific glyph ranges
ImFont* font_jp = io.Fonts->AddFontFromFileTTF("fonts/NotoSansJP.ttf", 18.0f,
    nullptr, io.Fonts->GetGlyphRangesJapanese());

Dynamic Font Sizing (New in 1.92)

ImFont* font = io.Fonts->AddFontFromFileTTF("Roboto.ttf", 0);  // Base size 0 = vector font

// In your frame loop:
ImGui::PushFont(font, 24.0f);  // Render at 24px
ImGui::Text("Large text");
ImGui::PopFont();

ImGui::PushFont(font, 12.0f);  // Render at 12px
ImGui::Text("Small text");
ImGui::PopFont();

Font Merging (Icon Fonts)

// Load primary font
io.Fonts->AddFontFromFileTTF("Roboto.ttf", 16.0f);

// Merge icon font into primary font
ImFontConfig config;
config.MergeMode = true;
config.GlyphMinAdvanceX = 16.0f;
static const ImWchar icon_ranges[] = { 0xf000, 0xf3ff, 0 };
io.Fonts->AddFontFromFileTTF("FontAwesome.ttf", 16.0f, &config, icon_ranges);

Available Glyph Ranges

4.18 Drawing API (ImDrawList)

The low-level drawing API lets you render arbitrary shapes. Every window has a draw list, and there are global background and foreground draw lists.

ImDrawList* draw_list = ImGui::GetWindowDrawList();

ImVec2 p = ImGui::GetCursorScreenPos();  // Use as origin
ImU32 col = IM_COL32(255, 255, 0, 255);  // Yellow, fully opaque

// Lines
draw_list->AddLine(ImVec2(p.x, p.y), ImVec2(p.x + 100, p.y + 50), col, 2.0f);

// Rectangles
draw_list->AddRect(ImVec2(p.x, p.y), ImVec2(p.x + 80, p.y + 40), col);
draw_list->AddRectFilled(ImVec2(p.x, p.y), ImVec2(p.x + 80, p.y + 40), col);
draw_list->AddRectFilled(ImVec2(p.x, p.y), ImVec2(p.x + 80, p.y + 40), col, 10.0f);  // Rounded

// Circles
draw_list->AddCircle(ImVec2(p.x + 40, p.y + 40), 30.0f, col, 0, 2.0f);
draw_list->AddCircleFilled(ImVec2(p.x + 40, p.y + 40), 30.0f, col);

// Triangles
draw_list->AddTriangle(ImVec2(p.x, p.y + 60), ImVec2(p.x + 60, p.y + 60),
                       ImVec2(p.x + 30, p.y), col, 2.0f);
draw_list->AddTriangleFilled(ImVec2(p.x, p.y + 60), ImVec2(p.x + 60, p.y + 60),
                             ImVec2(p.x + 30, p.y), col);

// Text
draw_list->AddText(ImVec2(p.x, p.y), col, "Hello");

// Bezier curves
draw_list->AddBezierCubic(ImVec2(p.x, p.y), ImVec2(p.x+50, p.y-50),
                          ImVec2(p.x+100, p.y+50), ImVec2(p.x+150, p.y), col, 2.0f);
draw_list->AddBezierQuadratic(ImVec2(p.x, p.y), ImVec2(p.x+75, p.y-50),
                              ImVec2(p.x+150, p.y), col, 2.0f);

// N-gons (regular polygons)
draw_list->AddNgon(ImVec2(p.x+40, p.y+40), 30.0f, col, 6, 2.0f);       // Hexagon outline
draw_list->AddNgonFilled(ImVec2(p.x+40, p.y+40), 30.0f, col, 6);       // Filled hexagon

// Ellipses
draw_list->AddEllipse(ImVec2(p.x+50, p.y+30), ImVec2(50, 30), col, 0.0f, 0, 2.0f);
draw_list->AddEllipseFilled(ImVec2(p.x+50, p.y+30), ImVec2(50, 30), col);

// Images
draw_list->AddImage(tex_id, ImVec2(p.x, p.y), ImVec2(p.x + 100, p.y + 100));

// Polyline
ImVec2 points[] = { {p.x,p.y}, {p.x+30,p.y-20}, {p.x+60,p.y+10}, {p.x+90,p.y-5} };
draw_list->AddPolyline(points, 4, col, ImDrawFlags_None, 2.0f);

// Convex filled polygon
draw_list->AddConvexPolyFilled(points, 4, col);

Draw List Layers

ImDrawList* bg = ImGui::GetBackgroundDrawList();   // Behind all windows
ImDrawList* fg = ImGui::GetForegroundDrawList();   // In front of all windows
ImDrawList* wl = ImGui::GetWindowDrawList();       // Current window's draw list

4.19 ID System

Dear ImGui uses IDs to track widget state (open/closed, active, edited, scroll position). Understanding IDs is essential to avoid bugs.

How IDs Work

Every widget needs a unique ID within its parent window/tree scope. By default, the ID is derived from the label string:

ImGui::Button("OK");    // ID = hash of "OK" in current scope
ImGui::Button("OK");    // BUG: duplicate ID — second button won't work

Solving ID Conflicts

Method 1: ## separator — text after ## is part of the ID but not displayed:

ImGui::Button("OK##save");    // Displays "OK", ID includes "save"
ImGui::Button("OK##cancel");  // Displays "OK", different ID

Method 2: ### separator — only text after ### forms the ID:

// Useful when label changes but you want stable widget state
char buf[64];
sprintf(buf, "Frame %d###AnimatingTitle", frame_count);
ImGui::Begin(buf);  // Window ID stays the same even as title changes
ImGui::End();

Method 3: PushID()/PopID() — create a unique ID scope:

for (int i = 0; i < items.size(); i++)
{
    ImGui::PushID(i);          // Push integer as ID scope
    ImGui::Button("Delete");   // "Delete" is now unique within this scope
    ImGui::SameLine();
    ImGui::Button("Edit");
    ImGui::PopID();
}

PushID() accepts int, const char*, const void*, or a string range.

4.20 Disabling Widgets

bool can_edit = user_has_permission();
ImGui::BeginDisabled(!can_edit);
ImGui::InputText("Name", buf, sizeof(buf));
ImGui::Button("Save");
ImGui::EndDisabled();
// When disabled: widgets are grayed out and do not respond to input

4.21 Clipping

ImGui::PushClipRect(ImVec2(100, 100), ImVec2(300, 300), true);
// Only content within the rectangle is visible
ImGui::Text("This text may be clipped");
ImGui::PopClipRect();

4.22 Logging and Capture

Dear ImGui can capture UI output as text — useful for copying widget content to the clipboard or a file.

ImGui::LogToClipboard();   // Start capturing to clipboard
ImGui::LogToFile(-1, "output.txt");  // Capture to file
ImGui::LogToTTY();         // Capture to stdout

// All subsequent widget output is captured as text...

ImGui::LogFinish();        // Stop capturing

// Convenience: show buttons for all log targets
ImGui::LogButtons();

4.23 Settings Persistence

Dear ImGui automatically saves and loads window positions, sizes, collapsed states, and table column settings to an .ini file.

// Default behavior: saves to "imgui.ini" on exit
ImGuiIO& io = ImGui::GetIO();
io.IniFilename = "my_app_layout.ini";  // Custom filename
io.IniFilename = nullptr;              // Disable auto-save/load

// Manual control
ImGui::LoadIniSettingsFromDisk("layout.ini");
ImGui::SaveIniSettingsToDisk("layout.ini");

// In-memory (useful for custom storage)
const char* ini_data = ImGui::SaveIniSettingsToMemory();
ImGui::LoadIniSettingsFromMemory(ini_data);

// Detect when settings need saving (useful for custom persistence)
if (io.WantSaveIniSettings)
{
    const char* data = ImGui::SaveIniSettingsToMemory();
    // Save 'data' to your custom storage
    io.WantSaveIniSettings = false;
}

4.24 Item Queries

After any widget call, you can query its state:

ImGui::InputFloat("Value", &val);

// Hover and focus
bool hovered   = ImGui::IsItemHovered();          // Mouse is over it
bool focused   = ImGui::IsItemFocused();           // Has keyboard focus
bool active    = ImGui::IsItemActive();            // Being interacted with (held, editing)

// Interaction events
bool clicked   = ImGui::IsItemClicked();           // Was clicked this frame
bool edited    = ImGui::IsItemEdited();            // Value was changed this frame
bool activated = ImGui::IsItemActivated();         // Became active this frame
bool deacted   = ImGui::IsItemDeactivated();       // Stopped being active this frame
bool deact_edit = ImGui::IsItemDeactivatedAfterEdit(); // Stopped being active AND value changed

// Useful for commit-on-deactivate patterns (undo/redo):
ImGui::DragFloat("Position", &pos);
if (ImGui::IsItemActivated())
    undo_stack.push(pos);           // Save old value when editing starts
if (ImGui::IsItemDeactivatedAfterEdit())
    redo_stack.clear();             // Commit when editing ends with a change

Input Dispatch

// Check if Dear ImGui wants to capture input (critical for game/app integration):
ImGuiIO& io = ImGui::GetIO();

if (io.WantCaptureMouse)
{
    // Dear ImGui is using the mouse — do NOT pass mouse events to your game
}
if (io.WantCaptureKeyboard)
{
    // Dear ImGui is using the keyboard — do NOT pass key events to your game
}

5. Common Tasks

5.1 Build a Property Editor

Goal: Display and edit properties of a selected object in a two-column layout.

Steps:

void DrawPropertyEditor(GameObject* obj)
{
    if (!obj) return;

    ImGui::Text("Editing: %s", obj->name.c_str());
    ImGui::Separator();

    if (ImGui::BeginTable("properties", 2, ImGuiTableFlags_Resizable | ImGuiTableFlags_BordersInnerV))
    {
        ImGui::TableSetupColumn("Property", ImGuiTableColumnFlags_WidthFixed, 150.0f);
        ImGui::TableSetupColumn("Value", ImGuiTableColumnFlags_WidthStretch);

        // Transform section
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0); ImGui::Text("Position");
        ImGui::TableSetColumnIndex(1);
        ImGui::SetNextItemWidth(-FLT_MIN);
        ImGui::DragFloat3("##pos", &obj->position.x, 0.1f);

        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0); ImGui::Text("Rotation");
        ImGui::TableSetColumnIndex(1);
        ImGui::SetNextItemWidth(-FLT_MIN);
        ImGui::DragFloat3("##rot", &obj->rotation.x, 1.0f);

        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0); ImGui::Text("Scale");
        ImGui::TableSetColumnIndex(1);
        ImGui::SetNextItemWidth(-FLT_MIN);
        ImGui::DragFloat3("##scale", &obj->scale.x, 0.01f, 0.01f, 100.0f);

        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0); ImGui::Text("Visible");
        ImGui::TableSetColumnIndex(1);
        ImGui::Checkbox("##visible", &obj->visible);

        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0); ImGui::Text("Color");
        ImGui::TableSetColumnIndex(1);
        ImGui::SetNextItemWidth(-FLT_MIN);
        ImGui::ColorEdit4("##color", &obj->color.x);

        ImGui::EndTable();
    }
}

Verify: Run the property editor, change values, confirm they apply to the object in real time.

If it fails: Check that PushID/PopID scopes are correct if multiple objects share property names. The ## prefix on labels avoids duplicate IDs within the table.

5.2 Create a Dockable Tool Window with Menu Bar

Goal: A standalone tool window with its own menu bar.

static bool show_tool = true;

void DrawToolWindow()
{
    if (!show_tool) return;

    ImGui::Begin("Asset Browser", &show_tool, ImGuiWindowFlags_MenuBar);

    if (ImGui::BeginMenuBar())
    {
        if (ImGui::BeginMenu("View"))
        {
            static bool show_thumbnails = true;
            ImGui::MenuItem("Thumbnails", nullptr, &show_thumbnails);
            static bool show_details = false;
            ImGui::MenuItem("Details", nullptr, &show_details);
            ImGui::EndMenu();
        }
        if (ImGui::BeginMenu("Sort"))
        {
            if (ImGui::MenuItem("By Name"))  { /* sort */ }
            if (ImGui::MenuItem("By Date"))  { /* sort */ }
            if (ImGui::MenuItem("By Size"))  { /* sort */ }
            ImGui::EndMenu();
        }
        ImGui::EndMenuBar();
    }

    // Content
    static char filter[128] = "";
    ImGui::InputTextWithHint("##filter", "Filter assets...", filter, sizeof(filter));

    ImGui::BeginChild("AssetList", ImVec2(0, 0), ImGuiChildFlags_Borders);
    for (int i = 0; i < asset_count; i++)
    {
        if (filter[0] && !strstr(assets[i].name, filter))
            continue;
        ImGui::Selectable(assets[i].name);
    }
    ImGui::EndChild();

    ImGui::End();
}

5.3 Add a File Browser Dialog

Goal: Let the user pick a file path using Dear ImGui widgets.

struct FileBrowser
{
    char current_path[512] = ".";
    char selected_file[256] = "";
    bool is_open = false;

    void Draw()
    {
        if (!is_open) return;
        ImGui::SetNextWindowSize(ImVec2(500, 400), ImGuiCond_FirstUseEver);
        if (ImGui::BeginPopupModal("Select File", &is_open))
        {
            ImGui::InputText("Path", current_path, sizeof(current_path));
            ImGui::Separator();

            ImGui::BeginChild("FileList", ImVec2(0, -ImGui::GetFrameHeightWithSpacing()));
            // List directory contents here using your OS API
            // For each entry:
            //   if (ImGui::Selectable(entry_name, is_selected))
            //       strncpy(selected_file, entry_name, sizeof(selected_file));
            ImGui::EndChild();

            if (ImGui::Button("Open", ImVec2(120, 0)))
            {
                // Process selected_file
                ImGui::CloseCurrentPopup();
            }
            ImGui::SameLine();
            if (ImGui::Button("Cancel", ImVec2(120, 0)))
            {
                selected_file[0] = '\0';
                ImGui::CloseCurrentPopup();
            }
            ImGui::EndPopup();
        }
    }

    void Open() { is_open = true; ImGui::OpenPopup("Select File"); }
};

5.4 Implement Undo/Redo with IsItemDeactivatedAfterEdit

Goal: Track value changes for undo/redo with proper commit semantics.

struct UndoEntry { float old_value; float new_value; };
std::vector<UndoEntry> undo_stack;
int undo_index = -1;

static float value = 0.0f;
static float value_before_edit = 0.0f;

ImGui::DragFloat("Value", &value, 0.01f);

if (ImGui::IsItemActivated())
{
    value_before_edit = value;  // Snapshot before editing begins
}
if (ImGui::IsItemDeactivatedAfterEdit())
{
    // Editing ended and value changed — commit to undo stack
    undo_stack.resize(undo_index + 1);  // Truncate any redo entries
    undo_stack.push_back({ value_before_edit, value });
    undo_index = (int)undo_stack.size() - 1;
}

// Undo
if (ImGui::Shortcut(ImGuiMod_Ctrl | ImGuiKey_Z) && undo_index >= 0)
{
    value = undo_stack[undo_index].old_value;
    undo_index--;
}
// Redo
if (ImGui::Shortcut(ImGuiMod_Ctrl | ImGuiKey_Y) && undo_index < (int)undo_stack.size() - 1)
{
    undo_index++;
    value = undo_stack[undo_index].new_value;
}