🎉 Node-RED 5 beta.0 released

[knolleary]

The first beta release of Node-RED 5 is now available!

As promised in our recent blog post, we're starting the beta releases for Node-RED 5 today.

This is the first step on the path to an updated Node-RED user experience.

New Sidebar Design

The sidebars have been updated to make them more accessible. Rather than hide available sidebars in a hard to discover drop-down menu, we now show a bar of buttons down the side.

We've also reworked the left-hand side to have the same sidebar behaviour - and in doing so, we've moved the Info sidebar over to the left. This is a more natural place for it to live as a way to navigate your workspace.

I really want to stress, this is an iteration; we already have a number of follow up tasks planned to further improve aspects of this new approach. Check the sub-issue list here if you want to see what's coming.

Updated pan/zoom behaviour

We've updated how you navigate around the workspace to align better with standard behaviours seen elsewhere.

As before, you can pan around the workspace with the middle-mouse button. If you don't have a middle-mouse button, you can now achieve the same result by holding the spacebar whilst dragging around with the left-mouse button.

There's also a new 'zoom to fit' button in the status bar; this will zoom your view to ensure all of your nodes are visible.

The pinch-zoom behaviour on touch screens is also better behaved.

---

Installing the beta

If you want to try out the beta, you will need specify node-red@next when you use npm to update. Without the @next you'll still get 4.0.x

So on a Pi you'd do:

sudo npm install -g --unsafe-perm node-red@next

Docker images

The beta images are available under nodered/node-red-dev:v5.0.0-beta.0 - with the default image being based on Node 24.

Reporting problems

If you hit any problems, please report them either as a reply on this topic, or in the #core-dev slack channel. Please do not post new topics to the forum regarding the beta as that could confuse users who are not using the beta.

What's Next

The Node-RED 5.0 work is being tracked in this issue. From there you'll find sub-issues for the various strands of activity going into Node-RED 5.

For the UX updates, you can follow this issue - with a number of sub-issues already raised for the next betas to address.

There's also a healthy backlog of issues and PRs from the community we'll be working through, so expect other exciting updates to come.

[mbonani]

I'm probably doing something wrong. When I run a container using any of the ghcr.io/node-red/node-red-dev:5.0.0-beta.0 images, I get Node-RED 4.1.2.

[hardillb]

I'll have a look, but they should have been built from the same images as the ones on docker hub

[hardillb]

I know what the problem is.

New builds running, will replace existing tagged images. Will post when finished.

[cymplecy]

Running this on desktop PC (Linux Mint)

Should I update my node.js from v20 and if so to what - v22 or v24? and how do I do that?

[hardillb]

New builds done, and have the right versions now

[knolleary]

Should I update my node.js from v20 and if so to what - v22 or v24? and how do I do that?

Node 20 is fine for now.

[cymplecy]

Loving the easy hiding palette to get more real estate

[hardillb]

Please note, that ONLY NodeJS 24 docker builds are available for this beta release and NodeJS have dropped 32bit ARM support for the Alpine docker builds, so the default containers will NOT run on a Pi Zero any more.

The debian based containers still have ARMv7 support, so should work on Pi Zero 2 W and Pi 3

[dceejay]

This is true of "bare-metal" installs also... not just containers... there is no Nodejs v24 for Armv6 - so not for Pi0 or Pi1. As Nick noted v5 "may" work on nodev20 or 22 but won't be officially supported. (IE it may stop working at any point when a v24 only feature is incorporated)

[RvG]

The permanent vertical button bars take some horizontal space, but clicking the buttons to hide/show the sidebars helps in managing your screen real estate. Probably a bit easier than activating the dynamic toggle chevrons.

I was initially confused why my Info button was on the right hand sidebar unlike in Nick's screenshot, but that must be because I've customized the button order before upgrading.

On my browser here (Edge on Windows) the Ctrl+Space shortcut doesn't work anymore to toggle the right-hand sidebar as it does on 4.1.1. Maybe the new panning shortcut gets in the way?
Ctrl+P still toggles the left hand sidebar.

