Skip to main content

Overview

@xond/workflow provides a visual workflow designer and execution runtime for building complex, multi-step processes. It enables you to create approval workflows, task routing, user onboarding flows, and any process that requires sequential steps with conditional logic.

Key Capabilities​

  • Visual Workflow Designer – Drag-and-drop workflow editor built on ReactFlow
  • Node Types – Start, State, Decision, and End nodes for building workflows
  • UI Forms – Built-in form types (OTP, Password, PIN, Custom Forms) and model-based forms
  • Actions – NEXT, SKIP, SUBMIT, VERIFY, and custom function actions
  • Conditional Logic – Decision nodes with formula-based conditions
  • Execution Runtime – Execute workflows as instances with state management
  • Storage Options – Support for memory, local storage, and database storage
  • Integration – Seamless integration with @xond/api generated services

What It Offers​

Workflow Editor​

Visual designer for creating workflows:

  • Drag-and-drop nodes from toolbar onto canvas
  • Connect nodes with edges to define flow
  • Configure nodes with UI forms, actions, and execution logic
  • Validate workflows before saving
  • Save workflows to database

Workflow Execution​

Runtime for executing workflows:

  • Create workflow instances from workflow definitions
  • Navigate through nodes based on user input and conditions
  • Store workflow state (values, current node, context)
  • Handle actions (submit, verify, skip, etc.)
  • Track progress through workflow steps

Node Types​

  • Start Node – Entry point of workflow
  • State Node – Regular step with UI form
  • Decision Node – Conditional branching based on values
  • End Node – Exit point of workflow

UI Types​

Built-in UI types for nodes:

  • DISCLAIMER_PAGE – Terms and conditions page
  • OTP_FORM – One-time password input
  • PASSWORD_FORM – Password input
  • PIN_FORM – PIN code input
  • FIDO_FORM – WebAuthn/FIDO authentication
  • CUSTOM_FORM – Custom React component
  • MODEL_FORM – Auto-generated form from model
  • TABLE_FORM – Table-based form
  • END_PAGE – Completion page

Architecture​

@xond/workflow consists of:

  1. WorkflowEditor – Visual designer component
  2. WorkflowUI – Runtime UI component for displaying current node
  3. WorkflowActions – Action buttons component
  4. Hooks – useWorkflows, useWorkflowInstance for managing workflow state
  5. Form Registry – Registry for custom forms
  6. API Integration – Functions for saving/loading workflows and executing actions

Common Use Cases​

  • User Registration – Multi-step registration with verification
  • Approval Workflows – Request → Review → Approve/Reject flows
  • Onboarding – Guided setup processes
  • Data Collection – Multi-step forms with conditional fields
  • Authentication Flows – Password reset, 2FA setup, etc.

Documentation Structure​

Next Steps​

Start by learning how to create your first workflow.