EdgeFlow provides a modern, intuitive web interface for building and managing your automation workflows. This guide introduces the main areas and navigation of the interface.
Main Navigation
The EdgeFlow interface consists of several main pages accessible from the sidebar navigation:
Page Layout
Each page follows a consistent layout pattern:
Page Content Area
Header Bar
The header bar is always visible and provides quick access to important features:
Logo / Home
Click to return to the Dashboard from any page.
Notifications
View system alerts, errors, and important messages. Badge shows unread count.
Connection Status
Green dot indicates active WebSocket connection for real-time updates.
User Menu
Access user profile, preferences, and logout option.
Workflows Page
The Workflows page is where you manage all your automation flows:
Temperature Monitor
5 nodes • Last run: 2m ago
MQTT Data Logger
8 nodes • Stopped
GPIO Controller
3 nodes • Error: Pin not available
Workflow Actions
| Action | Description |
|---|---|
| + New Flow | Create a new empty workflow |
| ▶ Start | Start a stopped workflow |
| ■ Stop | Stop a running workflow |
| ✏️ Edit | Open workflow in the Flow Editor |
| 📋 Duplicate | Create a copy of the workflow |
| 📤 Export | Download workflow as JSON file |
| 🗑️ Delete | Permanently remove the workflow |
Flow Editor
The Flow Editor is the visual workspace where you design automations. It opens when you create or edit a workflow.
See the Flow Editor Guide for comprehensive documentation on using the editor.
Global Keyboard Shortcuts
These shortcuts work throughout the EdgeFlow interface:
Responsive Design
EdgeFlow is optimized for desktop use, but the interface adapts to different screen sizes:
Desktop (1200px+)
Full interface with sidebar, canvas, and panels all visible.
Laptop (768-1199px)
Collapsible sidebar, panels can be toggled.
Tablet/Mobile
Simplified view for monitoring. Full editing requires larger screen.
Theme Options
EdgeFlow supports light and dark themes to match your preference:
Default theme with light backgrounds and dark text.
Reduced eye strain with dark backgrounds.
Change theme in Settings → Appearance → Theme.