Visual Workflow Builder
Relevant source files
The following files were used as context for generating this wiki page:
- FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md
- frontend/VISUAL_BUILDER_QUICK_REFERENCE.md
- DDD_IMPLEMENTATION_REPORT_SPEC_FRN_001.md
- FRONTEND_IMPLEMENTATION_SUMMARY.md
- frontend/QUICK_REFERENCE.md
- frontend/src/components/workflows/builder/WorkflowBuilder.tsx
- frontend/src/components/workflows/builder/WorkflowCanvas.tsx
- frontend/src/lib/stores/canvas-store.ts
The Visual Workflow Builder is a core component of the GoHighLevel Clone automation platform, providing a drag-and-drop interface for creating, editing, and managing complex automation workflows. It integrates React Flow to represent workflows as a series of connected nodes, including triggers, actions, and conditional logic. The builder is designed to be highly interactive, featuring a collapsible sidebar for step selection and a dynamic configuration panel for fine-tuning individual workflow steps.
This system centralizes the logic for automation creation, ensuring type safety and state persistence through a combination of Zustand stores and auto-save mechanisms. It supports a wide array of 51 step types—comprising 26 triggers and 25+ actions—organized by functional categories to streamline the user experience.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:12-25, FRONTEND_IMPLEMENTATION_SUMMARY.md:42-53
Core Architecture
The architecture of the Visual Workflow Builder follows a modular design centered around the WorkflowBuilder main container. It utilizes specialized stores for state management and dedicated panels for canvas interaction and step configuration.
Component Hierarchy
The diagram above illustrates the structural relationship between the main container and its primary sub-components.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:155-168, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:12-22
System Components Overview
| Component | Description |
|---|---|
| WorkflowBuilder | The main parent container managing high-level layout, auto-save intervals, and navigation guards. |
| WorkflowCanvas | The central workspace using React Flow for node visualization, connection management, and viewport controls. |
| BuilderSidebar | A collapsible panel containing the palette of 51 step types organized by categories. |
| ConfigurationPanel | A slide-out panel that dynamically generates configuration forms based on the selected node's schema. |
| StepNode | A custom React Flow node component that handles type-specific styling and status indicators. |
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:157-170, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:14-22
Workflow Canvas & Node Management
The canvas serves as the primary interaction area, powered by @xyflow/react v12.0.0. It facilitates the visual arrangement of automation logic through a node-link diagram.
Canvas Features
- Navigation Controls: Includes mini-map navigation, zoom levels (0.1x to 2x), and a fit-to-screen button.
- Auto-Layout: Implements a vertical stack algorithm to automatically position newly added steps.
- Undo/Redo System: Maintains a 50-step history buffer to allow users to revert or re-apply changes.
- Input/Output Handles: Custom handles on nodes facilitate smooth connections, including animated paths for conditional logic.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:33-55, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:112-127
Node Types and Styling
Nodes are color-coded based on their functional category to provide immediate visual feedback on the workflow structure.
| Type | Color | Purpose |
|---|---|---|
| Trigger | Blue (#3b82f6) | Initiates the workflow based on an event. |
| Action | Green (#22c55e) | Performs a specific task (e.g., sending an email). |
| Condition | Orange (#f97316) | Diverts flow based on if/else logic. |
| Wait | Purple (#a855f7) | Delays the workflow for a specified period. |
| Goal | Pink (#ec4899) | Tracks conversion or completion points. |
Sources: frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:101-109, FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:52-54
State Management and Persistence
The builder utilizes two primary Zustand stores to manage local and server state separately.
Data Flow Sequence
The sequence diagram demonstrates how state changes are handled between the canvas, configuration, and the persistence layer.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:214-235, FRONTEND_IMPLEMENTATION_SUMMARY.md:113-132
Store Definitions
- Canvas Store: Manages node/edge arrays, selection state, viewport data, and history (past/future arrays).
- Workflow Store: Manages the active workflow object, unsaved changes flags, and draft persistence using local storage.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:214-235, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:57-73
Step Configuration & Form Generation
The ConfigurationPanel utilizes dynamic form generation to provide a tailored editing experience for each of the 51 step types.
Form Field Types
Forms are built using configFields defined in step-types.ts, supporting various input methods:
- Text & Textarea: For basic inputs and long-form content.
- Select & Multiselect: For category or tag selection.
- Datetime/Date/Time: For scheduling and wait steps.
- Toggles: For boolean settings.
- Specialized: Email, Phone, and Tag inputs with built-in validation.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:101-118, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:75-88
Merge Field Support
The configuration forms support dynamic placeholders using the {{contact.field}} syntax. This allows users to inject contact-specific data, such as {{contact.firstName}} or {{contact.email}}, into communication actions like emails or SMS messages.
Sources: FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:120-124, frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:90-99
User Interaction and Shortcuts
To improve efficiency, the builder implements several keyboard shortcuts and responsive interaction patterns.
| Shortcut | Action |
|---|---|
Ctrl+S / Cmd+S | Manual Save |
Ctrl+Z / Cmd+Z | Undo last canvas action |
Ctrl+Shift+Z | Redo action |
Delete / Backspace | Remove selected node |
Escape | Deselect current node |
Ctrl+F | Focus search in Sidebar |
Sources: frontend/VISUAL_BUILDER_QUICK_REFERENCE.md:24-32, FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:144-150
Implementation Status Summary
The Visual Workflow Builder is currently at approximately 65% completion, with core visualization and configuration features finalized.
- Completed Phases (4-7): Canvas integration, sidebar palette, configuration forms, and auto-save management.
- Pending Features: Real-time collaboration, visual branching for conditional logic, multi-select nodes, and full backend API integration.
Sources: FRONTEND_IMPLEMENTATION_SUMMARY.md:5-15, FRONTEND_PHASES_4_7_IMPLEMENTATION_SUMMARY.md:286-298
The Visual Workflow Builder provides a robust foundation for the automation engine, combining an intuitive visual interface with strict type safety and a reliable auto-save system. Its modular architecture ensures it can scale as new action types and advanced logic features are introduced.