# 🎉 Node-RED 5 Beta 1 available

**URL:** <https://discourse.nodered.org/t/node-red-5-beta-1-available/99937>\
**Category:** News\
**Tags:** docker\
**Created:** [12 December 2025 17:22 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937 "2025-12-12T17:22:06Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 December 2025 13:02 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/21 "2025-12-14T13:02:11Z")

</div>

> [@jbudd](#):
>
> Well it's available for the user to style, so maybe not so important.

I'll be more interested in styling the whole button bars to make them smaller so less of an impact on available space for the flows.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 December 2025 13:44 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/22 "2025-12-14T13:44:25Z")

</div>

See above edit. I have no idea why it worked the first time I tried it - but it doesn't now

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 December 2025 13:44 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/23 "2025-12-14T13:44:54Z")

</div>

Where do you put that. I like the colour scheme

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 December 2025 15:13 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/24 "2025-12-14T15:13:55Z")

</div>

You have to tell settings.js to look for a css file, the page section inside editorTheme

```auto
    editorTheme: {
       page: {
          css: "/home/pi/.node-red/editor.css"
       },

```

My editor.css file currently looks like this

```auto
/* use the header underline colour to differentiate devices. This one runs v5beta so vibrant green */
#red-ui-header{
        border-bottom: 3px solid chartreuse;
}

/* thinner, bluer wires */
.red-ui-flow-link-line, .red-ui-flow-link-line-background {
        stroke: #0722fc;
        stroke-width: 1;
}

/* Group title & outlines thinner & bluer */
.red-ui-flow-group-label {
        fill: #0722fc;
}
.red-ui-flow-group-body {
        stroke: #0722fc;
        stroke-width: 1;
}

/* Make junctions stand out a bit more */
.red-ui-flow-junction-background {
        fill: aquamarine;
}

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

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 December 2025 15:50 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/25 "2025-12-14T15:50:46Z")

</div>

Messing with the css, it notice a small inconsistency. Here, I've made the background color for `#red-ui-editor` pink.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35e5ebe019da91471376859bbb3bbda720353fcb.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9ed7629207505425c582abb9c3d4a47d5ea16cf4.png)

Notice that the container for the left sidebar is not correctly aligned at the top or the bottom, unlike the right sidebar.

There is also still a lot of fixed pixel sizing instead of more modern relative unit sizing like `em`s.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 December 2025 16:52 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/26 "2025-12-14T16:52:35Z")

</div>

Thank you.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 December 2025 17:14 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/27 "2025-12-14T17:14:31Z")

</div>

> [@TotallyInformation](#):
>
> There is also still a lot of fixed pixel sizing instead of more modern relative unit sizing like `em`s.

😱 🤣

I bet Dave is gritting his teeth at pink and green in the editor.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 December 2025 18:01 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/28 "2025-12-14T18:01:00Z")

</div>

I'm all for using colour to highlight escapes like these...

---

<div class="post-metadata">

**Author:** ![JoW](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jow/32/108217_2.png) [@JoW](https://discourse.nodered.org/u/JoW)\
**Post date:** [15 December 2025 08:02 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/29 "2025-12-15T08:02:12Z")

</div>

Debug in a separate window !!!!  
Nice.  
edit : apparently already a feature in 4.x. Still nice 😉

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 December 2025 08:50 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/30 "2025-12-17T08:50:55Z")

</div>

If you have eg Config nodes at the top and debug at the bottom of the right sidebar, the only way to devote the whole panel to debug is to drag it's button up towards the top.

If instead you try and drag the dividing line between the two:

a) It will not go all the way to the top  
b) Sometimes, not always, the row-resize cursor is lost, so you can't drag the dividing line back down.

![adddebug](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4853eaed667e4d8965d783a5283fd3edfc0003f.gif)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [17 December 2025 09:16 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/31 "2025-12-17T09:16:07Z")

</div>

@jbudd not being able to drag the panel out of existence is a deliberate choice _at this stage_ - as the current work doesn't support having the sidebar split, but only show one of the panels.

I'm still evaluating how well this UX works; it feels like there's a lot still to get right around the behaviour of the panels.

I'm also still wondering whether allowing panels to be dragged to the LH side is a good idea or not. I'm sure there will be those who welcome this level of flexibility. But it is leading to a number of UX compromises that aren't working for me yet.

We still want to have the Explorer and Palette on the LHS side - focussing on the well structured information hierarchy that @dimitrieh talked about in his [comment here](https://discourse.nodered.org/t/node-red-5-beta-0-released/99870/38). That doesn't mean it has to mirror the UX of the RHS.

Thinking about the newcomer to Node-RED, they aren't interested in customising the layout on day one and want to just use Node-RED. It's important for it to work well for them.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 December 2025 09:59 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/32 "2025-12-17T09:59:33Z")

</div>

