Skip to main content

​
Choose Your Path

Visual Workflow Builder

@crystalflow/react + core - For building visual workflow applications with React

Core Package Only

@crystalflow/core - For backend workflows, automation, and custom UIs
Not sure which to choose? See Which Package Do I Need?

​
Visual Builder Installation

For building visual workflow applications with drag-and-drop UI.

​
Prerequisites

  • Node.js v18 or higher
  • React v18 or higher
  • npm, pnpm, or yarn package manager

​
Install Packages

npm install @crystalflow/react @crystalflow/core @crystalflow/types reflect-metadata

​
Core-Only Installation

For backend workflows, automation, CLI tools, or custom UIs.

​
Prerequisites

  • Node.js v18 or higher
  • npm, pnpm, or yarn package manager
  • No React required

​
Install Packages

npm install @crystalflow/core @crystalflow/types reflect-metadata

​
TypeScript Configuration

Required for both paths. CrystalFlow requires specific TypeScript compiler options. Update your tsconfig.json:
tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
  • experimentalDecorators: Enables decorator syntax (@defineNode, @Input, @Output)
  • emitDecoratorMetadata: Required for reflect-metadata to work
  • moduleResolution: “bundler”: Recommended for modern build tools (Vite, webpack)
  • strict: Enables all strict type-checking options for better type safety

​
Import reflect-metadata

Add this import at the very top of your application entry point:
main.ts
import 'reflect-metadata';
import { Node, defineNode } from '@crystalflow/core';

// Rest of your code...
This import must come before any other CrystalFlow imports to ensure decorators work correctly.

​
Verify Installation

Create a simple test to verify everything is working:
test.ts
import 'reflect-metadata';
import { Node, defineNode, Input, Output } from '@crystalflow/core';

@defineNode({
  type: 'test.hello',
  label: 'Hello World',
  category: 'Test',
})
class HelloNode extends Node {
  @Input({ type: 'string', label: 'Name' })
  name: string = 'World';

  @Output({ type: 'string', label: 'Greeting' })
  greeting: string;

  execute() {
    this.greeting = `Hello, ${this.name}!`;
  }
}

console.log('CrystalFlow installed successfully!');
Run the test: 
npx tsx test.ts
If you see “CrystalFlow installed successfully!”, you’re ready to go!

​
Next Steps

Choose your path to continue:

Visual Builder Quick Start

Build a visual workflow application with React (5 min)

Core-Only Quick Start

Create backend workflows with core package (5 min)

Your First Workflow Builder

Complete tutorial for visual builder applications

Which Package?

Still not sure? Learn which package to use