Skip to main content
CrystalFlow offers two approaches depending on your use case.

@crystalflow/react + @crystalflow/core

Best for: Building visual workflow applications with drag-and-drop UI
Perfect if you want to:
  • Build a visual workflow editor for end users
  • Create no-code/low-code tools
  • Provide a drag-and-drop interface for workflow creation
  • Let users visually connect nodes on a canvas
  • Build SaaS applications with workflow builders
Includes:
  • Complete visual workflow builder component
  • React Flow integration for canvas rendering
  • Node palette, property panel, toolbar
  • Save/load workflows as JSON
  • Real-time execution feedback
  • All core execution features
npm install @crystalflow/react @crystalflow/core @crystalflow/types

​
Core Package Only (Backend/Headless)

@crystalflow/core

Best for: Backend workflows, automation, CLI tools, or custom UIs
Perfect if you want to:
  • Build backend automation workflows
  • Create CLI tools with workflow execution
  • Execute pre-defined workflows without UI
  • Build a completely custom UI from scratch
  • Use workflows in Node.js servers or serverless functions
Includes:
  • Node system with decorators
  • Workflow engine and execution
  • JSON serialization
  • Event system
  • Error handling and cancellation
  • Zero UI dependencies
npm install @crystalflow/core @crystalflow/types

​
Comparison

FeatureVisual BuilderCore Only
Visual canvas✓ Included✗ Not included
Drag & drop nodes✓ Included✗ Not included
Property panel✓ Included✗ Not included
Save/load UI✓ Included✗ Manual implementation
Workflow execution✓ Included✓ Included
Custom nodes✓ Supported✓ Supported
JSON serialization✓ Included✓ Included
React dependency✓ Required✗ Not required
Bundle size~250KB~50KB
Use caseEnd-user appsBackend/automation

​
Which Should I Choose?

  • You’re building a SaaS application with workflow features
  • Users need to create workflows visually
  • You want drag-and-drop functionality
  • You need a complete UI out of the box
  • You’re building a React application
  • You’re building backend automation
  • Workflows are pre-defined (not user-created)
  • You need lightweight execution (CLI, serverless)
  • You want to build a custom UI from scratch
  • You’re working in Node.js without React

​
Can I Use Both?

Yes! Many applications use both: Example: A SaaS platform where:
  • Frontend (React) - Users create workflows with @crystalflow/react
  • Backend (Node.js) - Server executes workflows with @crystalflow/core
  • Shared - Workflows are saved as JSON and executed on backend
// Frontend: User creates workflow visually
<WorkflowBuilder nodes={[...]} onSave={saveToServer} />

// Backend: Server executes saved workflow
const workflow = Workflow.fromJSON(savedWorkflow);
const result = await workflow.execute();

​
Next Steps

Visual Builder Quick Start

Start with the visual builder (5 minutes)

Core-Only Quick Start

Start with core package only

Installation Guide

Detailed installation instructions

Examples

See complete examples