eBPF Low-Code Builder

Created by Alfredo Rosa - LinkedIn Profile

⚠️ 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

cd builder-new
npm install

🏃‍♂️ Run

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:

docker run -d -p 3007:3007 qweralfredo/ebpf-design:latest

Then access the application at http://localhost:3007

Using Docker Compose

docker-compose up -d

Building from Source

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

Quick Start in WebVM:

1. Open WebVM.io

2. Clone the repository:

   git clone https://github.com/qweralfredo/ebpf-design.git
   cd ebpf-design

3. Install and run:

   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

Quick Start in v86:

1. Open v86 with Arch Linux

2. Wait for boot (30-60 seconds)

3. Clone and setup:

   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 and 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

For WebVM Integration Plugin documentation, see WEBVM-INTEGRATION.md

For detailed instructions on using v86, see V86.md

For v86 Integration Plugin documentation, see V86-INTEGRATION.md

For comprehensive testing guide, see TESTING.md

�🔧 Build

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