> For the complete documentation index, see [llms.txt](https://docs.discordbotfactory.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.discordbotfactory.com/pages/editor.md).

# Flow Editor

Learn all about the Flow Editor

### Node Editor

The Nodes Editor is a flowchart system with nodes that represent real actions and events in discord.

<details>

<summary><i class="fa-keyboard">:keyboard:</i> <strong>Editor Controls</strong> </summary>

* **Double-click / Right-click** = Open node selector (list of all nodes you can add)
* **Double-click node** = Open Node Properties menu
* **Left-click + drag** = Pan canvas
* **Left-click + drag with node(s) selected** = Move selected nodes
* **Left-click arrow on the top-left of a node** = Collapse node
* **Drag from output point to trigger point** = Connect nodes
* **Click a connected trigger point** = Break connection
* **Scroll / pinch** = Zoom canvas
* **Left-click node** = Select node
* **L** = Toggle custom lines
* **G** = Toggle grid
* **Ctrl + 0** = Reset zoom
* **Shift + left-click nodes** = Select multiple nodes
* **Ctrl/Cmd + drag** = Select nodes in a box
* **Ctrl/Cmd + A** = Select all nodes on canvas
* **Left-click canvas with node(s) selected/ESC** = Deselect node(s)
* **Ctrl/Cmd + C** = Copy selected node(s)
* **Ctrl/Cmd + V** = Paste selected node(s)
* **Alt + left-click node** = Duplicate node
* **Backspace with node(s) selected** = Delete selected node(s)
* **Ctrl/Cmd + Z** = Undo
* **Ctrl/Cmd + Shift + Z** = Redo

</details>

<figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2F8xQa3nKVrMNXqTkSpmTD%2Fimage.png?alt=media&amp;token=22964d6d-6bac-4fc8-a21e-f6dfb8f0cc73" alt=""><figcaption></figcaption></figure>

***

### Node Selector

<details>

<summary>Node Categories</summary>

Node categories are listed on the node selector and node companion.

<i class="fa-discord">:discord:</i> Discord Events

<i class="fa-messages">:messages:</i> Messaging

<i class="fa-globe">:globe:</i> Moderation

<i class="fa-hashtag">:hashtag:</i> Channels

<i class="fa-tower-cell">:tower-cell:</i> Dashboard

<i class="fa-database">:database:</i> Databases

<i class="fa-folder">:folder:</i> Files

<i class="fa-magnifying-glass">:magnifying-glass:</i> Logic

<i class="fa-image">:image:</i> Media

<i class="fa-users">:users:</i> Presence

<i class="fa-face-laugh-squint">:face-laugh-squint:</i> Reactions

<i class="fa-bell-on">:bell-on:</i> Social Events

<i class="fa-keyboard">:keyboard:</i> Utility

<i class="fa-pen">:pen:</i> Variables

<i class="fa-volume">:volume:</i> Voice Moderation

<i class="fa-link">:link:</i> APIs

</details>

The node selector can be accessed by pressing right click or double clicking while in the canvas.&#x20;

Click on a category on the left to view the nodes from each category. Click on a node name and you'll add it to the canvas. Search for node names, descriptions and categories at the top. Press escape or click off the popup to close it.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FaFRPjfULPcEgDCdP1BDE%2Fimage.png?alt=media&amp;token=9e16765f-322c-4881-b1c3-6f1cfa16fe33" alt="" width="373"><figcaption></figcaption></figure></div>

### Node Companion

The Node Companion is a popout sidebar nested within the Flow Editor, which provides a more stationary method of adding nodes to the canvas.&#x20;

It works in the same way as the [Node Selector](#node-selector), with a search bar, descriptions, and catagorised nodes. However, to add nodes to the canvas, you can either click on the node you'd like to add, or drag it into place.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FrP8nN1K1lNvCWjFCu7GH%2Fimage.png?alt=media&amp;token=01cfa001-2b27-4832-befd-4d9aa1506826" alt="" width="375"><figcaption></figcaption></figure></div>

### Logic Engine \[Experimental]

The logic engine is a spreadsheet type logic editor, which seamlessly integrates with the Node editor.

It offers a way to create bots without using the flow editor, which some users may perfer.

### Node Properties Menu&#x20;

Double click on a node to open its properties.&#x20;

Edit properties in the fields. Add variables by right clicking on a fields to open up the variables selector. Alternatively, click insert variables or start typing a variable in the field to bring up the variable auto-complete menu. Press escape or click out of the menu to close it. Press Save to save all changes.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FEHsl4JOFF2cRVXxwkxJj%2Fimage.png?alt=media&amp;token=adf70dad-3974-4f10-b59a-fd91d96a6857" alt="" width="563"><figcaption></figcaption></figure></div>

### Bot Log

View the live bot log in the right sidebar. Here you can view relevant information while your bot is running, to help you track bot usage and debug any issues.

Filter by Errors, Warnings, Satus, Commands, Node Activity and Info.&#x20;

You can also pause the bot log, and toggle auto-scroll, which will prevent the bot log from automatically scrolling to the most recent log.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FOx8cTDzi7hCXEwq3JqUG%2Fimage.png?alt=media&amp;token=4c364992-d520-49c3-892c-5c663c336679" alt="" width="290"><figcaption></figcaption></figure></div>

### Live debug&#x20;

The live debug is a live feed of each trigger and a detailed report on who, where and how it was triggered.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FtKbBfOJjyDKbYladACwF%2Fimage.png?alt=media&amp;token=7ac41885-f28a-48a6-b119-b3578b38b13c" alt="" width="375"><figcaption></figcaption></figure></div>

### Live Variables&#x20;

The Live Variables menu is a live feed of each variable and its sub-keys and its nested values as they update.&#x20;

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2Fn0S9NtERn2NCfZY24t3Q%2Fimage.png?alt=media&amp;token=5ed922d8-9fd8-4a02-9ce5-7289e24ade3e" alt="" width="375"><figcaption></figcaption></figure></div>

### Find

You can open the Find menu by clicking the <i class="fa-magnifying-glass">:magnifying-glass:</i> Find or by pressing Ctrl/CMD + F. Here you can search or browse through a list of all the nodes you have placed within your project, seperated by either the current flow tab, or through all tabs. This menu is intended to make navigating your project easier by providing a quick and compact list of your nodes, which you can immediately jump to by clicking any node.

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2FCc78gFK6tL3Ja2Y6USqC%2Fimage.png?alt=media&amp;token=d3b5abe9-558f-4a37-8c93-a188a03c8ec7" alt="" width="375"><figcaption></figcaption></figure></div>

### Project Variables

Project Variables are used throughout any project to store, fetch and send different types of data. However, they can seem complicated and daunting due to the numerous options for customisation.

#### Scope

Variable scopes control how they're saved, and come in two different types: **Local** and **Global**

| Local                                                                                  | Global                                                               |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Saves a value per node chain and the value is reset once it ends or the bot is stopped | Saves a value across chains, and is retained even after bot restarts |

#### Manual Variables&#x20;

Manual Variables are variables that are created directly inside the Project Variables menu. Just like all variables, they are assigned a name for referencing them, as well as a scope

<div data-with-frame="true"><figure><img src="https://2205442932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp603l6izRqmZfqN60GqQ%2Fuploads%2Fjq6HfB4farWvpPgCv6iU%2Fimage.png?alt=media&amp;token=2886c38d-7f80-4f66-8e82-4f0c904f08a6" alt=""><figcaption></figcaption></figure></div>