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

# Editor Interface

> A comprehensive guide to the LyznFlow Workflow Editor

# The LyznFlow Editor

The LyznFlow Editor is a powerful, visual environment where you build your automation workflows and AI agents. It is designed to be intuitive for beginners while offering advanced controls for developers.

## Interface Overview

The editor is divided into four main areas: the **Canvas**, **Toolbar**, **Node Library**, and **Properties Panel**.

```mermaid theme={null}
graph TD
    UI[Editor Interface] --> Header[Toolbar & Header]
    UI --> Canvas[Infinite Canvas]
    UI --> Library[Node Library (Left)]
    UI --> Properties[Properties Panel (Right)]
    
    Header --> Save[Save / Publish]
    Header --> Mode[Active / Watch Mode]
    
    Canvas --> Nodes[Workflow Nodes]
    Canvas --> Edges[Connections]
```

## 1. The Infinite Canvas

The central area is your workspace. Here you can:

* **Drag and Drop**: Move nodes around to organize your logic.
* **Connect Nodes**: Drag from a node's **Output Handle** (right side) to another node's **Input Handle** (left side) to create a connection.
* **Pan and Zoom**: Use your mouse wheel or trackpad to navigate large workflows.

<Tip>
  **Pro Tip**: You can select multiple nodes by holding `Shift` and dragging user selection box.
</Tip>

## 2. The Toolbar

Located at the top of the screen, the toolbar gives you control over the workflow's state.

| Control           | Description                                                                                |
| :---------------- | :----------------------------------------------------------------------------------------- |
| **Workflow Name** | Click to rename your workflow.                                                             |
| **Active Toggle** | Enables/Disables the workflow. **Inactive** workflows will not run, even if triggered.     |
| **Watch Mode**    | A powerful debugging feature. When enabled, you can see execution animations in real-time. |
| **Save Button**   | Saves your current changes. Shortcut: `Cmd/Ctrl + S`.                                      |
| **Run Test**      | (If available) Manually trigger the workflow for testing.                                  |

## 3. The Node Library

Clicking the **"Add Node"** button (or right-clicking on the canvas) opens the Node Library. Nodes are organized by category:

* **Triggers**: What starts the workflow (e.g., `Chat Trigger`, `Schedule`, `Webhook`).
* **Actions**: Tasks the workflow performs (e.g., `Send Email`, `Update Database`).
* **AI**: Advanced AI capabilities (e.g., `AI Agent`, `Generate Image`).
* **Logic**: Control flow (e.g., `If/Else`, `Loop`, `Delay`).

## 4. Properties Panel

When you click on a node, its *Properties Panel* opens on the right. This is where you configure the specific behavior of that node.

### Common Configurations

* **Parameters**: Input fields specific to the node (e.g., "To Email" for an email node).
* **Dynamic Values**: Many fields support `{{ variables }}` to use data from previous nodes.
* **Credentials**: Select or add API keys for integrations (e.g., OpenAI API Key, AWS Credentials).

## Visual Feedback

The editor provides visual cues about your workflow's health:

* **Red Border**: A node has missing required parameters or errors.
* **Green Pulse**: (In Watch Mode) The node is currently executing.
* **Green Checkmark**: (In Watch Mode) The node completed successfully.

***

**Next Steps**: Now that you know the interface, learn how [Execution Works](/lyznflow/editor/execution).