Setting up Dear ImGui with SDL and CMake

In this blog post, we’ll walk through setting up a basic template for Dear ImGui with SDL as the backend using CMake. This setup will provide a solid foundation for building graphical applications with an intuitive user interface.

---

📁 Project Structure

Before diving into the code, let’s organize our project structure.

1️⃣ Create the Project Directory

First, create a new directory for your project and navigate into it:

mkdir dear-imgui-sdl-cmake
cd dear-imgui-sdl-cmake

2️⃣ Create Required Directories

Next, create directories for the source files, build artifacts, and third-party dependencies:

mkdir build src vendors

3️⃣ Create the Root CMakeLists.txt File

Since CMake requires a CMakeLists.txt file at the root of the project, create it:

touch CMakeLists.txt

4️⃣ Organize Vendor Libraries

To keep external libraries organized, create separate directories for SDL and Dear ImGui inside vendors:

cd vendors
mkdir imgui sdl

Then, create CMakeLists.txt files for both libraries:

touch imgui/CMakeLists.txt sdl/CMakeLists.txt

🛠 Configuring CMake

🔹 Root CMakeLists.txt File

cmake_minimum_required(VERSION 3.15)
project(DearImGuiSDL)

add_subdirectory(vendors)
add_subdirectory(src)

🎮 Writing the Main Application Code Let’s create a basic SDL application that integrates Dear ImGui.

#include "imgui.h"
#include "imgui_impl_sdl3.h"
#include "imgui_impl_sdlrenderer3.h"
#include <SDL3/SDL.h>
#include <stdio.h>

int main(int, char**) {
    if (!SDL_Init(SDL_INIT_VIDEO | SDL_INIT_GAMEPAD)) {
        printf("Error: SDL_Init(): %s\n", SDL_GetError());
        return -1;
    }

    SDL_Window* window = SDL_CreateWindow("Dear ImGui + SDL3 Example", 1280, 720, SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE);
    if (!window) {
        printf("Error: SDL_CreateWindow(): %s\n", SDL_GetError());
        return -1;
    }

    SDL_Renderer* renderer = SDL_CreateRenderer(window, nullptr);
    SDL_SetRenderVSync(renderer, 1);

    if (!renderer) {
        SDL_Log("Error: SDL_CreateRenderer(): %s\n", SDL_GetError());
        return -1;
    }

    SDL_ShowWindow(window);

    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
    io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;

    ImGui_ImplSDL3_InitForSDLRenderer(window, renderer);
    ImGui_ImplSDLRenderer3_Init(renderer);

    bool done = false;
    while (!done) {
        SDL_Event event;
        while (SDL_PollEvent(&event)) {
            ImGui_ImplSDL3_ProcessEvent(&event);
            if (event.type == SDL_EVENT_QUIT)
                done = true;
        }

        ImGui_ImplSDLRenderer3_NewFrame();
        ImGui_ImplSDL3_NewFrame();
        ImGui::NewFrame();

        ImGui::Begin("Hello, world!");
        ImGui::Text("Welcome to Dear ImGui with SDL3!");
        ImGui::End();

        ImGui::Render();
        SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
        SDL_RenderClear(renderer);
        ImGui_ImplSDLRenderer3_RenderDrawData(ImGui::GetDrawData(), renderer);
        SDL_RenderPresent(renderer);
    }

    ImGui_ImplSDLRenderer3_Shutdown();
    ImGui_ImplSDL3_Shutdown();
    ImGui::DestroyContext();

    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();

    return 0;
}

🔄 Fetching Dependencies with CMake Instead of manually downloading SDL, we’ll use CMake’s FetchContent module.

Fetch and build SDL3 from its official repository:

include(FetchContent)

FetchContent_Declare(
    SDL3
    GIT_REPOSITORY https://github.com/libsdl-org/SDL.git
    GIT_TAG        release-3.2.0
)

FetchContent_MakeAvailable(SDL3)

Fetch and build Dear-ImGui

include(FetchContent)

FetchContent_Declare(
  imgui
  GIT_REPOSITORY https://github.com/ocornut/imgui.git
  GIT_TAG        docking
  )

FetchContent_MakeAvailable(imgui)

add_library(imgui)

target_include_directories(imgui
    PUBLIC
    ${imgui_SOURCE_DIR}
    ${imgui_SOURCE_DIR}/backends
)

target_sources(
    imgui
    PUBLIC
    ${imgui_SOURCE_DIR}/imgui.cpp
    ${imgui_SOURCE_DIR}/imgui_demo.cpp
    ${imgui_SOURCE_DIR}/imgui_draw.cpp
    ${imgui_SOURCE_DIR}/imgui_tables.cpp
    ${imgui_SOURCE_DIR}/imgui_widgets.cpp
    ${imgui_SOURCE_DIR}/backends/imgui_impl_sdl3.cpp
    ${imgui_SOURCE_DIR}/backends/imgui_impl_sdlrenderer3.cpp

    )

target_link_libraries(imgui PUBLIC SDL3::SDL3)

Setting up the executable

set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin)

add_executable(myapp main.cpp)
target_link_libraries(myapp
    PRIVATE
    SDL3::SDL3
    imgui
)

Building

1️⃣ Building the Project

Now that we have everything set up, let’s compile the project.

mkdir -p build
cd build
cmake ..

2️⃣ Compile the Project

Run the following command inside the build directory:

make

3️⃣ Run the Executable

Once the build is successful, run the application:

./bin/myapp

📌 Summary
✅ We created a project structure for Dear ImGui with SDL3.
✅ We configured CMake to handle dependencies.
✅ We wrote a basic SDL + Dear ImGui application.
✅ We successfully built and ran the project.