To start, you must install the dashboard nodes via the in the Node-RED editor.
Every UI element (widget) must live within a Group , which in turn sits on a Page . Pages: Act as the main navigation tabs. UI creation with Node-RED
Node-RED has evolved from a simple logic engine into a powerful platform for building full-stack applications. With the release of , creating responsive, professional user interfaces (UIs) is more accessible than ever. Whether you're building a smart home panel or an industrial monitoring system, this guide explores how to master UI creation in Node-RED. 1. Choosing Your Foundation: Dashboard 1.0 vs. 2.0 To start, you must install the dashboard nodes
For years, the standard was node-red-dashboard (Dashboard 1.0). While reliable, it is now considered legacy. The modern standard is ( @flowfuse/node-red-dashboard ), developed by the FlowFuse team. Key Benefits of Dashboard 2.0: Modern Aesthetics: Cleaner design out of the box. Node-RED has evolved from a simple logic engine
Logical sections that organize related widgets (e.g., "Living Room Controls").
Search for @flowfuse/node-red-dashboard and click install.
Better handling of different screen sizes through flexible groups.
To start, you must install the dashboard nodes via the in the Node-RED editor.
Every UI element (widget) must live within a Group , which in turn sits on a Page . Pages: Act as the main navigation tabs.
Node-RED has evolved from a simple logic engine into a powerful platform for building full-stack applications. With the release of , creating responsive, professional user interfaces (UIs) is more accessible than ever. Whether you're building a smart home panel or an industrial monitoring system, this guide explores how to master UI creation in Node-RED. 1. Choosing Your Foundation: Dashboard 1.0 vs. 2.0
For years, the standard was node-red-dashboard (Dashboard 1.0). While reliable, it is now considered legacy. The modern standard is ( @flowfuse/node-red-dashboard ), developed by the FlowFuse team. Key Benefits of Dashboard 2.0: Modern Aesthetics: Cleaner design out of the box.
Logical sections that organize related widgets (e.g., "Living Room Controls").
Search for @flowfuse/node-red-dashboard and click install.
Better handling of different screen sizes through flexible groups.