Use the contextual floating bar, Text controls, selection and context actions, and page-scoped media workflows without confusing them with global controls or AI generation.
Where: Designer document → Edit mode → select an element on the active page.
Key ideas
- Element controls follow the selection: The floating selection bar is contextual to the selected element or selection. It is separate from the global top bar, which manages pages, canvas mode, page shape/device, and project-level actions.
- Text work is consolidated under Text: Select a text element and use Text for semantic type/presets, style tools, typography customization, and word editing. Choosing a semantic preset changes the element type as well as its appearance; typography and content editing remain distinct controls.
- The active page owns selection and playback: Selection, layers, ordering, undo, and media playback belong to the active slide/card/page. Navigating to another page clears the old selection; video and audio playback settings apply to the current page rather than a global player.
- Direct edits stay native: Ordinary style, tag, hide/show, order, and supported static move operations update the native document and can preserve the live preview. Runtime-bound structural changes retain a conservative rebuild fallback, so not every structural edit is guaranteed to avoid an iframe reload.
Steps
- Open the intended Designer document and page, switch the canvas to Edit, then click an element. A blank-canvas click clears the selection.
- Use the floating bar for element-specific Text, Position, Layout and spacing, and Appearance controls. Drag the bar by its handle if it covers the work; pin it only when you want it to stay in place instead of following selection.
- For text, open Text to choose a semantic heading/paragraph type or preset, apply an available reusable style, customize typography, or edit the words. To select text rather than the element, enter text-edit mode first; dragging on the normal canvas moves/selects the element, not a text range.
- For multiple elements, add to the selection, then resize from the visible edge or corner handles. Use Position/context actions for supported alignment and ordering; the Layers panel is scoped to the active page and supports selection, reordering, and re-parenting.
- Use the canvas context menu for applicable duplicate, copy/paste, order, hide/lock, and group actions. Copying or pasting between pages preserves supported styles, media, and groups and participates in the normal Undo/Redo history.
- Insert or paste media from a local file, clipboard file, a Flowgen node output, or the project Asset manager. Select the placed media to crop or replace it and inspect its own playback controls. For video/audio, set controls visibility, autoplay, mute, or loop as appropriate; browser autoplay policies may still require a user gesture.
- Navigate to another page and confirm the prior selection is cleared. For video/audio playback, return to the page that owns the media and play it there.
- Use Undo/Redo immediately after a change to verify the exact native edit. If an operation changes runtime structure, wait for the preview to settle and verify the saved page rather than assuming no reload occurred.
Floating selection bar versus global controls
- Text — semantic text type/presets, reusable text styling, typography customization, and editing the words.
- Position — exact position/size and supported multi-selection arrangement controls.
- Layout and spacing — relevant layout, gap, and box controls for the selected element.
- Appearance — selection-specific color, fill, border, and other supported styling.
- The global top bar remains for page navigation, canvas modes, device/aspect, undo/redo, fields, sharing, and project controls; it is not the element inspector.
Media and selection boundaries
- Media inserted from a Flowgen output or Asset manager still belongs to the active page after insertion; selecting a covered object may require using Layers or a supported selection gesture.
- Clipboard media paste is an insertion path, not a guarantee that every arbitrary clipboard payload or remote URL is supported.
- Grouping, alignment, snapping, ordering, and crop/replace are described only where the active page and selected element expose those controls.
- Hiding or locking an element changes its document state; selection remains page-scoped.
MCP and the native Designer API
For external MCP, open the original Designer node with flowgen_open_designer, inspect its returned live tool declarations, and begin with read_document. Use only current element IDs returned by that read; use page_id where the declaration supports page targeting. Apply supported content/style/insert/move/remove edits through the exact returned native tools and inspect again. The UI floating bar, operating-system clipboard, local file picker, and context-menu gestures are not separate MCP commands; do not invent a tool for them or claim that an MCP host can reach local files. Native video composition is a separate Compositor surface.
Tips
- Use Layers when overlays or covered media are difficult to select directly.
- For a precise multi-element change, make the selection explicit and verify selection count before resizing or arranging.
Limitations and important notes
- This article describes the native Designer document canvas, not the Flowgen graph presentation or native Video Editor/Compositor.
- Browser autoplay policies can block autoplay even when the media element is configured for it.
- Static source-owned moves preserve native element identity/formatting; runtime-bound structural edits can still rebuild the live frame.
- This source review does not substitute for a fresh live UI capture or testing a specific document/browser.
Troubleshooting
Dragging highlights text instead of moving the element.
The selection is in text-edit mode. Exit text editing, select the element, and drag its canvas box; enter text-edit mode only when you want a text range.
The selection disappeared after changing pages.
That is intentional page scoping. Select the target element on the newly active page.
Autoplay does not start.
Check the element’s own autoplay/mute/controls settings, then test with a user gesture; browser autoplay restrictions may override the requested behavior.
The preview refreshed after a structural change.
Some runtime-bound structural edits use a conservative frame rebuild. Verify the native page and history state after it settles.