Onboarding
Guide users to their first node
Empty-state guidance with trigger selection. Help new users start building workflows with contextual hints.
The Problem We Discovered
"New users stare at a blank canvas with no idea where to start. The palette has hundreds of nodes. Which one do I drag first?"
A blank canvas is intimidating. New users don't know that flows start with trigger nodes. They browse the palette randomly, get overwhelmed, and give up before building anything meaningful.
Training materials help, but users forget what they learned when they're actually staring at the empty editor. The first step should be obvious, not a memory test.
Guided First Steps
Empty State Overlay:
- Centered Placeholder: Appears on flows with no nodes
- Add First Step Button: Opens trigger selection sidebar
- Dismissible: Click to hide for this flow
- Persistent: Remembers dismissal per-flow in browser storage
Trigger Selection Sidebar:
- Curated List: Shows only trigger nodes (nodes with 0 inputs)
- Search: Filter triggers by name
- Categories: Organized by type
- One Click: Node added at canvas center with config dialog open
Default Triggers
The following triggers are selected by default:
- inject: Trigger flow manually or on a schedule
- http in: Receive HTTP requests
- mqtt in: Subscribe to MQTT messages
- websocket in: Receive WebSocket messages
- tcp in: Receive TCP connections
- udp in: Receive UDP packets
- link in: Receive messages from other flows
Customization:
Configure which triggers appear via Settings > Onboarding. Select any node with 0 inputs.
How It Works
- Create a new empty flow or navigate to an existing empty flow
- See the onboarding overlay with "Add first step..." button
- Click the button to open the trigger selection sidebar
- Choose a trigger node (inject, http in, mqtt in, etc.)
- Node is added at canvas center with its configuration dialog open
Dismissing:
- Click the "Dismiss" link below the button
- Overlay won't appear again on that flow
- Reset via Settings > Onboarding > Reset Dismissed Flows
Get Started
# Quick install cd ~/.node-red npm install @fierylab.io/fiery-contrib-plugin-onboarding node-red-restart
Requirements:
- Node-RED 3.0.0 or higher
- Node.js 14.0.0 or higher
Settings:
- Enable/Disable: Toggle the entire feature on/off
- Trigger Nodes: Select which triggers appear in sidebar
- Reset Dismissed: Clear all dismissed flows