Visual Workflow Editor for Building Data Flow Pipelines

Live Demo · Features · Screenshots · Getting Started · Architecture · Contributing

Eureka Flow is a powerful, browser-based visual workflow editor for creating and executing data processing pipelines. Build complex workflows by connecting pre-built blocks, execute them in real-time, and monitor execution status through WebSocket-based live updates.

• Drag-and-drop editor — Node placement on an infinite canvas with pan, zoom, and multi-select
• 100+ pre-built blocks — Organized by category (input, process, output) with configurable parameters
• Dual execution modes — Frontend blocks for instant feedback, backend blocks for heavy computation
• Real-time updates — WebSocket integration for live node execution status tracking
• Bezier curve connections — Port-based typed connections between nodes
• Undo/Redo — Full history management with auto-layout algorithm
• Touch gesture support — Tablet and mobile device compatibility
• Dark/Light theme — System preference detection with manual toggle
• i18n — English & Korean language support
• Auto-save — Configurable toggle with LocalStorage session continuity
• One-click API key — Secure postMessage-based key transfer from Eureka Codes Console

Dark Mode	Light Mode

graph TB
    subgraph App
        WEB["apps/web<br/>React Web App<br/><i>:3000</i>"]
    end

    subgraph Core["Core Libraries"]
        WEBCORE["web-core<br/>Auth & API Client"]
        UIKIT["ui-kit<br/>33 Radix Components"]
        SHARED["shared<br/>ErrorFallback, Loader"]
        THEME["theme<br/>Dark / Light Mode"]
    end

    subgraph Features["Feature Libraries"]
        FLOWS["flows<br/>Editor Logic & Stores"]
        SOCKET["socket<br/>WebSocket Layer"]
    end

    WEB --> WEBCORE & UIKIT & SHARED & THEME
    WEB --> FLOWS & SOCKET
    FLOWS --> WEBCORE
    SOCKET --> WEBCORE

eureka-flow/
├── apps/
│   └── web/                    # React web application
├── libs/
│   ├── flows/                  # Flow editor core (API, hooks, stores, types)
│   ├── socket/                 # WebSocket layer for real-time updates
│   ├── web-core/               # HTTP client, auth state, error handling
│   ├── ui-kit/                 # 33 shadcn/ui components (Radix UI)
│   ├── shared/                 # Common components (ErrorFallback, ApiKeyDialog)
│   └── theme/                  # Dark/light theme provider
├── scripts/                    # Build and deployment scripts
└── .github/                    # CI/CD workflows

Four Zustand stores manage different concerns:

FlowEditorPage (orchestrator)
├── useFlows hook (flow CRUD operations)
├── useBlocks hook (block registry loading)
├── useInitFlowSocket hook (WebSocket callbacks)
│
├── Header (file operations, save status)
├── Sidebar (block library by category)
├── WorkflowCanvas (imperative canvas ref)
│   ├── NodeBlock (status: IDLE → READY → RUNNING → COMPLETED/ERROR)
│   ├── ConnectionLine (SVG bezier curves)
│   └── useCanvasStore (nodes, connections)
└── DetailPanel (selected node configuration)

@flows/flows      // libs/flows/src/index.ts
@flows/socket     // libs/socket/src/index.ts
@flows/web-core   // libs/web-core/src/index.ts
@flows/ui-kit     // libs/ui-kit/src/index.ts
@flows/shared     // libs/shared/src/index.ts
@flows/theme      // libs/theme/src/index.ts
@flows/lib/utils  // libs/ui-kit/src/utils/index.ts

# Clone the repository
git clone https://github.com/lemoncloud-io/eureka-flow.git
cd eureka-flow

# Use the correct Node version
nvm use

# Install dependencies
yarn install

# Copy environment template
cp .env.example .env.local

# Start development server
yarn web:start

The app will be available at http://localhost:3000.

1. Visit flow.eureka.codes
2. Click "Create New Key" to open the Eureka Codes Console
3. Sign in and generate your API key
4. The key is automatically transferred back to Eureka Flow
5. Start building your workflows!

# Development
yarn web:start              # Start dev server on port 3000
yarn lint                   # Run ESLint
yarn lint:fix               # Run ESLint with auto-fix
yarn prettier               # Format code with Prettier

# Testing
yarn web:test               # Run tests

# Utilities
yarn clean:cache            # Clear build caches
yarn graph                  # View Nx dependency graph

yarn web:build              # Build web application
yarn web:build:dev          # Build for development environment
yarn web:build:prod         # Build for production environment

Deployment uses AWS S3 + CloudFront:

yarn web:deploy:dev         # Deploy to DEV
yarn web:deploy:prod        # Deploy to PROD

GitHub Actions workflows are configured for automated deployment:

┌─────────────────────┐     postMessage      ┌──────────────────────┐
│    Eureka Flow      │ <──────────────────> │   Eureka Codes       │
│ (flow.eureka.codes) │      (API Key)       │(console.eureka.codes)│
└─────────────────────┘                       └──────────────────────┘
         │                                              │
         │ 1. Click "Create New Key"                    │
         │ ────────────────────────────────────────────>│
         │                                              │
         │                          2. User signs in    │
         │                             & creates key    │
         │                                              │
         │ 3. API key sent via postMessage              │
         │ <────────────────────────────────────────────│
         │                                              │
         │ 4. State validation for security             │
         │                                              │
         ▼
   Key stored locally
   Ready to use!

• Named exports only (no default exports)
• Arrow functions: const fn = (): Type => {}
• 4-space indentation, single quotes, ES5 trailing commas
• TypeScript strict mode enabled
• ESLint enforces import ordering (React → @flows/* → relative → types)

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes using Conventional Commits (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the Apache License 2.0. See the LICENSE file for details.

• Eureka Codes — API key management and developer console
• Eureka Flows API — TypeScript types for the Flows API

Made with 💜 by LemonCloud

Website · GitHub