# The Visual Editor

The FlowDrop visual editor is a drag-and-drop interface for building workflows. This guide covers the editor layout and all available interactions.

## Opening the Editor

From the workflow listing at **Administration > FlowDrop > Workflows**, click the dropdown on a workflow and select **Open in Editor**.

URL pattern: `/admin/structure/flowdrop-workflow/{workflow-id}/flowdrop-editor`

## Editor Layout

The editor has four main areas:

![Editor layout with labeled regions](../../screenshots/editor-layout.png)

| Area | Location | Purpose |
|------|----------|---------|
| **Canvas** | Center | The main workspace where you place and connect nodes |
| **Node Palette** | Left (click **+**) | Browse and add available nodes by category |
| **Configuration Panel** | Right sidebar | Configure the selected node's parameters |
| **Toolbar** | Top | Save, undo, zoom controls, and other actions |

## Adding Nodes

1. Click the **+** button on the left side of the editor.
2. Browse nodes by category or type in the search box to filter.
3. Click a node to add it to the canvas.

![Node palette browser](../../screenshots/node-palette-categories.png)

![Searching for a node](../../screenshots/node-palette-search.png)

### Node Categories

Nodes are organized into categories for easy browsing:

- **Data Processing** — Transform and extract data
- **Control Flow** — Branching, loops, and conditional logic
- **Entity Operations** — Query, load, and save Drupal entities
- **Text & Output** — Text input, formatting, and output
- **HTTP & Integration** — Make HTTP requests to external services
- **Human-in-the-Loop** — Pause for user input or confirmation
- **Utility** — Date/time, calculations, and notes

## Selecting and Moving Nodes

- **Select** — Click on a node to select it
- **Move** — Click and drag a node to reposition it on the canvas
- **Deselect** — Click on empty canvas space

## Configuring Nodes

Click any node to open its configuration panel on the right side of the editor.

![Node configuration panel](../../screenshots/node-config-panel.png)

Node parameters come in two flavors:

- **Configurable parameters** — Appear as form fields in the configuration panel. These are static values set at design time.
- **Connectable parameters** — Appear as input ports on the node. These receive dynamic values at runtime through edge connections.

Some parameters are both configurable and connectable — you can set a default value in the configuration panel that gets overridden when data arrives through an edge.

## Node Visual Types

Nodes appear in different shapes depending on their function:

| Shape | Node Type | Examples |
|-------|-----------|----------|
| Rectangle | Standard processor | TextInput, Logger, HttpRequest |
| Compact | Simple/lightweight | Note, Idea |
| Diamond | Gateway (branching) | IfElse, SwitchGateway, BooleanGateway |

## Deleting Nodes and Edges

- **Delete a node** — Select the node by clicking on it, then press the **Delete** or **Backspace** key.
- **Delete an edge** — Click on the edge to select it, then press **Delete** or **Backspace**.

## Connecting and Disconnecting Nodes

- **Create an edge** — Click and drag from an output port (right side of a node) to an input port (left side of another node).
- **Remove an edge** — Select the edge and press Delete, or drag the edge endpoint away from the port to disconnect it.

For details on port types, data type colors, and connection rules, see [Connecting Nodes](connecting-nodes.md).

## Canvas Navigation

| Action | How |
|--------|-----|
| **Zoom in/out** | Scroll wheel or pinch gesture |
| **Pan** | Click and drag on empty canvas space |
| **Fit to view** | Double-click on empty canvas space |

## Toolbar Actions

The toolbar at the top of the editor provides these actions:

| Button | Action |
|--------|--------|
| **Save** | Persist all changes to the workflow |
| **Undo** | Undo the last action |
| **Redo** | Redo a previously undone action |
| **Fullscreen** | Toggle fullscreen mode |

## Saving

Click **Save** in the toolbar to persist your changes. The workflow definition (nodes, edges, and their configurations) is saved to the Drupal configuration entity.

!!! warning
    Changes are not auto-saved. Always click Save before navigating away from the editor.

## Fullscreen Mode

Toggle fullscreen mode for an immersive editing experience without the Drupal admin toolbar.

![Fullscreen editor mode](../../screenshots/visual-editor-workflow.png)

## Next Steps

- **[Connecting Nodes](connecting-nodes.md)** — Learn about ports, edges, and data flow
- **[Creating Workflows](creating-workflows.md)** — Manage workflow metadata and status
- **[FlowDrop Vocabulary](../../getting-started/concepts.md)** — Review core FlowDrop terminology
