> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Simple and Advanced modes

> The Flow Editor has two modes. Simple is a guided, curated surface for building reliable flows fast. Advanced is the full editor with every control.

The Flow Editor has two modes, and you switch between them from the top bar:

* **Simple** is a guided surface. You build screens from a curated library of pre-wired [blocks](/editor/element-library), edit them with high-level controls, and pick from vetted presets for colors, animation, and actions. It is the default for new flows.
* **Advanced** is the full editor. It exposes every primitive, the layer tree, the variable manager, conditional values, positioning, logic nodes, and the raw property tabs. It is what the editor has always been.

Both modes edit the **same flow**. There is no second format, no conversion, and no separate "Simple flow" type. Switching modes only changes which editing surfaces you see, never the underlying flow. A flow you build in Simple is an ordinary flow; you can open it in Advanced any time, and the other way around.

## Why two modes

The reliability of a flow depends on how exotic its building blocks are. A flow assembled from a small set of vetted, cross-tested blocks renders the same on the canvas, in the [iOS SDK](/ios-sdk/index), and in the [Expo SDK](/expo-sdk/index). A flow assembled from arbitrary nested primitives, absolute positioning, and hand-written conditional logic can reach corners that are harder to guarantee.

Simple mode constrains the input space to a curated set of **certified blocks** with bounded controls, so a non-designer can build a complete onboarding flow that is safe to ship. Advanced mode keeps the full power for when you need it. The rule that decides what lives where:

> Every control in Simple mode is either a **curated choice from a vetted set** or a **direct value with safe bounds**. Simple never exposes a control that composes arbitrary logic, arbitrary positioning, or arbitrary primitive nesting.

That single rule explains the table below.

| Capability        | Simple form                                              | Advanced form                                                                           |
| ----------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Building          | drag a certified [block](/editor/element-library)        | nest raw [primitives](/editor/components) in the [layer tree](/editor/multi-step-flows) |
| Properties        | high-level [block controller](/editor/block-controllers) | raw Layout / Style / Logic tabs ([properties panel](/editor/properties))                |
| Actions           | one primary action from a verb list                      | multi-action chains, multi-event, delays, conditional actions                           |
| Animation         | preset (Fade up, Slide in, Pop, ...)                     | full timeline, keyframes, stagger, attention                                            |
| Color             | theme token or plain color                               | conditional color bound to a [variable](/editor/variables)                              |
| Layout            | block-level spacing presets                              | per-edge padding/margin, absolute/fixed/sticky, z-index                                 |
| Logic / branching | none (linear flow)                                       | `condition` / `assign` / `abTest` [logic nodes](/editor/navigation-and-branching)       |
| Variables         | auto-managed + read-only "Data collected"                | full variable manager + [dynamic bindings](/editor/dynamic-values)                      |
| Structure         | [Screens panel](/editor/screens-panel) (thumbnails)      | Layers tree                                                                             |

## Switching modes

The mode toggle is a segmented **Simple | Advanced** control in the top bar, to the left of Preview. The **Advanced** option carries a small **Beta** badge.

<Steps>
  <Step title="Click the mode you want">
    Click **Simple** or **Advanced** in the top bar. The left sidebar, the Insert panel, and the properties panel all re-arrange to match the mode.
  </Step>

  <Step title="First time into Advanced: read the notice">
    The first time you switch to Advanced, a one-time dialog appears, titled **"Welcome to Advanced"**. It explains that Advanced surfaces are "less battle-tested across the iOS and Expo SDKs than Simple's certified blocks" and that you "can switch back to Simple at any time." Click **Explore Advanced** to continue. You only see this once.
  </Step>

  <Step title="Going back to Simple: review what locks">
    If the flow uses Advanced-only features, switching to Simple opens a dialog titled **"Some elements will be locked"**. It lists what cannot be edited in Simple (for example "2 conditional values", "1 branching step") and reassures you that "Nothing is removed, they stay intact and appear read-only in Simple." Choose **Stay in Advanced** or **Switch to Simple**. Nothing is ever deleted.
  </Step>
</Steps>

## How the mode is chosen when you open a flow

When you open a flow, FlowPilot resolves the mode in this order:

1. **The flow's saved mode.** Every flow created in the current editor is stamped as **Simple** when it is created, so new flows open in Simple.
2. **Your last-used mode**, remembered in your browser, if the flow has no saved mode.
3. **Advanced**, as the final fallback.

Flows created before this update have no saved mode, so they fall through to step 2 or 3 and keep opening in **Advanced**. They are never force-downgraded. Switching the toggle changes the current session and your browser default for the next flow; it does not rewrite the flow's saved mode.

## What Simple tolerates but locks

Simple mode never drops data. If a flow contains Advanced-only constructs, Simple keeps them intact and shows them as read-only:

* **Logic nodes** (`condition`, `assign`, `abTest`, and others) appear as read-only **"Logic step"** dividers in the [Screens panel](/editor/screens-panel). You cannot edit or reorder them in Simple.
* A **component that uses Advanced features but has no Simple controller** shows a read-only amber card in the properties panel: **"Some features are Advanced-only"**, listing what is locked (conditional values, positioning, custom components, advanced animations, and so on).
* Loose primitives that are not part of a certified block are selectable as whole blocks but are not fully editable in Simple.

To edit any of these, switch to Advanced. Round-trips between modes are lossless.

## When to use each

<CardGroup cols={2}>
  <Card title="Use Simple when" icon="wand-magic-sparkles">
    You are building a standard onboarding, quiz, or paywall lead-in from common patterns and you want it to be safe to ship across SDKs without QA on every screen.
  </Card>

  <Card title="Use Advanced when" icon="sliders">
    You need branching logic, conditional styling, precise positioning, custom components, multi-step animation timelines, or any control that is not in Simple.
  </Card>
</CardGroup>

You do not have to commit to one mode. A common workflow is to lay out the whole flow in Simple, then switch to Advanced only on the one screen that needs a conditional value or a branch, then switch back.

## Common mistakes

* **Thinking Simple and Advanced are different file formats.** They are not. Both edit the same flow. The mode only changes what you can see and edit.
* **Expecting an old flow to open in Simple.** Flows created before this update open in Advanced and stay there until you switch. New flows open in Simple.
* **Worrying that switching to Simple will delete advanced work.** It never does. Advanced constructs are locked and shown read-only, not removed.
* **Looking for the toggle and not finding it.** If Simple mode is disabled for your workspace, the toggle is hidden and you are in Advanced only.

## Related pages

* [The Flow Editor](/editor/index)
* [The Screens panel (Simple)](/editor/screens-panel)
* [The Element Library (Simple)](/editor/element-library)
* [Block controllers (Simple)](/editor/block-controllers)
* [The properties panel (Advanced)](/editor/properties)
* [Navigation and branching](/editor/navigation-and-branching)