> For the complete documentation index, see [llms.txt](https://wiki.redmodding.org/scripting-cyberpunk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.redmodding.org/scripting-cyberpunk/cyber-engine-tweaks/cet-functions/ui-examples.md).

# ImGui

This page contains examples for creating UI for your mod using the built-in ImGui library.

Everything you need to know about Dear ImGui can be found [here](https://github.com/yamashi/CyberEngineTweaks/blob/master/src/sol_imgui/README.md) and [here](https://github.com/ocornut/imgui/blob/master/imgui_demo.cpp).

{% hint style="success" %}
You can also take a look at [FellowImGui](https://fellowimgui.dev/). It is a free online tool to create ImGui layouts with an easy to use interface. It also generates Lua code for you. Feel free to come on this Discord [channel](https://discord.com/channels/717692382849663036/1267881804732432527/1267881804732432527) if you have issues or feedback to share.
{% endhint %}

{% hint style="warning" %}
Any ImGui code needs to be run from inside the [onDraw](/scripting-cyberpunk/cyber-engine-tweaks/cet-functions/events/ondraw.md) callback.
{% endhint %}

## Basic Window

```lua
ImGui.SetNextWindowPos(100, 500, ImGuiCond.FirstUseEver) -- set window position x, y
ImGui.SetNextWindowSize(300, 600, ImGuiCond.Appearing) -- set window size w, h

if ImGui.Begin("Unique Window Name") then
    ImGui.Text("Hello World")
    -- more window contents here
end
ImGui.End()
```

## Modal/Popup Window

```lua
if ImGui.Button("Pop Button", 120, 0) then
      ImGui.OpenPopup("Delete?")
end

if ImGui.BeginPopupModal("Delete?", true, ImGuiWindowFlags.AlwaysAutoResize) then
    ImGui.Text("This is a popup")
    
    if ImGui.Button("Close") then ImGui.CloseCurrentPopup() end
    ImGui.EndPopup()
end
```

## Combo Box with Selectables

<pre class="language-lua"><code class="lang-lua">local DropdownOptions = {"1", "2", "3", "4", "5"}
local DropdownSelected = "1"

if ImGui.BeginCombo("##My Combo Box", DropdownSelected) then -- Remove the ## if you'd like for the title to display above combo box

    for _, option in ipairs(DropdownOptions) do

        if ImGui.Selectable(option, (option == DropdownSelected)) then
            DropdownSelected = option
            ImGui.SetItemDefaultFocus()
        end

    end

<strong>    ImGui.EndCombo()
</strong>end
</code></pre>

## Checkbox

```lua
MyMod.myValue = ImGui.Checkbox("Check me", MyMod.myValue)
```

## Button

```lua
if ImGui.Button("Click Me!", 100, 20) then -- Label, width, height - Use -1 as width for button to span available horizontal space
    -- do stuff here when button is clicked
end
```

```lua
local pressed

registerForEvent("onUpdate", function()
    if pressed then
        print("You pressed me!")
    end
end)

registerForEvent("onDraw", function()
    pressed = ImGui.Button("Click me I'm a Sexy Button", 250, 25)
end)
```

## Tooltip

Default tooltip on a button.

```lua
local pressed = ImGui.Button("button text")
if ImGui.IsItemHovered() then
  ImGui.SetTooltip("tooltip text")
else
  ImGui.SetTooltip(nil)
end
```

To customize the tooltip window use `BeginTooltip` and `EndTooltip`.

```lua
local pressed = ImGui.Button("button text")
if ImGui.IsItemHovered() then
  ImGui.BeginTooltip()
  ImGui.PushTextWrapPos(50)
  ImGui.TextWrapped("tooltip text")
  ImGui.EndTooltip()
else
  ImGui.SetTooltip(nil)
end
```

## Multi-column layout

Creating a multi-column layout is a pain in the ass, but you can go about it like this:

```lua
ImGui.BeginChild("Column 1", 300, 400) -- this will not display a label
    ImGui.Text('Column 1')
ImGui.EndChild()

ImGui.BeginChild("Column 2", 300, 400) -- this will not display a label
    ImGui.Text('Column 2')
ImGui.EndChild()
```

You can probably use dynamic dimensions somehow. If you find out, please update this guide.