# Flow editor

The Flow Editor page is structured to give you a comprehensive view and control of your virtual assistant workflows. Below is a detailed description of each section in the Flow Editor. 

Learn more about the Flow editor with the [Build, validate and test a simple flow](https://docs.ixhello.com/ixhc2/general/tutorials/build-validate-and-test-a-simple-flow) tutorial

## Accessing the Flow Editor <a href="#accessing-the-chat-widget-configuration" id="accessing-the-chat-widget-configuration"></a>

1. Sign in to **ixHello Customer v2**.
2. In the left navigation menu, go to **Flows**
3. Select **Create Flow** or open an existing flow to edit.

## Flow editor page layout&#x20;

<figure><img src="https://4187494610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFe4cpY1jy0FJ4kgC7wSx%2Fuploads%2FZOiQiNb5xqnijkWf4FXs%2Fflow-editor.png?alt=media&#x26;token=3851b3ca-c54e-4f1b-b78b-d13d92a7da53" alt=""><figcaption></figcaption></figure>

### **1. Header**

* **Flow Name** and **Description**: At the top, you see the name and a brief description of the current flow. To the right of the name is a state badge that indicates whether the saved flow is valid or invalid.
* **Action Buttons**:
  * **Save**: Saves the current flow to the backend. It performs validation and displays any errors that might exist.
  * **Validate**: Validates the flow as currently displayed without saving it.&#x20;
  * **Test**: Opens the test chat, allowing you to interact with the flow.

### 2. Available nodes&#x20;

This section displays a list of nodes types available for use in your flow. You can:

* **Drag and Drop**: Add nodes to the Canvas by dragging them from the list.
* **Click to Add**: Click a node to add it to the center of the viewport in the Flow Canvas.

{% hint style="info" %}
Detailed descriptions of each node type and its configuration can be found in the child pages.
{% endhint %}

### **3. Canvas**

This is where you design the flow. It is composed of interconnected nodes that define the flow logic. **Canvas Controls** are located in the bottom left corner, these controls include

* **Zoom In/Out**: Adjust the view scale on the flow design.
* **Fit to View**: Automatically adjust the zoom level to fit the entire flow in view.

### 4. Sidebar

* **Node Configuration**: When a node is selected, the right sidebar opens to display and allow updates to the node's internal configuration.
* **Chat Interaction**: When the Test button is clicked, this sidebar shows the chat interaction corresponding to the flow logic being tested.

Learn more about the Flow editor with the [Build, validate and test a simple flow](https://docs.ixhello.com/ixhc2/general/tutorials/build-validate-and-test-a-simple-flow) tutorial