🎉 Node-RED 5.0.0-beta.5 now available

News
1

:tada: The fifth, and hopefully final, beta release of Node-RED 5 is now available!

image
image2636×1764 491 KB

This release brings another big iteration of the sidebar management, a number of updates to the default light theme to improve accessibility, plus a dark mode theme!

The changelog lists out all of the PRs in this release: node-red/CHANGELOG.md at dev · node-red/node-red · GitHub

Install-free Demo

If you have a WebKit-based browser (eg Chrome), you can preview the release here:

Sidebar changes

The method of positioning sidebars by dragging their buttons around just wasn't working well - so we've scrapped it. Now you can drag the panels themselves - a much more intuitive approach.

To make this work, each sidebar now has a small header - that includes the name of the panel - which can be grabbed by the mouse and moved around.

The sidebar panel buttons are now grouped all together, regardless of which side the panel is shown. You can still drag the buttons to reorder them to your choosing, but that doesn't change the panel positions any more. We've also added toggle buttons to open/close the sidebars in one, easy-to-find, click.

Selection appearance changes

We've changed the appearance of selected nodes in the editor.

  1. It now shows as a halo around the node - rather than just changing the existing node border. This makes it easier to spot what is selected and clashes less with the colour of the node body
  2. It's blue. I'm missing the orange, but we're giving this a go.

image
image1236×684 23.8 KB

Dark mode

We finally have a built-in Dark theme! The editor will automatically pick the light or dark theme based on your browser/os preferences. But you can explicitly pick on via the User Settings dialog in the editor. We still need to do a bit more work to support 3rd party themes providing both light and dark themes in a single package - but that will come.

image
image2636×1764 353 KB

Known Issues

Just after I published the beta, @Steve-Mcl spotted an issue with Junction nodes going invisible when you hover over them. The issue has already been raised and will, of course, be fixed.

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.1.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.5 - 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.

We've decided to focus Node-RED 5 on the UX improvements so that we can get to a final version sooner rather than later. This will mean cutting back on scope and being very selective over what else gets in from this point. There are a few inflight PRs and fixes that will still target 5.0, but this should be the last beta we release.

6 Likes
2

Hi @knolleary

Testing B5, there seems to be some sporadic issue with RED.panels.
when resizing the side Panel - it does really strange magic - I didn't see this in previous BETA's

Commence the Jif!

Apr-16-2026 18-01-45

Source:

Create Panel

HTML

3

Hey @marcus-j-davies

Can you raise a gh issue with those details? Will be some weird CSS interactions breaking height calculations.

1 Like
4

No Problem : Done

5

Super minor, but... See this tip:
image

That is not true if you selected multiple nodes with a SHIFT-CLICK. In that case "enter" always edits the one you shift clicked on, not the 1st node in the selection in terms of flow order.

Likely not V5 specific.

6

Please dont release that new selection. It is horrible :cry:

Or at least do it like in my flow diff tool, with a small top and bottom paddings

image
image1911×962 63.7 KB

7

Thanks for this Nick.

Dark mode is a trip to the '90's :smiley: But that's minor. I know how hard it is to get dark modes looking reasonable.

One more serious point though. And I don't recommend dealing with it before v5 is released, however, you really do need to get someone to have a look at Node-RED accessibility. Someone implementing Node-RED in a production environment is going to get caught out and potentially fined if it isn't dealt with at some point. It is a long way off WCAG 2.2 AA right now and that is the minimum legal requirement in the EU, UK, and elsewhere.

8

The updates made to the light mode in this release were all done to ensure contrast ratios meet wcag requirements across the board.

You can see a full breakdown of the changes in this comment from my colleague Noley who did much of the leg work on this. UX: Improve accessibility of default theme - colour palette · Issue #5532 · node-red/node-red · GitHub

I won't claim it's 100% there, but it's a much improved situation and a better baseline to build from.

2 Likes
9

Sorry, I just did a quick check on the dark mode. :smiley:

Great to know this is getting some focus.

10

There's (still) an area of white space on the debug panel - between toolbar & the scrolling content.

image
image672×268 16.7 KB

11

Does that mean you saw this in earlier betas as well? My apologies if you'd reported it and I have missed it. I don't see that myself - would interesting to hear if anyone else does.

12

In the dark mode the grid is virtually invisible (for my monitor and eyes anyway). Can that be tweaked a bit?

The panel operation is much improved :slight_smile:

13

I am seeing that too, I didn't notice it previously, but I didn't particularly look for it. I will drop back to previous version in the morning and have a look if I have time.

image
image314×146 8.11 KB

14

The blue box looks like it might be quite messy looking with multiple nodes selected which are close by.

Anyway I will use this opportunity to highlight one of my biggest frustrations with Node-RED which is closely related. When searching node via find (ctrl-f) and selecting a node. The UI goes to the flow where the node is located and highlights it with dashed blinking red border. This is very annoying game of Where's Waldo. Please make that one to use the offset border as well! We are much more tuned to detect movement compared to a color change.

1 Like
15

In my opinion edit area, this isn't dark mode, it's ultra dark.
Will there be an intermediate mode, something like vscode?

16

I can confirm I noticed it already for some time; didn't report it though.

Switching branches on my system: It's not visible in main, but in dev.
It's even visible - on my system - in the preview.

Vivaldi & Chrome - local & preview, even Safari (local) ... same situation.

A bit of analysis:

.red-ui-debug-content {
    position: absolute;
    top: 43px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: auto;
}

As top is hardcoded in the class, it's not considering the height of the v5-style toolbar, which is lower now than before.

17

There's another visual I noticed recently: the multiplayer "indicators".

v4:

image
image672×268 7.06 KB

v5:

image
image672×268 7.22 KB

My view: The indicator on the flow tab is ... "misplaced" & too big. Difficult to find a good design though, as the label now is centered.
The green one - again my view - looks as well too big.

Additionally ...

image
image752×206 9.1 KB

... the new design is now mixing circles and squares in the bar - both to indicate "users".

2 Likes
18

I came across this as well, but the multilayer approach seems to have been abandoned.

19

Thanks for the feedback everyone. We've fixed up the following items.

We're going to look again at the new selection appearance - no doubt there is some refinement to be had there.

Would be good to hear what people think about the new drag-n-drop panel arrangement.

1 Like
20

Much better IMO.
Using the panel icons was confusing, it was trial and error placing them where you want them.

The new way of highlighting where it will he placed is :100:

1 Like