A visual layout editor for ReaImGui interfaces in REAPER.
ReaUI Builder generates Lua code from a canvas layout. Arrange controls, nest them in panels, tabs, or tables, and set their properties in the inspector. The export includes widget calls, drawing primitives, styles, and widget state. Add your script's behavior at the generated -- TODO comments.
The editor runs from a single local HTML file. No installation, server, or build step is required.
Version 2.2.0 · Builder HTML · English manual · Русское руководство · Web version
- Technical overview
- Supported widgets
- Layout and styling
- Code export
- Download and run
- Current limitations
- Documentation and feedback
| Area | Support |
|---|---|
| Editor | Single HTML file with embedded CSS and JavaScript; runs locally in a browser |
| Output | Lua script targeting ReaImGui 0.10 |
| Widgets | 46 families; 56 concrete types, including automatic tab and table-cell elements |
| Window | Fixed or resizable (optional min / max size; reopens at the last size); optional menu bar (menus, items, check items, separators, submenus); title bar in ImGui or theme colours |
| Modes | Basic (eleven common components, plain-language properties) and Advanced; both edit the same project; the start dialog appears on the first launch |
| Interface | English / Русский (File › Language), switched live and remembered per browser |
| Drawing | Rectangle, circle/ellipse, polygon, line, text, triangle, and arc |
| Positioning | Absolute canvas coordinates; constraints pin objects to an edge, keep them centred or stretch them (Left+Right, Top+Bottom) in a resizable window, tables and the contents of their cells included; table cells laid out as ImGui lays them out |
| Sizing | Widget-specific rules that follow ImGui's size constraints |
| Containers | Panel, Group, StyleRegion, CollapsingHeader, TreeNode, TabBar, and Table (stretches with a resizable window; per-row colours and highlight, cell padding) |
| Controls | Knob (a round dial: drag, wheel, double-click reset, Ctrl+click to type); round Button (circle or pill); custom Checkbox (size, border, colours, click area up to a whole table row); frame border on text inputs |
| Editing | Hover outline and name on the canvas; thin, zoom-independent outlines; multiple selection, batch property editing, copy/paste, duplication, undo/redo, text editing on the canvas, a hint for every setting |
| Grid and view | 2, 5, or 10 px grid spacing; optional snapping; 50–250% zoom and panning |
| Styling | Built-in and custom themes; Theme Studio with fifty ready-made palettes and a plugin preview; theme files (import / export); scoped style and font overrides |
| Preview | Approximation of the exported interface with theme and style overrides; resizable windows can be previewed at any allowed size |
| Export checks | Errors, warnings (including overlaps and too-small stretched objects across the whole window-size range), and a count of included and omitted objects |
| Project storage | JSON files; browser autosave for recovery |
Builder generates the interface layer for a REAPER script. DSP, REAPER actions, and application logic are supplied by your code.
The palette groups widgets into seven categories. Family names below match the editor.
| Category | Families |
|---|---|
| Buttons & Toggles | Button, SmallButton, InvisibleButton, Checkbox, CheckboxFlags, RadioButtonEx, ArrowButton |
| Display | Text, BulletText, TextWrapped, TextColored, TextDisabled, LabelText, TextLinkOpenURL, TextLink, ProgressBar, Plot |
| Sliders & Drags | Slider, VSlider, SliderAngle, Drag, DragRange, SliderN, DragN, Knob |
| Fields | Input, InputText, InputTextWithHint, InputTextMultiline, InputN |
| Selection | Combo, ListBox, Selectable |
| Color | ColorEdit, ColorPicker, ColorButton |
| Layout | SeparatorText, Separator, HelpMarker, Panel, Group, StyleRegion, CollapsingHeader, TreeNode, TabBar, Table |
Slider, VSlider, Drag, DragRange, and Input provide Int and Double variants. ColorEdit and ColorPicker provide RGB and RGBA variants. Plot provides Lines and Histogram variants. Choose the variant before placing a widget; changing it later requires replacing the widget.
Standard numeric families that support multiple components use separate scalar variables for 1–4 components. The SliderN, DragN, and InputN families use reaper.new_array with 2–64 elements.
The inspector exposes ranges, drag speed, step sizes, and printf-style display formats where supported. Numeric flags include clamping, logarithmic response, disabling direct input, and wrapping for Drag controls. Text inputs support input flags and EEL2 callbacks. Color controls expose display, input, picker, and alpha options.
For type-specific dimensions, flags, and inspector fields, see the manual's widget catalog and reference tables.
Builder exports explicit widget positions. It sets ImGui window padding and item spacing to zero and positions the cursor before each control. Canvas zoom changes the view without changing layout coordinates.
Each widget has sizing rules that are shared by the canvas, inspector, and exporter. A Button can be resized in both directions; most single-line input controls have a height determined by ImGui. The inspector disables unsupported dimensions and the canvas shows only the applicable resize handles.
Sliders, input fields, checkboxes, and several other controls have labels drawn above their bounds. Allow 12 px of extra vertical space for these labels.
Nesting follows placement: moving a widget into a container's content area makes it a child of that container. Child positions are stored relative to the parent, so moving a container moves its contents. The inspector displays absolute layout coordinates.
- Panel creates a child window with optional borders and horizontal scrolling.
- Group keeps widgets together as one logical block.
- StyleRegion applies style and font overrides to its children.
- CollapsingHeader and TreeNode create collapsible sections in the exported interface.
- TabBar manages separate content pages.
- Table provides rows and columns with width modes, headers, borders, alternating backgrounds, and resizing or scrolling options.
Builder creates TabItem and TableCell elements automatically. Exported table cells keep each object's offset from its cell's edge, and the cells themselves are laid out by ImGui.
Widget overlap is checked during placement, movement, and resizing. Containers reserve an editor strip for selecting the container itself; this strip is not exported.
By default the exported window has a fixed size. Turn on Resizable window in the Canvas tab to let the user resize it in REAPER, optionally between a minimum and a maximum content size. The window opens at the design size the first time and reopens at the size the user left it.
Constraints decide where each object goes when the window changes size: keep its distance to the left or right edge, to the top or bottom edge, or stay centred. Set them with the 3 × 3 preset grid in Properties; the canvas shows them as dashed lines to the parent's edges. Everything inside a pinned container moves with it. Left+Right and Top+Bottom keep both distances, so the object's width or height follows the window. Buttons, fields, panels, tab bars, progress bars and similar controls can stretch, as can rectangle and text drawings; controls sized by ImGui or by their text only move. Drag the frame in Preview to try other sizes, and Preflight reports any size at which widgets would overlap, leave their container or get too small.
Drawing primitives form a separate layer below the widgets. Use them for section borders, meter backgrounds, scales, and other non-interactive elements. Drawings can overlap, and their stacking order is editable.
Shapes support the applicable fill, stroke, thickness, rounding, and opacity settings. Arcs provide ring and pie modes; text drawings support alignment and size settings. Drawings export as ImGui draw list calls and are clipped to the canvas.
Three themes are included: Default, Slate (dark), and Light. Theme Studio (View › Theme Studio…) edits the colors of the exported interface: pick one of fifty ready-made palettes in the Collection, or build a theme from four base colors (background, text, controls, accent) and adjust all fifteen slots. A sample plugin window shows the result before you apply it. The active theme is saved with the project; your own themes are kept in My themes in the browser and can be exported to a file.
Use StyleRegion for local text, frame, button, rounding, alignment, and font overrides. Overrides are scoped to the region's children in the export. Labels with an explicit draw list color retain that color.
Preview hides editor aids and approximates the interface with the selected theme. Return to Editor to change the layout. Some controls use placeholders or simplified rendering; see Current limitations.
Export generates a Lua file containing:
- Context creation and window dimensions.
- Named position and size constants.
- Widget state variables, shared radio-group state, and arrays where needed.
- Font and EEL2 callback setup when used by the layout.
- A drawing function with primitives, nested widget calls, and scoped styles.
- For a resizable window: the size limits, the remembered size, and per-frame positions of pinned objects.
- A
reaper.deferloop.
The generated -- TODO comments identify places to add application behavior. Object names are used in Lua identifiers and ImGui IDs. Use descriptive names to make the result easier to edit.
The export window checks the layout before allowing a copy or download. Errors such as invalid identifiers, broken parent relationships, or invalid geometry block export. Warnings identify cases where the result may differ from the canvas, including omitted objects and clipped drawings. Click a finding to select its object.
A widget must fit completely inside the layout to be exported. An omitted container also omits its descendants. Drawings are included when they intersect the canvas and are clipped at its edges.
The optional Reference grid in export adds a 50 px measurement grid for comparing Builder coordinates with the REAPER window. Disable it before distributing the script.
Save Project writes the editable layout to JSON, including objects, canvas settings, and the active theme definition. Load Project restores that layout. Keep the JSON file alongside the Lua script: exported Lua cannot be imported back into Builder, and edits to the Lua file do not update the project.
Autosave stores a recovery draft in the browser. Save a project file for a portable copy that survives clearing browser data.
Download ReaUI_Builder.html and open the downloaded file in Chrome, Edge, Firefox, or Safari. On GitHub, use the file's download control to save the HTML itself. The editor works locally through file://; editing and code generation do not require a network connection.
On the first launch, choose Basic or Advanced mode (switch later with View › Interface mode). Set the window size on Canvas, place widgets, and edit their properties in Properties; rest the pointer on any setting for a hint (View → Show hints). Double-click a text drawing, rectangle, or circle to type its text on the canvas. Use File → Save Project to keep an editable copy.
The generated script requires REAPER and ReaImGui 0.10 or later. ReaImGui is available through ReaPack.
- Open Export, resolve any errors, and download the Lua file.
- In REAPER's Actions window, use ReaScript: Load… to add the file.
- Select the script and click Run.
See REAPER's ReaScript documentation for script loading and editing. The full Builder manual covers the editing workflow and all inspector settings.
Version 2.2.0 has the following limitations:
- Preview is approximate. Group, Table, ColorPicker, and TextWrapped use placeholders. ColorEdit does not reflect all display flags in Preview.
- Combo and ListBox use placeholder items. Replace their item strings in the generated code.
- Collapsible containers stay open in Builder. Their collapse behavior is available in the exported interface.
- Menus cover the window's menu bar only. Right-click context menus and popups are not built yet.
- Some objects only move. ColorPicker, controls sized by ImGui or by their text, and circles, arcs, lines, polygons and triangles do not stretch in a resizable window.
- Table columns are modelled for fixed and stretch widths. Columns set to Auto and the scrollbar of a ScrollY table are not, so their widths in REAPER can differ from the canvas.
- Russian interface is hybrid. Widget and folder names and the labels in Properties stay English; the top bar needs a window about 1300 px wide.
- Knob is basic. No label, value text or per-widget colours yet; use a Text beside it. Knob default and Button round are not available in multi-edit.
- Theme Studio previews in its own window. The canvas shows a theme after Apply; the Collection is a fixed set of palettes.
Check the exported interface in REAPER before distributing your script. The manual records the release's validation status and additional behavior to be aware of.
Read the Markdown manuals directly on GitHub. They include the full widget catalog, inspector reference, flags, keyboard shortcuts, and export examples. The same manual is also available inside Builder through Help → User Manual ↗.
Use Help → Report a Bug… in Builder when preparing a report. It assembles a ready-to-send report from the last 50 logged actions, the build number, and the current window size; add a short description of what happened and, optionally, check Include my layout to attach the whole project. Copy the report and send it to the listed address. For export problems, also mention the REAPER and ReaImGui versions.