In interactive mode, FLUID allows users to construct and modify their GUI design by organizing widgets hierarchically through drag-and-drop actions.

The project windows provide a live preview of the final UI layout. Most widget attributes can be adjusted in detail using the Widget Properties Panel.

Users can also incorporate C++ coding elements such as functions, code blocks, and classes. FLUID supports the integration of external sources, for example images, text, or binary data, by embedding them directly into the generated source code.

A typical FLUID session manages the widget hierarchy in the main application window on the left. The project file name is shown in the title bar. In the example above, we edit the FLTK Preferences example file test/preferences.fl.

See also: Main Application Window

The layout editor window left of center, titled "My Preferences" shows the GUI design as it will be generated by the C++ source file. The widgets "shower", "shave", and "brush teeth" are shown in their selected state and can now be resized or moved by grabbing any of the red boxes around the selection frame.

See also: Layout Editor Window

To the right, we have the "Widget Properties" panel. We can use this to edit many more parameters of the selected widget. If multiple widgets are selected, changes are applied to all of them where appropriate.

See also: Widget Properties Panel

The Widget Bin at the top is an optional tool bar (Edit > Show Widget Bin, Alt-B). It gives quick access to all widget and code types. Widgets can be added by clicking onto the tool, or by dragging them out of the tool box into the layout editor.

See also: Widget Bin Panel

The optional panel on the right shows a live source code preview. This is very helpful for verifying how changes in the GUI will be reflected in the generated C++ code (Edit > Show Code View, Alt-C).

See also: Code View Panel