🎉 Node-RED 5 Beta 1 available

News
1

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

We're aiming to refresh the beta at the end of each week to share regular progress - although the Christmas period may interrupt that a little.

There was lots of great feedback with the previous beta. This next beta addresses some of it - but there's plenty still to do. If something you mentioned in the beta.0 thread still isn't working as you'd expect (such as horizontal scrolling with the mouse wheel), please don't think its been ignored - just not managed to get to everything in the last few days.

image
image3096×2130 716 KB

The significant update in this beta is the ability to split the sidebars to show two panels at a time.
With that, the default layout has been updated to show the Debug sidebar in the lower section of the right-hand sidebar.

The Info sidebar has been separated into two; the Explorer lets you navigate your flows and is now shown as the default sidebar on the left-hand side. The remaining part of the Info sidebar shows details on what you've currently got selected; this is the default sidebar shown on the right-hand top section.

The fact the left-hand sidebar doesn't show the palette by default is a choice that I expect quite a lot of discussion around. I've done it in this beta to get early feedback. Another option was to split the LH sidebar by default - have the Explorer in the top half and the Palette in the lower half. Let us know what you think. You can split the LH sidebar by dragging one of the tab buttons into the lower section of the tab bar.

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 will be available once I nudge Ben, as I think I've probably sprung this release on him late on a Friday. They will be available under nodered/node-red-dev:v5.0.0-beta.1 - 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.

Some of the more immediate tasks I'll be working on are:

  • Improving the new Explorer sidebar - there are a number of UX changes needed to make it a more intuitive way to navigate the flows
  • Menu updates - the main menu still has 'show sidebar' and 'show palette' as options; these don't map so well to the new sidebar design, so will be getting some attention
  • Header updates - we've going to do som rearranging of the main header of the editor to help make better use of the space it occupies.

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.

5 Likes
2

Docker builds should be done,

3 Likes
3

If the left hand sidebar is showing the palette and you drag the button[s] across to the right, the empty sidebar remains, and there seems no way to get rid of it.

image
image531×921 14.6 KB

4

I have a post-it note on my desk with a list of issues I was clearing before doing the beta release... And this was the one I didn't get crossed off.

1 Like
5

For me - If I rearrange the sidebar options - eg move debit to top right and palette back to top left.... refreshing the page reverts the arrangement. I can see it being saved correctly in .config.users.json - but doesn't seem to read it back in on refresh.

Also in the config nodes view the nodes are still hard left aligned :slight_smile:

6

Not a problem as such but I get
npm warn Unknown cli config "--unsafe-perm". This will stop working in the next major version of npm.

Just drag it to the left

image
image357×267 15.8 KB

Clicking on the Debug icon removes Both panes from the sidebar

Scroll bars in Edit pane have disappeared

Like the Debug in new window option

Reloading the Node Red page puts anything moved from the left hand side to the right hand side back as it was. Also any reordering of the icons on the right hand side.

7

That parameter is not required with recent versions of npm. In your version it is not required. In a later version it will generate an error. The problem is that it is still needed with older versions still in use.

8

Cheers Colin, I hadn't realised that. I will just not include it in future

Regards

9

If I drag from the lower sidebar on one side to the lower one on the other, it puts the icon in the right place but it does not display.

Animation1

1 Like
10

@TotallyInformation can you check the browser console for any errors?

11

No console errors or messages I'm afraid.

image
image540×127 5.24 KB

12

It works OK on Edge

13

It would be great if the popup debug window would remember the what to monitor and filter settings

14

In the flows explorer pane (if that is the correct terminology) it would be great to be able to drag the flows about to reorder them.

15

Not showing the palette by default is an open question at this point - your feedback is welcome.

It's actually a bit annoying to have to keep looking for and clicking the palette button.
Maybe once the editor starts to remember previous sidebar options after a restart this will be more comfortable.

I find the division of the left sidebar into top and bottom sections unhelpful.
The subliminal dotted line that you have to drag the button beneath is too close to the bottom
If both explorer and palette are visible and you click either button, the whole sidebar collapses.

What about making each button independent:
If the palette button state is "show", the palette gets whatever proportion of the sidebar is free. ie all of it, or if explorer is also "show", half?
Clearly the division between the two can be dragged.

Similar for the right hand sidebar.

The currently active button[s] ought to be more clearly indicated. On NR4 the active button has a dark underline. A slight colour difference would be nice.

I can see about 5 flow tab labels across the v4 desktop.
The explorer sidebar will show ~20, but it's still not going to include them all in one view.
The often requested ability to group tabs seems even more desirable with this vertical list of tabs.

16

I very rarely use the palette. I use Shift Click and start typing the node name then hit enter after two or three letters typed.

17

This beta was remembering the state between restarts earlier on Friday. Not had a chance to see what broke before I hit publish.

I agree the behaviour isn't ideal yet. I considered (and haven't ruled out) a why to maximise a sidebar easily. I chose to have the tab buttons collapse the whole sidebar rather than just the individual section as that would require two clicks if you wanted to hide the whole sidebar. It's a question of which behaviours to optimise for (and inevitably there will be a split in the feedback as to which is "better")

Also agreed the styling isn't quite there yet.

18

As for functional behaviours of the Explorer sidebar, I'll gather items in this issue: UX: Split Info sidebar into Explorer and Info sidebars · Issue #5373 · node-red/node-red · GitHub

Feel free to add comments (related to the explorer sidebar) there.

19

Well it's available for the user to style, so maybe not so important.
This is

.red-ui-sidebar-tab-bar button.selected:not(.disabled):not(:disabled) {
    border-left: 3px solid #aaa;
    background-color: rgba(0, 255, 0, 0.1);
}

image
image111×382 1.87 KB

2 Likes