Skip to main content

The Visual Editor

This is where you'll spend most of your time — the visual editor is your workspace for building bot flows.

Editor Overview​

The editor has four main areas:

┌──────────┬─────────────────────────────────┬──────────┐
│          │                                 │          │
│ Sidebar  │          Canvas                 │  Config  │
│ (Nodes)  │       (Your Flow)               │  Panel   │
│          │                                 │          │
└──────────┴─────────────────────────────────┴──────────┘
                    └── Bottom Bar ──┘

The Sidebar (Left)​

This is your toolbox of available nodes, organized into categories:

CategoryIconWhat's Inside
Triggers🎯Commands, messages, events
Actions📤Send messages, photos, files
Logic🔀Conditions, switches, routing
Flow🔄Questions, loops, forms
Data📊Transform, filter, variables
Utility🔧Delays, random, debug

Finding Nodes​

  • Browse categories by clicking the headers
  • Search by typing in the search box
  • Drag nodes from the sidebar onto the canvas

The Canvas (Center)​

This is where you build your flows. It's an infinite canvas where you can:

ActionHow
Pan (move around)Click + drag on empty space, or use scroll wheel
Zoom in/outScroll wheel, or pinch on trackpad
Fit to viewPress F or click the fit button

Working with Nodes​

ActionHow
Add a nodeDrag from sidebar, or right-click canvas
Select a nodeClick on it
Move a nodeClick + drag
Delete a nodeSelect + press Delete or Backspace
DuplicateSelect + press Ctrl/Cmd + D

Working with Wires​

ActionHow
Create wireDrag from output dot to input dot
Remove wireClick wire + press Delete, or drag away

The Config Panel (Right)​

When you select a node, its settings appear here.

Common Settings​

Most nodes have these settings:

  • Title/Name — What you call this node (for your reference)
  • Main Configuration — The node's primary settings
  • Advanced Options — Extra settings (usually collapsed)

Required vs Optional​

  • Required fields have a red asterisk *
  • Optional fields can be left empty
Missing Required Fields

If you forget a required field, the editor will highlight it in red when you try to save.

The Bottom Bar​

At the bottom of the editor, you'll find:

Analysis Panel​

Shows warnings and errors in your flow:

  • 🔴 Errors — Must fix before saving
  • 🟡 Warnings — Should review, but not blocking
  • 🟢 All good! — Your flow is valid

Status Bar​

Shows:

  • Current zoom level
  • Number of nodes
  • Last saved time

Keyboard Shortcuts​

Learn these to work faster:

ShortcutAction
Ctrl/Cmd + SSave
Ctrl/Cmd + ZUndo
Ctrl/Cmd + YRedo
Ctrl/Cmd + DDuplicate selected
DeleteDelete selected
FFit view to all nodes
EscapeDeselect all

Saving Your Work​

BotGami auto-saves your work, but you can also:

  1. Press Ctrl/Cmd + S to save manually
  2. Click the Save button in the toolbar
Deploy on Save

When you save, your changes go live immediately. There's no separate "deploy" step — users see updates right away!

Tips for Beginners​

Getting Comfortable
  1. Start simple — Begin with 2-3 nodes
  2. Use the minimap — It helps with larger flows
  3. Save often — Form the habit early
  4. Check the analysis panel — Fix errors as you go

Next Steps​