Skip to content
Docs
flero.ai

Canvas controls

The canvas is infinite, smooth, and built to scale to workflows with hundreds of nodes. This page covers everything you can do to navigate it.

🎬 Gif needed: canvas__minimap-zoom.gif, zooming out far enough that the minimap appears in the corner, then panning via the minimap. ~5 seconds.

Pan

  • Trackpad: two-finger drag.
  • Mouse: middle-button drag, or hold Space and left-button drag.
  • Edge pan: dragging a node near the canvas edge auto-pans.

Zoom

  • Trackpad: pinch.
  • Mouse: scroll wheel.
  • Keyboard: ⌘+ / ⌘- to zoom in / out; ⌘0 to reset to 100%.
  • Fit-to-screen: ⌘1 or the fit-to-screen icon in the bottom-right canvas controls.

Zoom range is 25% to 400%.

Minimap

Once the canvas is zoomed out far enough or the workflow extends beyond the viewport, a minimap appears in the bottom-right of the canvas. It shows the whole workflow at a glance with the current viewport as a moveable rectangle.

  • Click anywhere in the minimap to centre the viewport there.
  • Drag the viewport rectangle to pan.

The minimap can be toggled off via the canvas-controls menu (right-click on empty canvas → Show minimap).

Grid and snap

The canvas has an optional grid (8-pixel cells by default). When enabled, dragging a node snaps it to the nearest grid intersection.

Toggle via the canvas-controls menu → Snap to grid.

Viewport persistence

When you reopen a workflow, Flero restores the zoom and pan from where you left it. This is per-browser, per-workflow. If you want everyone on the team to land on the same view, use Center on selection or Fit to screen before sharing the URL.

Canvas controls cluster (bottom-right)

A floating cluster of icon buttons:

Icon Action
🔍 + Zoom in
🔍 − Zoom out
◻ Fit to screen
1× Reset zoom to 100%
🗺️ Toggle minimap
⊞ Toggle grid / snap
⛶ Toggle fullscreen (hides sidebar, browser chrome)

Right-click menu (on empty canvas)

  • Insert node, opens the node picker at the click point.
  • Paste, if you've cut or copied nodes.
  • Show minimap / Snap to grid, toggles.
  • Fit to screen / Reset zoom.

Right-click menu (on a node)

  • Edit, same as a click.
  • Run from here, execute this node and everything downstream.
  • Test node, run this node alone.
  • Duplicate (⌘D).
  • Delete (Delete).
  • Add to group.
  • Disable, keep the node in place but skip it during execution.
  • Copy as expression reference, puts {{ $node["Name"].output }} in your clipboard.

Right-click menu (on a connection)

  • Insert node on this connection, splits the connection with a new node in the middle, automatically wired.
  • Delete.

Tips & gotchas

  • The canvas is infinite, but you can lose nodes far from the origin. Use Fit to screen if you can't find one.
  • Browser zoom (⌘+ at the browser level) and canvas zoom are independent. Use the canvas-level zoom for editing, browser zoom for accessibility (e.g. larger labels).
  • Group rectangles don't move with their members by default. To move a group and its nodes together, click the group label first (selects the whole group), then drag.
  • Fullscreen mode is good for screenshots and presentations, Esc exits.

Found something out of date? This page lives in the Flero docs content set.