5.2 Workflow Editor Overview

The Pop Workflow Editor is a powerful and flexible visual-building interface that allows users to create automated processes, AI apps, utilities, document workflows, and complete business logic systems in the most intuitive way.

This chapter helps you fully understand the structure, interactions, and functional areas of the editor so you can quickly get started and build your own visual workflows.

🧭 1. Editor Interface Structure

The Pop Workflow Editor is composed of five core regions:

┌──────────────────────────────┬──────────────────────────────┐
│ ① Left: Node Panel           │ ② Right: Canvas (Flow Area)  │
│                              │                              │
│ ③ Top: Toolbar               │                              │
├──────────────────────────────┼──────────────────────────────┤
│ ④ Right: Inspector           │ ⑤ Bottom: Execution Log       │
└──────────────────────────────┴──────────────────────────────┘

Below is the detailed explanation for each region.

① Node Panel

The left-side panel contains all built-in Pop workflow nodes:

AI Nodes (LLM, image models, multimodal models)
File Nodes (read/write, generate PDF / DOCX / Excel / images)
Network Nodes (HTTP request, Webhook, URL fetch)
Database Nodes (MySQL / Redis / PostgreSQL)
Logic Nodes (condition, loop, wait, branch, merge)
Utility Nodes (JSON processing, string handling, chart generation, date/time nodes)
MCP Tool Nodes (local/remote MCP tools)

Typical actions:

Drag nodes onto the canvas
Search nodes (type to filter)
Favorite frequently used nodes
Browse node categories (AI / Tools / Database / File / etc.)

② Workflow Canvas

The canvas is the main stage where you construct workflows. You can:

✔ Drag Nodes

Move nodes from the panel into the canvas.

✔ Draw Connections

Drag from a node’s output to another node’s input.

✔ Create Branches

Condition nodes automatically generate true/false branches.

✔ Edit Node Configurations

Click a node to open its settings in the Inspector.

✔ Canvas Interactions

Zoom in/out
Auto-layout
Select multiple nodes
Undo/redo
Grid background for alignment

The canvas is powered by ReactFlow, providing top-tier interaction experience and extensibility.

③ Toolbar

Located at the top, includes:

Icon	Function
▶️	Run workflow
🧪	Run a specific node (Debug)
💾	Save workflow
📦	Export workflow JSON
📥	Import workflow JSON
🧩	Publish as application
🔍	Zoom, reset view
🧭	Auto-layout

The toolbar is essential for workflow productivity.

④ Inspector

The right-side panel is used to configure the selected node or workflow settings.

When a node is selected, the Inspector displays:

Node name
Node description
Input parameters
Config parameters
Output definitions
Variable binding

When nothing is selected, workflow-level settings appear:

Workflow name
Workflow description
Inputs
Outputs
Global variables

The Inspector is essentially the “brain” of the workflow.

⑤ Execution Log

Located at the bottom, it includes:

Execution records for each node
Node inputs/outputs
Error messages
Execution time
Printed logs (console output)
Debug information

Supports:

Expand / collapse
Multi-run history
Step-by-step inspection

This is one of the most important tools for debugging workflows.

🎛 Interaction Features

✔ Node Tooltips

Hover any node to see its description.

✔ Smart Connections

Automatically detects compatible input/output types.

✔ Keyboard Shortcuts

⌘+S — Save
Delete — Remove node
⌘+Z — Undo
⌘+Shift+Z — Redo

✔ Multi-Window Execution

Same workflow can be executed in multiple run windows.

📌 Summary

The Workflow Editor is a core part of Pop, offering:

Clear and visual process-building interface
Powerful node configuration capabilities
Full debugging tools
Efficient layout and interactions
Extensibility via custom & MCP tools