Skip to main content
CrystalFlow Logo

​
What is CrystalFlow?

CrystalFlow is a declarative workflow builder framework that provides everything you need to create custom workflow applications.

Visual Workflow Builder

Complete React components for drag-and-drop workflow creation

Powerful Execution Engine

Robust workflow engine with events, cancellation, and error handling

TypeScript Decorators

Define nodes with clean, declarative syntax

JSON Serialization

Save and load workflows as portable JSON

​
Quick Start

Choose your path based on what you’re building:

Visual Builder (Recommended)

Build visual workflow apps with drag-and-drop UI in React (5 minutes)

Core Package Only

Backend workflows and automation without UI (5 minutes)
Not sure which to choose? See Which Package Do I Need?

​
Core Principle

“We build the how, you focus on the what.”
CrystalFlow provides the complete workflow infrastructure—visual builder, execution engine, serialization, validation—so you can focus on building custom nodes for your specific domain.

​
Key Features

Define nodes using clean TypeScript decorators. No complex configuration needed.
@defineNode({ type: 'math.add', label: 'Add', category: 'Math' })
class AddNode extends Node {
  @Input({ type: 'number', label: 'A' })
  a: number = 0;
  
  @Output({ type: 'number', label: 'Result' })
  result: number;
  
  execute() {
    this.result = this.a + this.b;
  }
}
Complete React components for building visual workflow editors:
  • Drag-and-drop node palette
  • Visual canvas with pan/zoom
  • Property panel for node configuration
  • Save/load workflows as JSON
  • Real-time execution feedback
Production-ready execution with:
  • Serial execution (topological order)
  • Async node support
  • Event system with async handlers
  • Cancellation (timeout, user, external signal)
  • Error handling and recovery
  • Progress tracking
Save and load complete workflows as portable JSON:
  • Formal JSON schema
  • Version control friendly
  • Cross-platform compatible
  • Database storage ready

​
Architecture

CrystalFlow is built as a layered architecture: 
User Applications (your custom nodes)
         ↓
@crystalflow/react (visual builder, React components)
         ↓
React Flow (canvas rendering, UI primitives)
         ↓
@crystalflow/core (execution engine, validation)

​
Packages

@crystalflow/core

Core PackageNode system, workflow engine, execution, zero dependencies (except reflect-metadata)

@crystalflow/react

React PackageVisual workflow builder, components, hooks, React Flow integration

@crystalflow/types

Types PackageShared TypeScript type definitions for all packages

​
Next Steps

1

Choose Your Path

Decide between Visual Builder or Core-Only based on your needs.
2

Install Packages

Follow the Installation Guide for your chosen path.
3

Quick Start

Complete the Visual Builder Quick Start or Core-Only Quick Start.
4

Build Your App

Create your first complete application with Your First Workflow Builder.