Visual workflow automation — design, execute, and monitor multi-step workflows from your browser.
Live Demo • Report Bug • Request Feature
FlowCraft is a browser-based workflow automation platform with a drag-and-drop canvas for building complex pipelines. Connect triggers, logic nodes, and actions into directed graphs that execute in topological order — with conditional branching, loops, retries, and real-time progress tracking.
- Visual Canvas — Drag-and-drop workflow editor powered by React Flow with snap-to-grid, auto-layout, and live connection validation
- 14 Node Types — HTTP requests, conditional branches, loops, delays, JavaScript code execution, JSON transforms, variables, webhooks, scheduled triggers, LLM integration, and more
- Dual Execution Engine — Run workflows client-side for instant feedback or server-side via Vercel Serverless Functions for production reliability
- Real-Time Execution — Watch nodes light up as they execute with live logs, timing data, and output inspection
- Workflow Library — Save, version, and reuse workflow templates across projects
- Webhook & Schedule Triggers — Start workflows from external HTTP calls or on a cron schedule
- Credential Management — Securely store and inject API keys and tokens into workflow nodes
- Authentication — User auth with Clerk, scoped workflows and execution history per user
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Redux Toolkit, RTK Query, Tailwind CSS 4 |
| Workflow Canvas | React Flow (@xyflow/react) |
| Build | Vite 6 |
| Backend | Vercel Serverless Functions (Node.js) |
| Database | Upstash Redis |
| Queue | Upstash QStash + Upstash Workflow |
| Auth | Clerk |
┌─────────────────────────────────────────────────────┐
│ React Frontend │
│ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │
│ │ Canvas │ │ Redux │ │ Client Engine │ │
│ │ (xyflow) │ │ Store │ │ (WorkflowExec) │ │
│ └──────────┘ └──────────┘ └───────────────────┘ │
└────────────────────┬────────────────────────────────┘
│ RTK Query
▼
┌─────────────────────────────────────────────────────┐
│ Vercel Serverless API │
│ /api/workflows /api/executions /api/webhooks │
│ /api/proxy /api/schedules /api/credentials │
│ ┌───────────────────────────────────────────────┐ │
│ │ Server Execution Engine │ │
│ │ (isolated, no React/Redux dependencies) │ │
│ └───────────────────────────────────────────────┘ │
└────────────────────┬────────────────────────────────┘
│
┌──────────┼──────────┐
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌───────┐
│ Upstash│ │ QStash │ │ Clerk │
│ Redis │ │ │ │ │
└────────┘ └────────┘ └───────┘
# Clone the repository
git clone https://github.com/pradhankukiran/visual-workflow-builder.git
cd visual-workflow-builder
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Fill in your Clerk, Upstash Redis, and QStash credentials
# Start development server
npm run dev| Variable | Description |
|---|---|
VITE_CLERK_PUBLISHABLE_KEY |
Clerk frontend key |
CLERK_SECRET_KEY |
Clerk backend key |
UPSTASH_REDIS_REST_URL |
Upstash Redis endpoint |
UPSTASH_REDIS_REST_TOKEN |
Upstash Redis token |
QSTASH_TOKEN |
QStash token for scheduled workflows |
| Node | Description |
|---|---|
| Webhook Trigger | Start workflows from external HTTP requests |
| Schedule Trigger | Run workflows on a cron schedule |
| HTTP Request | Make API calls with configurable method, headers, and body |
| JSON Transform | Transform data with JSONPath expressions |
| Conditional Branch | Route execution based on conditions |
| Loop | Iterate over arrays or repeat N times |
| Merge | Combine outputs from parallel branches |
| Delay | Pause execution for a specified duration |
| Code | Execute custom JavaScript with access to node inputs |
| Variable Set / Get | Store and retrieve workflow variables |
| Console Output | Log data for debugging |
| LLM | Integrate language model calls into workflows |
├── api/ # Vercel Serverless Functions
│ ├── _lib/ # Shared server utilities
│ │ └── engine/ # Server-side execution engine
│ ├── credentials/ # Credential management API
│ ├── executions/ # Execution history API
│ ├── webhooks/ # Webhook receiver endpoints
│ ├── workflows/ # Workflow CRUD API
│ └── proxy.ts # HTTP proxy with SSRF protection
├── src/
│ ├── app/ # Redux store configuration
│ ├── components/ # Shared UI components
│ ├── engine/ # Client-side execution engine
│ ├── features/ # Feature modules
│ │ ├── workflow/ # Canvas, nodes, edges
│ │ ├── execution/ # Run & monitor workflows
│ │ ├── credentials/ # Secret management
│ │ ├── versions/ # Workflow versioning
│ │ └── workflowLibrary/ # Template library
│ ├── hooks/ # Custom React hooks
│ └── types/ # Shared TypeScript types
└── vercel.json # Vercel deployment config
The app deploys to Vercel with zero configuration:
# Install Vercel CLI
npm i -g vercel
# Deploy
vercelSet your environment variables in the Vercel dashboard under Settings > Environment Variables.
Contributions are welcome! Please open an issue first to discuss what you'd like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
FlowCraft — Built with React Flow, Redux Toolkit, and Vercel Serverless