A visual, drag-and-drop CI/CD pipeline builder for GitHub Actions. Build complex workflows with ease using an intuitive interface.
- Visual Pipeline Builder: Drag and drop nodes to create GitHub Actions workflows
- Real-time YAML Preview: See the generated YAML code as you build your pipeline
- Pre-built Node Library: Extensive collection of common GitHub Actions nodes
- Node Configuration: Customize each node's parameters through an intuitive interface
- Dark Mode Support: Beautiful UI with light and dark theme options
- Responsive Design: Works seamlessly on desktop and mobile devices
- Frontend: Next.js 14, React 18, TypeScript
- UI Components: Radix UI, Tailwind CSS
- Pipeline Visualization: Custom Canvas Implementation
- Form Handling: React Hook Form with Zod validation
- YAML Processing: js-yaml
- Icons: Lucide React, React Icons
- Clone the repository:
git clone https://github.com/lkw1120/gitflux.git
cd gitflux- Install dependencies:
pnpm install- Run the development server:
pnpm dev- Open http://localhost:3000 in your browser.
- Add Nodes: Drag nodes from the left toolbox onto the canvas
- Connect Nodes: Click and drag from one node's output to another's input
- Configure Nodes: Select a node and configure its parameters in the right panel
- Preview YAML: Switch to the YAML tab to see the generated GitHub Actions workflow
- Export: Copy the YAML code and use it in your repository's
.github/workflows/directory
| Category | Nodes |
|---|---|
| Source Control | Checkout, Cache |
| Language & Runtime Setup | Setup Node.js, Setup Java, Setup Python, Setup Go, Setup .NET, Setup Ruby |
| Build & Package | Gradle Build, Maven Build, Docker Build & Push, Docker Setup Buildx |
| Testing & Quality | Super Linter, Codecov, SonarCloud Scan, Test Reporter |
| Security & Compliance | Dependency Review, CodeQL Analysis, Snyk Security |
| Cloud & Deployment | Configure AWS, Azure Login, GCP Auth, Deploy to Vercel, Deploy to Netlify, Deploy to Heroku |
| Mobile & Desktop | Android Build, iOS Build, Electron Build |
| Notifications & Communication | Slack Notification, Discord Notification, Teams Notification |
| Utilities & Tools | Upload Artifact, Download Artifact, Create Release, Semantic Release |
gitflux/
├── app/ # Next.js app directory
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── pipeline-*.tsx # Pipeline-related components
│ └── ...
├── lib/ # Utility functions and data
│ └── github-actions-nodes.json # Node definitions
├── public/ # Static assets
└── styles/ # Global styles
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- GitHub Actions for the workflow system
- Radix UI for the component library
- Tailwind CSS for the styling framework