A modern, intuitive Kubernetes YAML generator that simplifies deployment configuration for developers and DevOps teams.

🔗 Try Kube Composer Now

Generate your first Kubernetes deployment in under 2 minutes!

Run Kube Composer locally in seconds:

docker pull same7ammar/kube-composer && docker run -d -p 8080:80 same7ammar/kube-composer

Then open http://localhost:8080 in your browser.

• Multi-Container Support - Configure multiple containers per deployment
• Advanced Container Configuration - Resources, environment variables, volume mounts
• Real-time Validation - Built-in configuration validation and error checking
• Interactive Forms - Intuitive interface for complex Kubernetes configurations

• Deployments - Full deployment configuration with replica management
• Services - ClusterIP, NodePort, and LoadBalancer service types
• Ingress - Complete ingress configuration with TLS support
• Namespaces - Custom namespace creation and management
• ConfigMaps - Configuration data storage and management
• Secrets - Secure storage for sensitive data (Opaque, TLS, Docker Config)
• Volumes - EmptyDir, ConfigMap, and Secret volume types

• Ingress Controllers - Support for multiple ingress classes
• TLS/SSL Configuration - Automatic HTTPS setup with certificate management
• Traffic Flow Visualization - Visual representation of request routing
• Port Mapping - Flexible port configuration and service discovery

• Live YAML Generation - See your YAML output update as you configure
• Architecture Visualization - Interactive diagrams showing resource relationships
• Traffic Flow Diagrams - Visual representation of request routing from Ingress to Pods
• Multi-Deployment Support - Manage multiple applications in a single project

• Environment Variables - Support for direct values, ConfigMap refs, and Secret refs
• Resource Limits - CPU and memory requests/limits configuration
• Volume Mounts - Flexible volume mounting with multiple volume types
• Labels & Annotations - Custom metadata for all resources
• Health Checks - Built-in configuration validation

• Mobile Responsive - Works perfectly on all devices
• No Registration Required - Start using immediately, no sign-up needed
• Export & Download - Production-ready YAML files
• Social Sharing - Share your configurations with the community

• Developers learning Kubernetes and container orchestration
• DevOps Engineers creating quick deployments and testing configurations
• Platform Engineers standardizing deployment configurations across teams
• Students understanding Kubernetes concepts and resource relationships
• Teams collaborating on infrastructure as code
• Anyone who wants to avoid writing YAML manually

• ✅ Deployments - Application deployment and replica management
• ✅ Services - Network access and service discovery
• ✅ Ingress - External access and traffic routing

• ✅ ConfigMaps - Configuration data management
• ✅ Secrets - Sensitive data storage (Opaque, TLS, Docker Config)
• ✅ Volumes - Persistent and ephemeral storage
• ✅ Namespaces - Resource organization and isolation

• ✅ Multi-Container Pods - Sidecar patterns and complex applications
• ✅ Environment Variables - Direct values and resource references
• ✅ Resource Quotas - CPU and memory limits/requests
• ✅ TLS Termination - HTTPS and certificate management
• ✅ Ingress Rules - Path-based and host-based routing

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone https://github.com/same7ammar/kube-composer.git cd kube-composer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser: Visit http://localhost:5173

npm run build

The built files will be in the dist directory.

This project is configured for automatic deployment to GitHub Pages:

1. Push to main branch - GitHub Actions automatically builds and deploys
2. Live at: https://same7ammar.github.io/kube-composer/
3. Custom domain: https://kube-composer.com

npm run deploy

src/ ├── components/ # React components │ ├── ArchitecturePreview.tsx # Visual architecture with traffic flow │ ├── DeploymentForm.tsx # Multi-container deployment configuration │ ├── DeploymentsList.tsx # Deployment management interface │ ├── NamespaceManager.tsx # Namespace creation and management │ ├── ConfigMapManager.tsx # ConfigMap creation and management │ ├── SecretManager.tsx # Secret creation and management │ ├── YamlPreview.tsx # Syntax-highlighted YAML output │ ├── ResourceSummary.tsx # Resource overview and validation │ ├── Footer.tsx # Enhanced footer with resources │ ├── SocialShare.tsx # Social media sharing │ └── SEOHead.tsx # SEO optimization ├── hooks/ # Custom React hooks │ └── useUsageCounter.ts # Usage statistics tracking ├── types/ # TypeScript definitions │ └── index.ts # Comprehensive type definitions ├── utils/ # Utility functions │ └── yamlGenerator.ts # Advanced YAML generation logic ├── App.tsx # Main application with tabbed interface ├── main.tsx # Entry point └── index.css # Global styles with Tailwind CSS 

apiVersion: apps/v1 kind: Deployment metadata: name: web-app namespace: production spec: replicas: 3 template: spec: containers: - name: web-server image: nginx:1.21 ports: - containerPort: 80 env: - name: DATABASE_URL valueFrom: secretKeyRef: name: db-credentials key: url - name: sidecar-proxy image: envoyproxy/envoy:v1.20 ports: - containerPort: 8080

apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: web-app-ingress annotations: nginx.ingress.kubernetes.io/rewrite-target: / spec: ingressClassName: nginx tls: - hosts: - example.com secretName: tls-secret rules: - host: example.com http: paths: - path: / pathType: Prefix backend: service: name: web-app-service port: number: 80

apiVersion: v1 kind: ConfigMap metadata: name: app-config data: database.host: "localhost" database.port: "5432" --- apiVersion: v1 kind: Secret metadata: name: app-secrets type: Opaque data: database.password: <base64-encoded> api.key: <base64-encoded>

We welcome contributions! Here's how:

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

• Follow existing code style and TypeScript patterns
• Add tests for new features and components
• Update documentation for new Kubernetes resources
• Ensure responsive design across all devices
• Test YAML generation for various configurations
• Validate Kubernetes resource compatibility

kubernetes yaml generator deployment docker containers devops k8s kubernetes deployment yaml editor kubernetes tools free kubernetes tool visual editor deployment generator ingress configmap secrets namespaces multi-container microservices

• ✨ Multi-Container Support - Configure complex pod specifications
• 🌐 Advanced Ingress - Complete ingress configuration with TLS
• 🗂️ Namespace Management - Create and organize custom namespaces
• 🔧 ConfigMap & Secret Management - Centralized configuration storage
• 📊 Traffic Flow Visualization - See how requests flow through your architecture
• 🔗 Environment Variable References - Link to ConfigMaps and Secrets
• 📱 Enhanced Mobile Experience - Improved responsive design
• 🎨 Visual Architecture Diagrams - Interactive resource visualization

• 🔄 StatefulSets - Stateful application support
• 📊 HorizontalPodAutoscaler - Automatic scaling configuration
• 🛡️ NetworkPolicies - Network security rules
• 📦 PersistentVolumes - Storage management
• 🔍 Resource Monitoring - Built-in observability

This project is licensed under the MIT License - see the LICENSE file for details.

• React - UI framework for component-based architecture
• TypeScript - Type safety and developer experience
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icon library
• Vite - Fast build tool and development server
• GitHub Pages - Free hosting platform
• Kubernetes Community - For the amazing container orchestration platform

If this project helped you, please consider giving it a ⭐ on GitHub!

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📧 Contact: Open an issue for any questions
• 🐦 Twitter: @Same7Ammar
• 💼 LinkedIn: Same Hammar