api-reference.md

imgui-web API Reference

Core lifecycle

• ImGui.mount(options) mounts the UI root inside an isolated Shadow DOM host.
• ImGui.frame(fn) registers and renders the main frame callback.
• ImGui.invalidate() schedules a render of the registered frame callback.
• ImGui.begin(name, options?, fn?) begins a window. When fn is provided, end() is called automatically.
• ImGui.end() ends the current window context (needed only when begin is used without callback form).

begin options

• x, y, width, height: initial or updated window geometry.
• collapsed: collapsed/expanded state.
• open: can be:
  • boolean for direct control.
  • { value: boolean } model for two-way binding with titlebar close (x) button.

Layout primitives

• text(value)
• separator()
• sameLine()
• columns(count)
• spacing(px?)
• indent(px?)
• unindent(px?)

Controls and widgets

• button(label): boolean
• checkbox(label, model): boolean
• radio(label, model, value): boolean
• inputText(label, model, opts?): string
• sliderFloat(label, model, min, max, opts?): number
• sliderInt(label, model, min, max, opts?): number
• dragFloat(label, model, speed?, min?, max?): number
• dragInt(label, model, speed?, min?, max?): number
• combo(label, model, options): string
• colorPicker(label, model): string
• link(label, href, opts?): boolean
  • opts.text: label text override.
  • opts.newTab (default true): open in new tab.
• menuBar(items): string | null
• contextMenu(label, items): string | null
• tooltip(text): void

Containers and structure

• collapsingHeader(label, opts?, fn?): boolean
• treeNode(label, fn?): boolean
• beginTabs(name): boolean
• tabItem(name, label, fn?): boolean

Data display

• progressBar(fraction, size?): void
• plotLines(label, values, opts?): void
• plotHistogram(label, values, opts?): void

Theming and plugins

• theme.set(themeNameOrVars, vars?)
  • Theme names: dark, light, contrast.
  • You can also set CSS variables directly.
• use(pluginFn)
• registerWidget(name, fn)

State models

Most interactive controls use mutable models:

• { value: boolean }
• { value: number }
• { value: string }

This keeps control values stable between renders and enables change-driven updates.