The canvas is the central area of the editor where screens and widgets are designed. Widgets are rendered live, so design changes are visible immediately.

Creating widgets

Add widgets from the widget library by dragging them onto the canvas. Common widgets include buttons, labels, images, sliders, and check boxes.

  • Image widgets reference resources from the pool; see the image guide.
  • Label widgets use typography from font libraries; see the font guide.

Selecting widgets

  • Click a widget to select it and reveal its properties in the inspector.
  • Hold Ctrl/Cmd and click to multi-select on the canvas.
  • Drag a selection rectangle to select multiple widgets.
  • In the widget tree, hold Shift and click to select a range, or Ctrl/Cmd and click to select continuously.

Selected widgets are highlighted for clear identification.

Arranging widgets

Moving

Drag widgets across the canvas. Alignment guidelines appear automatically near edges or centers of adjacent widgets and the canvas boundaries to assist precise placement.

Resizing

Drag widget edges or corners to resize. Hold Ctrl/Cmd while dragging to resize proportionally and preserve the aspect ratio.

Duplicating

Select a widget and hold Option/Alt while dragging to duplicate it. This is useful for creating repeated elements such as menu items or buttons.

Aligning

With multiple widgets selected, use the alignment panel above the screen area to align and distribute them evenly.

Deleting

Select a widget and press Delete, or use the context menu's delete option.

Canvas controls

  • Zoom - use Ctrl/Cmd + mouse wheel, or the toolbar zoom controls. The reset button restores 100%.
  • Move canvas - right-click and drag to pan the canvas. Or, hold Spacebar to switch from selection to canvas pan.

Properties, styles, and events

The inspector organizes widget customization into sections:

  • Properties - Common widget properties and widget-specific data such as text, image resource, and state.
  • Styles - visual appearance including colors, sizes, and fonts.
  • Events - handlers triggered by user interaction.
  • Overview - the editor interface as a whole.
  • Image - assign image resources to widgets.
  • Font - apply typography to widgets.
  • Layout - arrange child widgets with flex layout.
  • Inspector - inspect and edit widget properties.
  • Preview - preview editor output.
  • Codegen - generate code from editor screens.
  • Transplant - run editor output on a target device.