The navigator provides navigation and management for the screens and widgets of the current project. It is split into a screen tree and a widget tree, separated by a draggable splitter so you can give more room to either tree.

Screen tree

The screen tree lists the screens of the project. Selecting a screen makes it the active screen shown on the canvas. The screen tree supports:

  • Create - add a new screen.
  • Duplicate - duplicate the active screen.
  • Delete - remove the active screen.
  • Reorder - move a screen up or down in the list, by dragging or with the move actions.
  • Hide/Show - toggle a screen's visibility.

Widget tree

The widget tree lists the widgets of the active screen in their hierarchy. It supports:

  • Selection - click to select a widget; multi-select with Shift/Ctrl/Cmd clicks.
  • Rename - update a widget's name.
  • Reparent via drag-and-drop - drag widgets onto a new parent to change the hierarchy.
  • Duplicate - duplicate the selected widgets.
  • Delete - remove the selected widgets.
  • Hide/Show - toggle a widget's visibility.
  • Lock - toggle a widget's lock state.
  • Hover highlight - hovering a tree row highlights the matching widget on the canvas (when enabled).

Symbols tab

The Symbols tab next to Hierarchy manages reusable components. It lists the project's symbols, and below the library it shows the widget tree of the selected symbol's definition. Creating, renaming, reordering, and deleting symbols all happen here; selecting a symbol opens its definition on the canvas.

See the Symbol guide for the full workflow.

All navigator actions are locked in preview mode.

  • Overview - the editor interface as a whole.
  • Canvas - the visual canvas where screens are designed.
  • Symbol - reusable components and their instances.