PipelineX is a full-stack visual workflow builder that allows users to design pipelines by dragging, connecting, and configuring modular nodes.
It combines an interactive React Flow–based editor with a FastAPI backend for structural validation, making it suitable for AI workflows, automation pipelines, and data processing graphs.

• Drag-and-drop node creation
• Connect nodes via input/output handles
• Grid-snapped canvas with minimap & controls
• Unified node abstraction for rapid extensibility
• Multi-select and keyboard-driven deletion

• Input
• Output
• Text (supports {{variable}} handles)
• LLM
• Number
• Condition
• Delay
• Merge
• API Request

All nodes share a common base abstraction, enabling consistent styling and behavior while minimizing duplicated logic.

• Auto-resizing text input
• Dynamic input handles generated from {{variable}}
• JavaScript-safe variable validation
• Real-time node layout updates

• Counts total nodes
• Counts total edges
• Detects whether the pipeline is a Directed Acyclic Graph (DAG)
• Prevents circular dependencies in workflows

• Clean, unified design using Tailwind CSS
• Smooth animations with Framer Motion
• Accessible modal notifications
• Keyboard shortcuts (Ctrl / Cmd + Enter to submit)

PipelineX/
│
├── backend/
│   └── main.py
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── nodes/
│   │   ├── store/
│   │   ├── components/
│   │   ├── submit.js
│   │   ├── toolbar.js
│   │   └── App.js
│   ├── .env
│   └── package.json
│
└── README.md

git clone https://github.com/DhirajKarangale/PipelineX.git
cd PipelineX

cd backend

Windows

python -m venv venv

macOS / Linux

python3 -m venv venv

Windows

venv\Scripts\activate

macOS / Linux

source venv/bin/activate

pip install -r requirements.txt
uvicorn main:app --reload

Backend runs at: http://localhost:8000

Create a .env file inside the frontend directory:

REACT_APP_API_URL=http://localhost:8000

Replace the URL if your backend is hosted elsewhere.

cd frontend
npm install
npm start

Frontend runs at: http://localhost:3000

1. Open the application in your browser.
2. Drag nodes from the toolbar onto the canvas.
3. Connect nodes using input/output handles.
4. Configure node properties inline.
5. Click Submit (or press Ctrl / Cmd + Enter).
6. View pipeline statistics and DAG validation in the modal.

• Persist node configuration to global store
• Execute pipelines step-by-step
• Export / import pipeline JSON
• Type-safe schema validation
• Execution logs & runtime visualization