> [@knolleary](#):
>
> not being able to drag the panel out of existence is a deliberate choice _at this stage_

Personally, I would agree with that view. The fact that you can do it by dragging the icon is what I'd expect anyway.

> [@knolleary](#):
>
> I'm also still wondering whether allowing panels to be dragged to the LH side is a good idea or not. I'm sure there will be those who welcome this level of flexibility. But it is leading to a number of UX compromises that aren't working for me yet.

I have to say that I believe this ability IS worth-while and a valuable addition to the Editor. As it stands, the editor is lacking in flexibility. Being able to move sidebars around is a very common UX for complex interfaces and is very much welcomed.

Of course, perhaps a menu option somewhere to reset everything back to default might be welcomed by those who inevitably get themselves into a bit of a mess. 😃

I also note the suggestion in the other beta thread about having a "Views" feature that would allow different configurations to be saved and easily switched between. I think that would be fantastic. But recognise that might be a stretch too far for the initial release.

> [@knolleary](#):
>
> Thinking about the newcomer to Node-RED, they aren't interested in customising the layout on day one and want to just use Node-RED. It's important for it to work well for them.

Agreed. And I think we are broadly happy with the default layout. But beginners don't stay that way and as flows grow in complexity, the ability to easily move some elements of the interface around becomes a lot more valuable.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 December 2025 10:27 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/33 "2025-12-17T10:27:56Z")

</div>

I principally wanted to highlight that you can drag the divider up but you can't drag it back down again.

I don't find the interaction with the buttons intuitive, but as Nick says, it's still under evaluation, so no opinions on that at the moment.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [17 December 2025 10:50 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/34 "2025-12-17T10:50:30Z")

</div>

> [@jbudd](#):
>
> I principally wanted to highlight that you can drag the divider up but you can't drag it back down again.

Noted, reproduced, and will be fixed.

---

<div class="post-metadata">

**Author:** ![dimitrieh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dimitrieh/32/101708_2.png) [@dimitrieh](https://discourse.nodered.org/u/dimitrieh)\
**Post date:** [17 December 2025 11:11 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/35 "2025-12-17T11:11:42Z")

</div>

Live demo version available of Beta 1 at [https://nr-node-red-dev-5-0-0-beta-1.tailbfedba.ts.net/](https://nr-node-red-dev-5-0-0-beta-1.tailbfedba.ts.net/)

With this you can directly check out the UI

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [17 December 2025 19:14 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/36 "2025-12-17T19:14:41Z")

</div>

> [@TotallyInformation](#):
>
> I have to say that I believe this ability IS worth-while and a valuable addition to the Editor. As it stands, the editor is lacking in flexibility. Being able to move sidebars around is a very common UX for complex interfaces and is very much welcomed.

I vote for this. I drag everything to one side, gives me more space in the Editor. As mentioned above the big issue for me is that reloading the page reverts everything back as it was.

---

<div class="post-metadata">

**Author:** ![lesichkovm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lesichkovm/32/49477_2.png) [@lesichkovm](https://discourse.nodered.org/u/lesichkovm)\
**Post date:** [21 December 2025 02:30 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/37 "2025-12-21T02:30:47Z")

</div>

The flows on the left hand side is so nice.

How can it be improved.

- right now when you click the flow it opens the child nodes
- instead would be best to open / activate the flow itself, when active label can be bolded
- eye icon is a bit weird (hide/show) could be a pin (only pinned tabs are shown)

Now that the flows are nicely on the left, we should be able to remove the flow tabs on the top, as they just clutter the interface (just leave one tab as it contains the name, for the currenty open tab).  
Alsthough this now can be achived with the hide/show icon

RHS sidebar

- debug is too small, especially when mesages are many or longer
- globals being opened all the time is a bit annoying (may be enable to toggle whole card like accordion, so it can take less space

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 December 2025 20:01 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/38 "2025-12-21T20:01:53Z")

</div>

Having now played with the beta for a few days - I do feel that the node palette still needs to be top left and open by default - with the explorer beneath. When you start on an empty flow I feel beginners must be shown the list of nodes - after all that is what Node-RED is all about. Having to find and open them feels like a real barrier on first launch.

On the right I think the window should not be split by default - (but with the ability to do so) - so as to allow maximum space for whatever (I personally prefer debug but hey...)

I'm not a fan of perspectives - maybe PTSD from eclipse - I always found it more confusing that anything else - as different add-ons could add perspectives and "re-arrange" things as they suggested that were almost like what I had but were different and I had to re-arrange to go back.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2025 20:08 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/39 "2025-12-21T20:08:55Z")

</div>

> [@dceejay](#):
>
> I always found it more confusing that anything else

This ☝

> [@dceejay](#):
>
> Having now played with the beta for a few days - I do feel that the node palette still needs to be top left and open by default

I disagree from the pov that I know node-red but totally understand why you say this (and can't argue against your logic unfortunately). All I'll say is whatever it ends up being it is persistent across sessions (per user)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 December 2025 20:13 UTC](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/40 "2025-12-21T20:13:33Z")

</div>

Totally agree it should persist - but I think on initial start the nodes **must** be shown - if the user then chooses to move/minimise them - then that should be persisted and shows good knowledge progress by the user.

[Previous page](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937.md?page=1)

[Next page](https://discourse.nodered.org/t/node-red-5-beta-1-available/99937.md?page=3)