Flux Guide ← All widgets
Guide

Editing & Layout

Flux dashboards are a free-form canvas. Widgets are placed wherever you want, drag freely, snap to each other's edges and centers, and may overlap. This page covers everything in edit mode — moving, resizing, selecting, grouping, layering, designing a separate layout for each device, and zooming.

Edit mode

Tap Edit in the top bar to start editing; tap Done to finish. When you enter edit mode Flux picks the layout for the device you're on — iPhone or iPad — and an edit bar appears at the bottom of the screen.

The edit bar holds Add Widget, Layers, Select, Undo / Redo, the device layout switcher (iPhone / iPad / Apple TV), and a ⋯ overflow menu. On a narrow iPhone the bar shrinks so everything fits at once: the layout switcher collapses to a single device icon and Select moves into the overflow menu as "Group Widgets".

The overflow menu also holds Auto-Arrange, Add Tab, Page Layout, and the alignment toggles: Smart Align, Snap to Grid, and a Grid Size picker (12 / 16 / 24 / 32 / 48 pt).

Per-widget controls While editing, every widget shows its own chrome: a red minus badge (top-left) to delete it, a blue badge (top-right) that opens that widget's online how-to, and an accent resize handle (bottom-right). Tap the widget body to select it. These controls stay the same on-screen size at any zoom.

The per-widget badges

ControlWhat it does
MoveDrag the widget body to reposition it. The widget follows your finger 1:1 at any zoom.
ResizeDrag the accent handle that hangs just off the bottom-right corner.
DeleteTap the red minus badge at the top-left corner.
ⓘ HelpTap the blue info badge at the top-right corner to open that widget kind's how-to page (the same guides linked from "All widgets").

Move, resize & snap

Drag any widget to move it; drag the bottom-right handle to resize it. Both honor a minimum size so a widget can't be made too small to use.

With Smart Align on (the default), Flux compares the widget you're moving against every other widget and snaps when an edge or center comes within range — left/center/right on the horizontal axis, top/center/bottom on the vertical. A pink guide line appears at the matched edge while the snap holds, just like Keynote or PowerPoint. Resizing snaps the same way: the right or bottom edge lines up with a sibling's edge, or the width/height matches a sibling's size so widgets share dimensions and gaps stay even.

With Snap to Grid on, the canvas shows a faint grid and the widget hard-snaps to the nearest grid line when you drop it (and resizes in grid steps). Smart Align takes priority on any axis that finds an alignment match; the grid handles the rest.

Coordinates are zoom-independent The whole canvas is built in logical dashboard units and scaled once at the root. Every position and size you set is stored in those units, so a widget stays exactly where you put it regardless of the editor zoom — and renders identically on the real device.

Selecting & overlapping widgets

Tap a widget to select it (its inspector opens for editing options, colors, and entities). Widgets are allowed to overlap by design — that's how layering works.

To reach a widget hidden under another, tap the same spot again: each repeat tap steps down through every widget under that point, top layer first, then the next, wrapping around. A covered or sent-to-back widget is therefore always reachable — layer order never makes a widget unselectable. Tapping empty canvas deselects.

Tip If taps seem to do nothing on a widget, it may be set to pass-through in the Layers panel (so taps fall through to the widget behind it at runtime). In edit mode every widget is still selectable regardless.

Grouping

Open Select mode (the edit bar, or "Group Widgets" in the overflow menu). In Select mode you pick widgets two ways:

With two or more picked, drag any one of them and the whole selection moves together. Tap Group to make it permanent: from then on the widgets move as one unit. Ungroup dissolves the group.

Once a group exists, dragging any member moves the entire group. To reposition just one member within the group, select that member first (tap it to open its inspector) and then drag — the selected member moves alone.

Groups are per-layout Grouping is recorded separately for iPhone, iPad, and Apple TV. Grouping widgets while editing the iPad layout never entangles your iPhone or TV arrangement — each layout can group differently.

Layering

Open Layers from the edit bar for a list of every widget on the page, front-most first. Each row shows the widget's icon, name, kind, and its current stacking level as a z badge.

Per-device layouts

One dashboard, three layouts. The layout switcher in the edit bar (iPhone / iPad / Apple TV) lets you design each device's arrangement independently. Switching the target shows a hint naming the layout you're now editing.

Widget frames fall back to the iPhone (compact) values until you customize them per device, so a page designed only for iPhone still renders on iPad and TV — you then refine each layout as needed.

iPhone & iPad

When you design the iPhone layout on a much larger screen (an iPad), Flux frames the canvas inside a phone bezel — Dynamic Island and a true 393-pt viewport — so it's clear what fits. A bar above it lets you pick which iPhone model to target (mini → Pro Max) and its orientation. The iPad bar offers iPad models (with a physical-width readout), a "Fill this screen" option, and orientation.

Apple TV

The Apple TV layout is a fixed 1920 × 1080 16:9 stage, letterboxed and centered. A dashed safe-area guide marks the overscan-safe region — content placed outside it may be clipped on a real TV, so widgets clamp to that area. A stepper sets the target TV's diagonal (32″–110″) with a real-world centimetre width readout, so you can gauge how big a widget will actually appear on the wall.

Orientation

Each layout has a portrait/landscape picker. Flipping orientation swaps the canvas to the complementary edge of the device — and on a real device it also locks rotation to the orientation you chose for that page.

Device boundaries When you edit a layout whose shape doesn't match the screen you're holding — an iPad layout, or a landscape phone layout, on a portrait handheld — Flux draws the target device's real edge as a dashed accent outline and dims everything past it as off-screen. So you always know what's actually visible on the device you're designing for. (The iPhone-on-iPad case gets the phone bezel instead; the TV has its own framed stage.)

Page device-scope

Each tab (page) can be shown only on the devices you choose. In Page Layout, the "Show this page on" section has iPhone / iPad / Apple TV toggles. Leave them all on (or all off) and the tab shows everywhere; pick a subset and the tab only appears on those devices. While editing, all tabs are shown regardless so you can change their scope; at runtime each device only sees the tabs scoped to it.

A whole dashboard can be scoped the same way from the dashboard menu ("Show on Devices"), and set to sync across all your devices or stay on this device only ("Available on").

Zoom

While editing, a draggable zoom pill sits at the bottom-right with −, a percentage, +, and (when zoomed) a Fit button. Zoom runs from 50% to 400%. Drag the pill by its grip handle to park it off a widget it's covering.

You can also pinch anywhere on the canvas to zoom; the point under your fingers stays put. When zoomed in past the screen, the canvas pans — scroll to reach the rest. Zoom is purely an editing aid: it only applies in edit mode and changes nothing about the saved layout. The TV stage starts pre-zoomed on a small phone so the 16:9 wall is workable.

Notes Smart Align and Snap to Grid are per-page settings in the overflow menu. Auto-Arrange tidies the current layout, treating each group as a single unit. New widgets land where you're looking (the editor tracks the visible viewport), and the canvas scrolls normally in edit mode so you can always reach a widget — scrolling is only suspended during an active drag.