🎉 Node-RED 5 Beta 4 released

News
1

:tada: The fourth beta release of Node-RED 5 is now available!

image
image2958×1846 639 KB

This release has had a lot of small UX updates, addressing feedback from the previous beta and continuing to edge closer to the final design.

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:

Notable changes

  • The reorder of sidebar buttons is much smoother and responsive now.
  • The long row of buttons handle narrower screen sizes
  • Shift-scroll now behaves properly for all browsers/OS
  • The dropdown menus now scroll if there's not enough vertical space for them, and are more touch-accessible.
  • Restored the behaviour of clicking the workspace to close (confirm) the edit dialog. We'd had enough feedback that removing that behaviour wasn't the right choice. We do have an open PR to give users the choice of the behaviour - but I'd prefer we didn't add lots of micro choices and customisations if we can avoid it. So we'll keep that PR in the pocket for now.
  • A tinted shade when dialogs are open

This last item is likely to cause debate. I knew there were some issues with the shade we showed when the edit dialog was open. In debugging some of the overlapping/missing shades I added a coloured tint to make it easier to spot the issues as I was working. But I very quickly came to like the tinted shade. It provides a good contrast and adds some variety to the otherwise fairly monochrome editor.

What do you think?

image
image2958×1846 441 KB

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.4 - 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.

5 Likes
2

Another awesome release thanks.
One thing I missed from the other betas is the new tab placement is cutting off the end of my instance name:

image
image510×127 10.9 KB

Not a major issue by any means, but when you have free text in the settings file, it may upset some people.

Obviously if I resize the left bar the full name appears, but this is with the default size.

editorTheme: {
    header: {
        title: "Node-RED -- DEVELOPMENT",
    },

Thanks

3

@MyRandomThoughts Yes, this was something I knew could be a problem when we moved the tabs up. On my list of things still to tackle.

1 Like
4

Definitely. I actually really like it, very cool!

If that gets removed in the future, I'll mod my instances to use it.

I also notice the perfect top left edge alignment of the tabs, it was mentioned in the previous Beta by someone and I liked their comment.

2 Likes
5

I like it.

1 Like
6

Pretty in Pink! :smiley: Looks rather 1970's on my monitor to be honest. I think I had a shirt that colour back then. :rofl:

Not an issue as long as it can easily be controlled via a style sheet.

I couldn't find one that deals with the problem of not always being able to drag panel icons across the upper/lower panel boundary as I reported in the previous beta. Might be hidden in one of them?

7

I refer the honorable gentleman to the first listed 'notable change':

  • The reorder of sidebar buttons is much smoother and responsive now.

I listed it first just for you :wink:

This was the issue for the sidebar button reordering - UX: reordering of sidebar buttons is fiddly and unreliable · Issue #5524 · node-red/node-red · GitHub. As noted, the fixes related to handling narrow screens appeared to kick things enough to resolve this issue as well.

1 Like
8

Well, OK, thanks. :smiley: But the issue remains so not so "notable" a change maybe?

Seems to be only the left-hand side now. If I drag the Explorer icon into the .... hold on, a vid would be better.

Animation1

Note that the explorer cannot be dragged back unless it has been moved to the front of the top-panel list.

9

Like the shade but think the zoom controls and update indicator should now have a solid background like the other bottom row buttons.
( and easily edited colour choice for the shade would be good )

10

First of all: Great progress! :+1:

There's a similar issue at the right hand button bar: If all buttons are in one bar, the edge button (left-most / right-most) when dragged (to the left / to the right) cannot trigger the creation of the second bar.

11

I think the button showing the logged in user ("admin") is an NR 5 feature?

image
image404×175 4.14 KB

The popup is an unordered list, both username and "Logout" are link tags.
If you click on the username it closes the popup, but right click and you get options including "Open link in a new tab", which indeed opens a new tab pointing to the first flow tab.

Now we can again close popups by clicking outside them (hooray!), is it better to make the username simple text?

12

No, it has been there since the very early days of NR 1.0. The menu and its contents haven't changed at all - but I agree there is scope for something better.

13

Ha. Shows how observant I am!

14

I updat

if update "update indicator" means deploy, I agree with the data, deploy need shadow

15

No I meant this row

image
image640×120 13.4 KB

16

I am not keen on the pink background when importing a flow. It makes me think there is an error.

1 Like
17

Previously, the top bar with the Deploy button had a drop shadow applied to it. That shadow is now missing. The red shadow doesn't look right.

18

From my testing, you have to swipe left first, then right before it actually triggers. Not intuitive at all. On the right side, the sequence is reversed.

19

Thanks. Just tried that and indeed it does work. Both on left and right if you are dealing with the lower panel.

1 Like
20

Could we have the sidebars a bit wider and possibly darker so they are easier to use and be seen?

sidbars
sidbars892×191 26.6 KB