ofxImGuiClay

Why Clay inside ImGui?

ImGui is brilliant for buttons, sliders, docking, and debug panels — but it does not really do layout. You describe widgets; you still hand-place regions (SetNextWindowSize, columns, manual GetContentRegionAvail() math) whenever a window is resized, docked, or split. That gets old fast when you want panels that reflow like a small design tool or IDE.

Clay is the opposite: a layout-first library (flex, grow, padding, nested boxes). You describe structure (“this column grows, this strip is fixed height”), and Clay returns a flat list of rectangles and text for a given size.

A good marriage, not a merger: ImGui throws the party (widgets, input, docking); Clay draws the seating chart (flex, grow, padding). Neither tries to do the other’s job — they share one address: the ImDrawList.

ImClay (vendored here) is the wedding planner who actually shows up: Clay’s layout becomes ImGui draw commands, so panels live inside normal ImGui windows — same fonts, docking, and draw pass as everything else. Sliders in one dock tab, Clay-driven panels in another; one toolkit, two specialties.

Where we use it:

• Dockable tool shells — panels that still make sense after the user rearranges the furniture (example-dock).
• Custom panel interiors — Clay for layout and paint; ImGui for the control strip and menus.
• Resize-safe creative UIs — plotter/kit apps where the window shape changes but the layout should not file for divorce.

Built on ofxImGui. Upstream renderer: ImClay.

Requirements

• ofxImGui (docking branch)
• C++20 (ADDON_CFLAGS += -std=gnu++20 in addon_config.mk)
• openFrameworks with addon -std=* forwarded into CXXFLAGS (see config.project.mk patch in OF tree)

Example

cd addons/ofxImGuiClay/example-dock
make

Usage

Add ofxImGuiClay and ofxImGui to addons.make. The addon adds include paths for include/ and libs/clay/, so you use one umbrella header (same idea as ofxImGui.h):

#include "ofxImGui.h"
include "ofxImGuiClay.h"   // ImClay/ImClay.h + clay.h

ofxImGui::Gui gui;
ImClay::Context clay {};
ImClay::FontSlot font { nullptr, 16.f };

// setup
gui.setup(nullptr, true, ImGuiConfigFlags_DockingEnable);
ImClay::Init(clay, w, h);
ImClay::SetMeasureFonts(clay, &font, 1);

// each frame, inside gui.begin()
ImClay::SetLayoutDimensions(clay, w, h);
ImClay::BeginLayout(clay);
// CLAY(...) { ... }
Clay_RenderCommandArray cmds = ImClay::EndLayout(clay, ImGui::GetIO().DeltaTime);
ImClay::Render(cmds, ImGui::GetWindowDrawList(), &font, 1, ImGui::GetCursorScreenPos());

After ImGui::NewFrame(), refresh font.font from io.Fonts->Fonts[0] if you scale UI or rebuild the font atlas.

Licence

MIT (ImClay). Clay and Dear ImGui use their own licences.