{"id":32499483,"url":"https://github.com/qweralfredo/ebpf-design","last_synced_at":"2026-05-13T23:31:39.920Z","repository":{"id":320028968,"uuid":"1080506289","full_name":"qweralfredo/ebpf-design","owner":"qweralfredo","description":"eBPF made simple - 🤓 Learn or Die 💀","archived":false,"fork":false,"pushed_at":"2025-10-21T13:58:37.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-21T15:34:19.847Z","etag":null,"topics":["ebpf","reactflow"],"latest_commit_sha":null,"homepage":"https://ebpf.learn-or-die-io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qweralfredo.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-21T13:17:18.000Z","updated_at":"2025-10-21T13:58:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"adf7e4bb-34b1-4f10-a8dd-0b69b40f60a2","html_url":"https://github.com/qweralfredo/ebpf-design","commit_stats":null,"previous_names":["qweralfredo/ebpf-design"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/qweralfredo/ebpf-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qweralfredo%2Febpf-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qweralfredo%2Febpf-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qweralfredo%2Febpf-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qweralfredo%2Febpf-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qweralfredo","download_url":"https://codeload.github.com/qweralfredo/ebpf-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qweralfredo%2Febpf-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33004128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ebpf","reactflow"],"created_at":"2025-10-27T16:00:33.414Z","updated_at":"2026-05-13T23:31:39.915Z","avatar_url":"https://github.com/qweralfredo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eBPF Low-Code Builder\n\n\u003e **Created by Alfredo Rosa** - [LinkedIn Profile](https://www.linkedin.com/in/alfredo-rosa/)\n\u003e \n\u003e ⚠️ **Development Status**: This project is currently under active development. The beta version will be available soon.\n\nA modern ReactFlow-based canvas for building eBPF programs visually, based on ReactFlow official examples documentation.\n\n## 🚀 Features\n\n- **ReactFlow v12+**: Implementation with the latest version\n- **Custom Nodes**: \n  - AttachmentNode - For program entry points and attachment types\n  - ConditionalNode - For conditional logic and branching\n  - MapActionNode - For eBPF map operations\n  - ReturnActionNode - For program return actions\n  - PacketAccessNode - For packet data manipulation\n  - VariableNode - For variable storage and manipulation\n  - CounterNode - For statistics and counters\n- **Custom Edges**:\n  - ButtonEdge - Edge with delete button\n- **Advanced Controls**: \n  - Add nodes randomly\n  - Add node in center\n  - Delete selected elements\n  - Zoom in/out, Fit View, Center\n- **UI Components**:\n  - MiniMap with custom colors\n  - Controls with custom styling\n  - Background with dot pattern\n  - Panels for information and controls\n- **🌐 WebVM Integration**:\n  - Test directly in browser-based Linux environment\n  - One-click WebVM setup\n  - No local installation required\n  - Perfect for prototyping and demos\n- **🖥️ v86 Integration**:\n  - Full x86 virtual machine in browser (Arch Linux)\n  - Complete Linux environment with package manager\n  - Advanced testing with all system tools\n  - Comprehensive eBPF development capabilities\n\n## 🛠 Technologies\n\n- React 18.3.1\n- @xyflow/react 12.3.2\n- Vite 5.4.10\n- Tailwind CSS 3.4.4\n\n## 📦 Installation\n\n```bash\ncd builder-new\nnpm install\n```\n\n## 🏃‍♂️ Run\n\n```bash\nnpm run dev\n```\n\nThe application will be available at `http://localhost:3001`\n\n## 🐳 Docker\n\n### Quick Start with Docker\n\nPull and run the latest image from Docker Hub:\n\n```bash\ndocker run -d -p 3007:3007 qweralfredo/ebpf-design:latest\n```\n\nThen access the application at `http://localhost:3007`\n\n### Using Docker Compose\n\n```bash\ndocker-compose up -d\n```\n\n### Building from Source\n\n```bash\ndocker build -t ebpf-design .\ndocker run -d -p 3007:3007 ebpf-design\n```\n\n## 🌐 WebVM.io - Try Online\n\nRun eBPF Low-Code Builder directly in your browser without installing anything!\n\n**Access via WebVM**: [WebVM.io](https://webvm.io/)\n\n### Quick Start in WebVM:\n\n1. Open [WebVM.io](https://webvm.io/)\n2. Clone the repository:\n   ```bash\n   git clone https://github.com/qweralfredo/ebpf-design.git\n   cd ebpf-design\n   ```\n\n3. Install and run:\n   ```bash\n   npm install\n   npm run dev\n   ```\n\n4. Access the application at the provided local URL (typically `http://localhost:5173` or similar)\n\n### Benefits of WebVM:\n- ✅ No local installation required\n- ✅ Full Linux environment in browser\n- ✅ Perfect for testing and demos\n- ✅ Access from any device\n\n## 🖥️ v86 - Full x86 Virtual Machine\n\nRun eBPF Builder in a complete x86 virtual machine with Arch Linux!\n\n**Access via v86**: [v86 Emulator](https://copy.sh/v86/?profile=archlinux)\n\n### Quick Start in v86:\n\n1. Open [v86 with Arch Linux](https://copy.sh/v86/?profile=archlinux)\n2. Wait for boot (30-60 seconds)\n3. Clone and setup:\n   ```bash\n   git clone https://github.com/qweralfredo/ebpf-design.git\n   cd ebpf-design\n   npm install\n   npm run dev\n   ```\n\n4. Access at `http://localhost:3007`\n\n### Benefits of v86:\n- ✅ Full x86 processor emulation\n- ✅ Complete package manager (pacman)\n- ✅ All system tools available\n- ✅ Persistent storage between sessions\n- ✅ Comprehensive testing environment\n- ✅ Learn eBPF with full Linux access\n\n### v86 vs WebVM Comparison:\n\n| Feature | v86 | WebVM |\n|---------|-----|-------|\n| Boot Time | 30-60s | 5-10s |\n| Environment | Full PC | Linux Kernel |\n| Tools | Complete system | Limited |\n| Performance | Slower | Faster |\n| Use Case | Comprehensive | Quick tests |\n\nFor detailed information, see [V86.md](./V86.md) and [V86-INTEGRATION.md](./V86-INTEGRATION.md)\n\n## 📁 Structure\n\n```\nsrc/\n├── components/\n│   ├── NodeTypes/       # eBPF-specific custom nodes\n│   ├── Sidebar.jsx      # Node palette with drag \u0026 drop\n│   └── ConfigPanel.jsx  # Configuration panel\n├── pages/\n│   └── EBPFFlowBuilder.jsx # Main flow component\n├── data/\n│   └── ebpfSpec.js      # eBPF specifications and initial elements\n├── utils/\n│   └── ebpfGenerator.js # Code generation utilities\n├── styles/\n│   └── global.css       # Global styles with Tailwind\n├── App.jsx              # Main app component\n└── main.jsx            # Entry point\n```\n\n## 🎯 Features\n\n### Available Nodes\n- **Program Entry**: Define eBPF program attachment points\n- **Conditional Logic**: If/else branching with condition templates\n- **Map Operations**: Interact with eBPF maps (lookup, update, delete)\n- **Packet Access**: Read/write packet data with bounds checking\n- **Variables**: Store and manipulate data with type safety\n- **Counters**: Increment statistics and monitoring counters\n- **Return Actions**: Program return with verdicts (PASS, DROP, etc.)\n\n### Interactions\n- Drag nodes from sidebar to canvas\n- Click nodes in sidebar to add to center\n- Connect nodes by dragging from handles\n- Configure node properties with forms\n- Real-time code generation preview\n\n### Controls\n- Add nodes dynamically from palette\n- Generate eBPF C code from visual flow\n- Clear canvas to start fresh\n- Toggle sidebar visibility\n- Copy/download generated code\n\n## 🎨 Customization\n\nThe project is structured for easy customization:\n\n- **Colors**: Defined in Tailwind CSS classes\n- **Nodes**: Add new types in `/components/NodeTypes/`\n- **Code Generation**: Modify templates in `/utils/ebpfGenerator.js`\n- **Specifications**: Update node definitions in `/data/ebpfSpec.js`\n\n## 📚 Based on Documentation\n\nThis project follows best practices from ReactFlow official documentation:\n- https://reactflow.dev/examples/overview\n- https://reactflow.dev/api-reference\n- https://reactflow.dev/learn\n\n## 📖 Additional Resources\n\nFor detailed instructions on using WebVM.io, see [WEBVM.md](./WEBVM.md)\n\nFor WebVM Integration Plugin documentation, see [WEBVM-INTEGRATION.md](./WEBVM-INTEGRATION.md)\n\nFor detailed instructions on using v86, see [V86.md](./V86.md)\n\nFor v86 Integration Plugin documentation, see [V86-INTEGRATION.md](./V86-INTEGRATION.md)\n\nFor comprehensive testing guide, see [TESTING.md](./TESTING.md)\n\n## �🔧 Build\n\n```bash\nnpm run build\n```\n\n## 📝 Notes\n\n- Uses ReactFlowProvider for accessing flow methods\n- Implements modern hooks (useNodesState, useEdgesState, useReactFlow)\n- Full TypeScript support (configuration ready)\n- Responsive and accessible styling with Tailwind CSS\n- Real-time eBPF code generation with validation\n- Professional node palette with categorization","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqweralfredo%2Febpf-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqweralfredo%2Febpf-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqweralfredo%2Febpf-design/lists"}