{"id":28719954,"url":"https://github.com/kshitiz1403/serverless-workflow-builder","last_synced_at":"2026-05-08T13:18:38.934Z","repository":{"id":297895482,"uuid":"998230350","full_name":"Kshitiz1403/serverless-workflow-builder","owner":"Kshitiz1403","description":"A visual drag-and-drop editor for creating and managing Serverless Workflows with React and React Flow","archived":false,"fork":false,"pushed_at":"2025-06-08T07:02:31.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T07:26:53.635Z","etag":null,"topics":["drag-and-drop","editor","json","react","react-flow","serverless","serverless-workflow","visual-editor","workflow"],"latest_commit_sha":null,"homepage":"https://kshitiz1403.github.io/serverless-workflow-builder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kshitiz1403.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-08T06:32:55.000Z","updated_at":"2025-06-08T07:02:34.000Z","dependencies_parsed_at":"2025-06-08T07:37:24.833Z","dependency_job_id":null,"html_url":"https://github.com/Kshitiz1403/serverless-workflow-builder","commit_stats":null,"previous_names":["kshitiz1403/serverless-workflow-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kshitiz1403/serverless-workflow-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kshitiz1403%2Fserverless-workflow-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kshitiz1403%2Fserverless-workflow-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kshitiz1403%2Fserverless-workflow-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kshitiz1403%2Fserverless-workflow-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kshitiz1403","download_url":"https://codeload.github.com/Kshitiz1403/serverless-workflow-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kshitiz1403%2Fserverless-workflow-builder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259929972,"owners_count":22933536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","editor","json","react","react-flow","serverless","serverless-workflow","visual-editor","workflow"],"created_at":"2025-06-15T06:06:14.074Z","updated_at":"2026-05-08T13:18:38.928Z","avatar_url":"https://github.com/Kshitiz1403.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Serverless Workflow Builder\n\nA visual drag-and-drop editor for creating and managing [Serverless Workflows](https://serverlessworkflow.io/) with an intuitive React-based interface.\n\n[![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-Live%20Demo-blue?logo=github)](https://kshitiz1403.github.io/serverless-workflow-builder)\n[![React](https://img.shields.io/badge/React-18.2.0-blue?logo=react)](https://reactjs.org/)\n[![React Flow](https://img.shields.io/badge/React%20Flow-11.10.4-purple?logo=react)](https://reactflow.dev/)\n[![License](https://img.shields.io/badge/License-ISC-green.svg)](LICENSE)\n\n## 🚀 Live Demo\n\nTry the editor live at: **[https://kshitiz1403.github.io/serverless-workflow-builder](https://kshitiz1403.github.io/serverless-workflow-builder)**\n\n## ✨ Features\n\n### 🎨 Visual Workflow Design\n\n- **Drag \u0026 Drop Interface**: Intuitive node-based workflow creation\n- **Real-time Visual Feedback**: See your workflow structure as you build\n- **Smart Connection System**: Easy linking between workflow states\n- **Auto-layout**: Intelligent node positioning for imported workflows\n\n### 🔧 Comprehensive Node Support\n\n- **Start Node**: Workflow entry points\n- **Operation Node**: Function calls and actions\n- **Switch Node**: Conditional branching with data/event conditions\n- **Event Node**: Event-driven state transitions\n- **End Node**: Workflow termination points\n\n### 📊 Advanced Switch Conditions\n\n- **Data Conditions**: Expression-based branching (`.data == true`)\n- **Event Conditions**: Event-driven decision making\n- **Visual Condition Labels**: Clear condition identification on connections\n- **Default Fallback**: Support for default transition paths\n\n### 💾 Import/Export Capabilities\n\n- **JSON Import**: Load existing serverless workflow definitions\n- **JSON Export**: Generate compliant serverless workflow JSON\n- **Example Workflows**: Pre-built templates to get started\n- **File Upload**: Direct .json file import support\n\n### 🔄 Workflow Management\n\n- **Auto-save**: Automatic local storage backup\n- **New Workflow**: Quick workflow reset with confirmation\n- **Live Editing**: Real-time property updates\n- **Undo/Redo**: Undo/Redo the last applied actions\n\n### 🎯 Standards Compliance\n\n- **Serverless Workflow Spec**: Full compliance with [v0.9.x specification](https://github.com/serverlessworkflow/specification)\n- **Action Support**: Function references, expressions, and configurations\n- **Event Integration**: Complete event state and condition support\n- **Metadata Preservation**: Maintains workflow metadata on import/export\n\n## 🛠️ Technology Stack\n\n- **Frontend**: React 18.2.0\n- **Flow Library**: React Flow 11.x\n- **Icons**: Lucide React\n- **Styling**: Pure CSS with modern design\n- **Build Tool**: Create React App\n- **Deployment**: GitHub Pages\n\n## 📦 Installation\n\n### Prerequisites\n\n- Node.js 16+ (recommended: Node.js 18)\n- npm or yarn package manager\n\n### Local Development\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/kshitiz1403/serverless-workflow-builder.git\n   cd serverless-workflow-builder\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Start development server**\n\n   ```bash\n   npm start\n   ```\n\n4. **Open in browser**\n   Navigate to `http://localhost:3000`\n\n### Production Build\n\n```bash\nnpm run build\n```\n\nThe build artifacts will be stored in the `build/` directory.\n\n## 🎮 Usage Guide\n\n### Creating a New Workflow\n\n1. **Add Nodes**: Drag node types from the left palette onto the canvas\n2. **Connect Nodes**: Click and drag from output handles to input handles\n3. **Configure Properties**: Select nodes to edit their properties in the sidebar\n4. **Set Conditions**: For switch nodes, configure data or event conditions\n5. **Export**: Use the \"Export JSON\" button to generate workflow definition\n\n### Importing Existing Workflows\n\n1. **Click \"Import JSON\"** in the sidebar\n2. **Choose Method**:\n   - Paste JSON directly into the text area\n   - Upload a .json file\n   - Load example workflows\n3. **Click \"Import Workflow\"** to visualize\n\n### Node Types \u0026 Configuration\n\n#### Start Node\n\n- Entry point for workflow execution\n- Configure workflow metadata\n\n#### Operation Node\n\n- Define function calls and actions\n- Set function references and parameters\n- Configure retry policies and timeouts\n\n#### Switch Node\n\n- **Data Conditions**: Use expressions like `.data == true`\n- **Event Conditions**: Reference specific events\n- **Default Path**: Fallback transition option\n- Multiple output connections for each condition\n\n#### Event Node\n\n- Configure event references and timeouts\n- Set up event-driven state transitions\n- Handle event correlation and data filtering\n\n#### End Node\n\n- Terminate workflow execution\n- Define completion status and outputs\n\n## ⚙️ Configuration\n\n### API Settings\n\nThe application includes a configuration interface for connecting to external operations APIs:\n\n1. **Access Settings**: Click the **Settings** button in the sidebar footer\n2. **Configure API URL**: Set the base URL for your operations API (default: `http://localhost:3001`)\n3. **Test Connection**: Use the \"Test Connection\" button to verify API connectivity\n4. **Advanced Options**: Configure request timeout and retry attempts\n5. **Auto-save**: All settings are automatically saved to browser localStorage\n\n### Key Configuration Options:\n\n- **Base URL**: The operations API endpoint\n- **Request Timeout**: How long to wait for API responses (default: 30 seconds)\n- **Retry Attempts**: Number of retry attempts for failed requests (default: 3)\n- **Connection Status**: Real-time API connectivity indicator\n\nThe settings modal provides a health check feature that tests your API connection and displays the number of available operations.\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── components/\n│   ├── nodes/              # Node type definitions\n│   │   ├── StartNode.js\n│   │   ├── OperationNode.js\n│   │   ├── SwitchNode.js\n│   │   ├── EventNode.js\n│   │   └── EndNode.js\n│   ├── WorkflowEditor.js   # Main canvas component\n│   ├── Sidebar.js          # Node palette \u0026 properties\n│   ├── NodePropertiesEditor.js\n│   ├── JsonImporter.js     # Import functionality\n│   └── JsonExporter.js     # Export functionality\n├── styles/                 # CSS files\n└── example_workflows/      # Sample workflow definitions\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n### Development Setup\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature-name`\n3. Make your changes and test thoroughly\n4. Commit: `git commit -m \"Add feature description\"`\n5. Push: `git push origin feature-name`\n6. Create a Pull Request\n\n### Areas for Contribution\n\n- **New Node Types**: Implement additional serverless workflow states\n- **UI/UX Improvements**: Enhance the visual design and user experience\n- **Export Formats**: Add support for other workflow formats\n- **Validation**: Implement workflow validation and error checking\n- **Testing**: Add unit and integration tests\n- **Documentation**: Improve guides and examples\n\n## 📋 Roadmap\n\n- [ ] **Workflow Validation**: Real-time error checking and validation\n- [x] **Undo/Redo System**: Full action history management\n- [ ] **Collaborative Editing**: Multi-user workflow editing\n- [ ] **Cloud Storage**: Save workflows to cloud providers\n- [ ] **Template Library**: Expanded collection of workflow templates\n- [ ] **Advanced Debugging**: Workflow execution simulation\n- [x] **Export Formats**: Support for additional workflow standards\n- [ ] **Duplicate a project**\n\n## 🐛 Known Issues\n\n- Large workflows may experience performance degradation\n- Mobile responsiveness needs improvement\n- ~Undo/redo functionality not yet implemented~\n\n## 📄 License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Serverless Workflow Community](https://serverlessworkflow.io/) for the specification\n- [React Flow](https://reactflow.dev/) for the excellent flow library\n- [Lucide](https://lucide.dev/) for beautiful icons\n- [Create React App](https://create-react-app.dev/) for the project foundation\n\n## 📞 Support\n\n- **Issues**: [GitHub Issues](https://github.com/kshitiz1403/serverless-workflow-builder/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/kshitiz1403/serverless-workflow-builder/discussions)\n- **Documentation**: [Serverless Workflow Specification](https://github.com/serverlessworkflow/specification)\n\n---\n\n**Built with ❤️ for the Serverless Community**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkshitiz1403%2Fserverless-workflow-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkshitiz1403%2Fserverless-workflow-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkshitiz1403%2Fserverless-workflow-builder/lists"}