The 'P' in that shortcut makes less sense now that you can move the Palette to the right-hand sidebar if you want . The descriptions for these Toggle actions in the Keyboard Shortcuts editor should also be updated at some point to 'Toggle left sidebar' and 'Toggle right sidebar'. But lets wait until more sidebar work is done before nitpicking.

[gerry]

Updated on Pi using the script Nick posted and when I look at version it still says 4.1.1? Is that right?

[dimitrieh]

Live demo version of Node-RED 5.0 beta running on the Node-RED experiment framework (no edits possible): https://nr-node-red-dev.tailbfedba.ts.net/

Note: link might change in the future

Feel free to try it out directly and leave your feedback here!

[Colin]

@gerry

it still says 4.1.1

Did you restart node red?
If so then how did you install node red initially, and how do you start it.

[gerry]

First update didn't work for some reason, now says 5 beta in palette.

[marcus-j-davies]

Cue the peak downloads from Node Developers.

Im at the The works xmas party tonight.
But will be testing over the weekend - mainly anything breaking in the Nodes I develop - and indirectly Node RED of course

[marcus-j-davies]

Initial reaction - the tab being to the far right - Nice! - often I have to scroll the tabs, so Nice work!!

my only criticism on that change, is the layout tab has been moved to the left.
Feels like a disconnected UX (IMO)

The far left, should only contain Nodes available to deploy IMO, it feels like double standards

[AllanOricil]

@marcus-j-davies

my only criticism on that change, is the layout tab has been moved to the left.
Feels like a disconnected UX (IMO)

The far left, should only contain Nodes available to deploy IMO, it feels like double standards

I disagree. The flows list tab is like a file explorer. All file explorers I know are placed on the left. This new UI seems weird for "experienced" users, but it is closer to current UIUX standards. You guys have to start throwing away your biases. Go in a trip for 1 year without touching NR and come back

However, because the flows "explorer" and nodes are on the same side bar, I understand that Users that are used to drag and drop nodes will have a hard time swtiching between the file explorer and then back to the nodes list, and therefore I agree that there is still some UX pain with the new UI. So, my proposal is to make the Nodes list a sidebar on its own that renders on top of the canvas a little bit to the right of the currently selected left sidebar menu. This means that it can be open with what is currently selected in the left sidebar. Below is what I meant @dimitrieh @knolleary

The "Flow Explorer" should be renamed to just "Explorer", and inside of it there should exist 2 vertical collapsable tabs, one for flows and the other for files/assets, named flows explorer and assets explorer, respectively.

Im available for consulting services by the way. But really you just need to copy what has been accepted in the industry. Just look at other editors

[jbudd]

I view the Node-red editor with Firefox on a laptop screen resolution 1920 x 1080.
This is full width of the editor with v4.1

I often wish for more desktop and less sidebar.

And this is v5.0.0-beta.0. Disappointingly, there is less desktop visible.

Why all the empty space in the sidebars? Changing the settings:

Left tab bar 44.6667px ==> 10px
Palette 210.667px ==> 150px
Right sidebar 300.6667px ==> 200px
Right tab bar 44.6667px ==> 10px

Gives a useful increase in editor space.

Why do we need both tab bars (far left & far right)? The button to show/hide the left column can go perfectly happily in the right hand tab column with all the other buttons.

I am forever dragging the right bar wider and narrower to accommodate debug messages.
But when I am debugging, I don't need the palette column at all It is now easier to hide it by clicking the button, but I fail to see the value of two sidebars simultaneously.
When I am dragging nodes into the flow, I don't generally need the right hand column.

There could be a button (in the right hand tab bar) to toggle between having right or left column expanded (or of course, both)

[Buckskin]

@jbudd

The button to show/hide the left column can go perfectly happily in the right hand tab column with all the other buttons

Just drag it across to the right hand button column

Only just realised that this drags the nodes tab bar across as well!!