https://github.com/qweralfredo/ebpf-design
eBPF made simple - 🤓 Learn or Die 💀
https://github.com/qweralfredo/ebpf-design
ebpf reactflow
Last synced: about 1 month ago
JSON representation
eBPF made simple - 🤓 Learn or Die 💀
- Host: GitHub
- URL: https://github.com/qweralfredo/ebpf-design
- Owner: qweralfredo
- License: apache-2.0
- Created: 2025-10-21T13:17:18.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-21T13:58:37.000Z (8 months ago)
- Last Synced: 2025-10-21T15:34:19.847Z (8 months ago)
- Topics: ebpf, reactflow
- Language: JavaScript
- Homepage: https://ebpf.learn-or-die-io
- Size: 111 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eBPF Low-Code Builder
> **Created by Alfredo Rosa** - [LinkedIn Profile](https://www.linkedin.com/in/alfredo-rosa/)
>
> ⚠️ **Development Status**: This project is currently under active development. The beta version will be available soon.
A modern ReactFlow-based canvas for building eBPF programs visually, based on ReactFlow official examples documentation.
## 🚀 Features
- **ReactFlow v12+**: Implementation with the latest version
- **Custom Nodes**:
- AttachmentNode - For program entry points and attachment types
- ConditionalNode - For conditional logic and branching
- MapActionNode - For eBPF map operations
- ReturnActionNode - For program return actions
- PacketAccessNode - For packet data manipulation
- VariableNode - For variable storage and manipulation
- CounterNode - For statistics and counters
- **Custom Edges**:
- ButtonEdge - Edge with delete button
- **Advanced Controls**:
- Add nodes randomly
- Add node in center
- Delete selected elements
- Zoom in/out, Fit View, Center
- **UI Components**:
- MiniMap with custom colors
- Controls with custom styling
- Background with dot pattern
- Panels for information and controls
- **🌐 WebVM Integration**:
- Test directly in browser-based Linux environment
- One-click WebVM setup
- No local installation required
- Perfect for prototyping and demos
- **🖥️ v86 Integration**:
- Full x86 virtual machine in browser (Arch Linux)
- Complete Linux environment with package manager
- Advanced testing with all system tools
- Comprehensive eBPF development capabilities
## 🛠 Technologies
- React 18.3.1
- @xyflow/react 12.3.2
- Vite 5.4.10
- Tailwind CSS 3.4.4
## 📦 Installation
```bash
cd builder-new
npm install
```
## 🏃♂️ Run
```bash
npm run dev
```
The application will be available at `http://localhost:3001`
## 🐳 Docker
### Quick Start with Docker
Pull and run the latest image from Docker Hub:
```bash
docker run -d -p 3007:3007 qweralfredo/ebpf-design:latest
```
Then access the application at `http://localhost:3007`
### Using Docker Compose
```bash
docker-compose up -d
```
### Building from Source
```bash
docker build -t ebpf-design .
docker run -d -p 3007:3007 ebpf-design
```
## 🌐 WebVM.io - Try Online
Run eBPF Low-Code Builder directly in your browser without installing anything!
**Access via WebVM**: [WebVM.io](https://webvm.io/)
### Quick Start in WebVM:
1. Open [WebVM.io](https://webvm.io/)
2. Clone the repository:
```bash
git clone https://github.com/qweralfredo/ebpf-design.git
cd ebpf-design
```
3. Install and run:
```bash
npm install
npm run dev
```
4. Access the application at the provided local URL (typically `http://localhost:5173` or similar)
### Benefits of WebVM:
- ✅ No local installation required
- ✅ Full Linux environment in browser
- ✅ Perfect for testing and demos
- ✅ Access from any device
## 🖥️ v86 - Full x86 Virtual Machine
Run eBPF Builder in a complete x86 virtual machine with Arch Linux!
**Access via v86**: [v86 Emulator](https://copy.sh/v86/?profile=archlinux)
### Quick Start in v86:
1. Open [v86 with Arch Linux](https://copy.sh/v86/?profile=archlinux)
2. Wait for boot (30-60 seconds)
3. Clone and setup:
```bash
git clone https://github.com/qweralfredo/ebpf-design.git
cd ebpf-design
npm install
npm run dev
```
4. Access at `http://localhost:3007`
### Benefits of v86:
- ✅ Full x86 processor emulation
- ✅ Complete package manager (pacman)
- ✅ All system tools available
- ✅ Persistent storage between sessions
- ✅ Comprehensive testing environment
- ✅ Learn eBPF with full Linux access
### v86 vs WebVM Comparison:
| Feature | v86 | WebVM |
|---------|-----|-------|
| Boot Time | 30-60s | 5-10s |
| Environment | Full PC | Linux Kernel |
| Tools | Complete system | Limited |
| Performance | Slower | Faster |
| Use Case | Comprehensive | Quick tests |
For detailed information, see [V86.md](./V86.md) and [V86-INTEGRATION.md](./V86-INTEGRATION.md)
## 📁 Structure
```
src/
├── components/
│ ├── NodeTypes/ # eBPF-specific custom nodes
│ ├── Sidebar.jsx # Node palette with drag & drop
│ └── ConfigPanel.jsx # Configuration panel
├── pages/
│ └── EBPFFlowBuilder.jsx # Main flow component
├── data/
│ └── ebpfSpec.js # eBPF specifications and initial elements
├── utils/
│ └── ebpfGenerator.js # Code generation utilities
├── styles/
│ └── global.css # Global styles with Tailwind
├── App.jsx # Main app component
└── main.jsx # Entry point
```
## 🎯 Features
### Available Nodes
- **Program Entry**: Define eBPF program attachment points
- **Conditional Logic**: If/else branching with condition templates
- **Map Operations**: Interact with eBPF maps (lookup, update, delete)
- **Packet Access**: Read/write packet data with bounds checking
- **Variables**: Store and manipulate data with type safety
- **Counters**: Increment statistics and monitoring counters
- **Return Actions**: Program return with verdicts (PASS, DROP, etc.)
### Interactions
- Drag nodes from sidebar to canvas
- Click nodes in sidebar to add to center
- Connect nodes by dragging from handles
- Configure node properties with forms
- Real-time code generation preview
### Controls
- Add nodes dynamically from palette
- Generate eBPF C code from visual flow
- Clear canvas to start fresh
- Toggle sidebar visibility
- Copy/download generated code
## 🎨 Customization
The project is structured for easy customization:
- **Colors**: Defined in Tailwind CSS classes
- **Nodes**: Add new types in `/components/NodeTypes/`
- **Code Generation**: Modify templates in `/utils/ebpfGenerator.js`
- **Specifications**: Update node definitions in `/data/ebpfSpec.js`
## 📚 Based on Documentation
This project follows best practices from ReactFlow official documentation:
- https://reactflow.dev/examples/overview
- https://reactflow.dev/api-reference
- https://reactflow.dev/learn
## 📖 Additional Resources
For detailed instructions on using WebVM.io, see [WEBVM.md](./WEBVM.md)
For WebVM Integration Plugin documentation, see [WEBVM-INTEGRATION.md](./WEBVM-INTEGRATION.md)
For detailed instructions on using v86, see [V86.md](./V86.md)
For v86 Integration Plugin documentation, see [V86-INTEGRATION.md](./V86-INTEGRATION.md)
For comprehensive testing guide, see [TESTING.md](./TESTING.md)
## �🔧 Build
```bash
npm run build
```
## 📝 Notes
- Uses ReactFlowProvider for accessing flow methods
- Implements modern hooks (useNodesState, useEdgesState, useReactFlow)
- Full TypeScript support (configuration ready)
- Responsive and accessible styling with Tailwind CSS
- Real-time eBPF code generation with validation
- Professional node palette with categorization