Skip to main content

​
The Visual Editor

VibeFlow’s visual editor lets you build backend workflows by connecting nodes on a canvas. Right-click to add nodes, click to configure them, and connect them to implement your API endpoints.

​
Editor Layout

​
1. Flow Editor (Left Panel)

Your visual workspace where you:
  • Right-click to open the context menu
  • Select nodes from the context menu
  • Connect nodes by their handles
  • Configure nodes by clicking on them

​
2. File Explorer (Right Panel)

Browse your project structure:
  • Explore and modify the code

​
3. Preview Panel (Right Panel)

See your running application:
  • Live preview of your frontend
  • Real-time updates as you build
  • Test your API endpoints instantly

​
Working with Nodes

​
Adding Nodes

1

Right-Click Canvas

Right-click anywhere on the canvas to open the context menu with available nodes.
2

Choose Your Node

Select the node you need from the categorized context menu.
3

Configure Settings

Click the newly added node to configure its settings in the properties panel.

​
Connecting Nodes

Nodes have connection handles that you use to implement your workflow. To connect nodes:
  1. Click and drag from a node’s output handle
  2. Drop on another node’s input handle
  3. The connection implements the workflow step

​
Node Configuration

Nodes have two states:
  • Valid - All required parameters are configured
  • Invalid - Missing required configuration (shown with error indicators)
Click any node to configure its settings in the properties panel.

​
Building API Endpoints

When you connect nodes, you’re implementing the logic flow for an API endpoint. For example: 
Frontend Element → Mutation → Return
This creates an API endpoint that:
  1. Receives the request from your frontend
  2. Executes database mutations
  3. Returns the response

​
Next Steps

Explore Node Types

Learn about all available nodes and their capabilities