Flow Editor

STANDARD PREMIUM ULTIMATE

The Flow Editor can be separated into three components. It consists of a workspace to place and combine nodes, a palette of available nodes on the left, and a sidebar with information about your flow and individual nodes on the right.

Nodes in the palette

Node-RED provides a lot of nodes that are already installed. If you want to expand the library, you can install additional nodes from the community-driven Node-Red Library. The preinstalled nodes in the palette are set up in multiple groups, e.g. input and output. Nodes can be added to the workspace by dragging them to the desired location.

Workspace

The workspace displays one flow at a time. You can add a new Flow by clicking the plus button in the upper right corner of the workspace. You can switch to a different flow by clicking through the tabs. The settings to each flow can be accessed by double-clicking the corresponding tab. The settings window provides the option to name a flow, enable or disable it, add a description, or delete the flow. The button next to the plus button in the upper right of the workspace provides a list of additional actions.

In the lower right of the workspace are buttons to navigate through the current flow.

The map button provides an overview of the available space in your flow. You can drag the displayed area to where you want it to be. Plus and minus will zoom in and out, and the circle button resets the zoom to the default value.

Sidebar

The sidebar hosts multiple tabs with additional information about your flows and nodes.

Node information

The info tab provides general information about your current selection. If a node is selected, the info tab will show an ID for the node and additional information like name or status, as well as a description.

Project history

If you create a project and add version control with git, you will be able to see the version history and its branches in the project history tab. The Local Changes dropdown will show changed files, typically the flows.json file or the JSON file with your custom name. You can click the +all button to move the files to the Changes to commit section, or hover over a file to Revert or Stage the changes. You can revert this selection by clicking the -all button, and commit the changes by pressing the commit button. To commit a change, you have to enter a commit message to describe the changes made.

Your changes should appear in the Commit History section. You can click on each commit to display a detailed list of the changes made compared to the previous commit. The Branch button in the Commit History lets you search for a branch or create a new one. A branch will be saved next to the other branches and can be merged later. Once you created a branch, this branch is the current path you will save your changes to. You can switch between branches by selecting them in the Branch search.

Debug messages

The debug tab will log warnings or errors if they occur during a process in your flow. They include the flow or node id to pinpoint the source. You have the option to filter or delete the messages.

Configuration nodes

The configuration nodes tab shows all active configuration nodes structured by nodes you have in your project. Configuration nodes are defined for processes that are active in the background. They will be displayed like a node in the flow. The right end of this node shows the number of nodes that depend on or are connected to the configuration node. If no node is depending on the configuration node, the configuration node will be grayed out and categorized as unused. You can toggle the view between all and unused.

Context data

The context data is structured in a Node, Flow, and Global section. The context data tab will display environment variables and global variables. Node-RED provides the option to pass environment variables to a node. If set, they will appear in the Node section. The concept of global variables in Node-RED is divided into the flow and global variables. You can set both anywhere you want, but flow variables are only accessible in the flow you declared them in. Global variables are available across all the flows in your current project. You can learn how to effectively use flow and global variables as part of the Best Practises section. After you set some context data, the variable and value will appear in the section it is available in after you pressed the reload button in the section tab.

Previously, any context data set in Node-RED would be lost after a restart. This has now been changed in the latest Flow App release. With the new update, context data can be stored securely in the local filesystem with encryption. To enable this feature, you need to modify the settings.js file, specifically the contextStorage section. The encryption key used for securing the context data will be the project's credentials encryption key. If this key is not set, a default key will be used instead.

Saving flows

To start your flow, you need to save it. The button is in the top right of the editor. If you have undeployed changes to your flow, the button will light up in color. If there are no changes to make, the button is grayed out.

Node-RED provides different options for saving flows, which can be accessed from the dropdown menu in the Save button. You can choose to save the complete workspace, only modified flows, or only modified nodes. If you want to redeploy your project without making any changes, you can use the save button to restart the deployed flows.

Starting and Stopping Flows

In addition to the Save button, you will also find a Start/Stop button that toggles between two states. The Start button is useful when you want to start a flow that has been stopped or paused, or when you want to start a new flow that has not been deployed before. The Stop button is useful if you want to stop a flow that is causing problems or if you want to stop it temporarily to make changes to it.

Editor Menu

The editor menu is located next to the Deploy button. The user button next to the menu button lets you log out of your current session.

Projects

The menu provides access to your projects. You can create a new project or import an existing one. The project settings can be accessed as well. The Project Settings menu lets you manage your current project.

View

The view option lets you hide the palette or the sidebar and lets you access an event log. The last part of the view options is a shortcut to the debug messages tab in the sidebar.

Import and export

The import and export functionality is a powerful feature that enables users to easily share their flows with others or backup their work for future use.

To import nodes, users can access the import nodes menu, which allows for the import of nodes from various sources, such as examples, local files, and the clipboard. When importing nodes, users have the option to add them to the current flow or create a new one. This feature saves time and effort in the development process by enabling users to reuse existing flows or import nodes from other projects. Moreover, the Example section provides a comprehensive list of examples demonstrating how to use installed nodes, allowing users to become familiar with a specific node and discover different ways to integrate it into their flows.

Search flows

The search flows option of the menu lets you search for specific flows with the same search as the button described in the Workspace overview.

Configuration nodes

Configuration nodes provide a shortcut to the Configuration nodes tab in the sidebar.

Flows and Subflows

The Flows option lets you create a new flow. The Rename and Delete options will apply the flow that is currently open in the workspace.

Accidentally deleting a flow can be reversed by pressing ctrl + z or cmd + z. Remember: Changes are only registered if they are deployed. If you didn't deploy your changes, you can always refresh the page and your flows will have the state of your last deployment.

The Subflow option lets you create Subflows in two ways. Create Subflow will create a new and empty subflow with a new tab in the workspace. The new subflow will appear in the palette. The option Selection to subflow will convert your current selection of nodes into a new subflow. The new subflow will replace the selection.

Subflows from a selection can only be created if the resulting subflow has one input.

Manage palette

The Manage palette option provides a shortcut to the Palette section in the general Settings and will be explained in the following section.

Settings

The Settings option provides some visual customization with the View section. You can change your displayed language. It will default to your browser’s settings. You can change the appearance of the grid in the workspace. You can show or hide the grid, change the grid size, and enable or disable nodes automatically snapping to the grid. You can decide to show the node status and the label of newly added nodes. Tips in the editor can be enabled or disabled.

• The Keyboard section lets you access and changes keyboard shortcuts.

• The Palette section provides an overview of the installed Node-RED components. You can search and install new nodes created from the Node-RED community.

• The Git Config section will host the username and email that are used to store changes in your created project. You can edit this information. If you need SSH Keys to establish a secure connection, you can add a secure key in the SSH Keys section.