Re-arranging tabs....in explorer

Core Development Feature Requests
1

Now when we got to the stage w v5 with all nice looking sidebars and layout possibilities, would it make sense to bring up a feature I really missed since long? Mentioned long time ago actually....

Having the possibility to re-arrange tabs also in the explorer. Just dragging and dropping them to their new position. For small systems with a few tabs this would not be so beneficial. If you on the other hand have a lot of tabs, like in the example below, it would be a more efficient way, you would not have to click on arrows at the top, just use the slider in the explorer to move up and down. Would love to see that!

image
image1215Ă—795 100 KB

2

As an alternative, I created myself a flow stack panel:

Screen Recording 2026-08-27 at 19.18.51

What it does is keep track of the flow tabs I've opened recently. It's stack since when a tab is opened for the first time, it's placed on the top of the stack.

In the animation, the overview of 50 flow tabs in the explorer becomes unwieldy, so the stack keeps track of the recently opened tabs. So before starting some task, I clear the stack and then begin working. Once I've identified all the tabs needed, I switch to the stack and toggle between the tabs I've viewed.

When I click on a flow in the stack, the previous flow tab is highlighted in blue - allowing me to toggle between the last two flows easily.

This is a workaround I came up with to manage my innumerable flows and one that I prefer since it also provides a focus on a subset of flows without having to hide flows in the browser.

3

So good, so handy, really like it, a perfect solution!

As you say, if have many tabs, it is currrently hard to re-arrange them. Especially if you then create a new one that by default is added at the end and would like it to appear as the first. The shift-click area in between existing tabs is very narrow, makes it sensitive and many times the new tab appears at the end anyway

4

With a great help from AI I created a cool tab manager....allows me to change tab orders and even change the name of them

image
image1915Ă—789 156 KB

5

@krambriw to the original request, yes, reordering via the explorer would be super helpful.

If anyone wanted to contribute to help make that happen, it would be most welcome.

Using AI to generate your own custom local solution is super powerful; just remember it can also help you make contributions back to the core... :wink:

6

Yes, it is like magic!! I now have npm installable versions for Node-RED v4 & v5. Both are working really good. Changes made are reflected correctly; either directly changing tab position in the NR editor or in the tab manager side bar works as expected.

Just need to understand how to publish on npm....maybe I should just upload zip's here with a readme to start?

7

Or link to your GitHub repository then anyone can install directly from there.

8

This seems to be an obvious candidate for inclusion in the core editor.

If you can manage to achieve that I am certain it would be much more widely used than a plugin which we have to install separately.

And once it's practical to move tabs around, hopefully an option to group them, including group colour coding on the page header. :slightly_smiling_face:

9

Well, bear with me, my first attempt to use github this way, here the first version is anyway. I have tried it both with Node-RED v4 & v5, both works fine

10

Learning by doing...now you can try it out and install with npm:

cd ~/.node-red

For Node-RED v4:
npm install node-red-tab-manager-v4

For Node-RED v5:
npm install node-red-tab-manager-v5

Then restart your Node-RED instance and force-refresh your browser (Ctrl + F5 or Cmd + Shift + R)

11

Great stuff! I shamelessly copied that and added draggable to my solution :smiley:

Now I can use treeList and have it be draggable - I'll probably end up adding draggable to a few other treeLists that I have.

Thanks for sharing your solution :+1:

12

Thanks! Just updated them to version 1.0.1. Now with a button to make them free floating, i.e. you can drag it to a separate monitor if wanted

image
image1352Ă—830 123 KB

13

Been away for a few days (long and painful story) but this looks good.

Now you just need the final step of publishing that to npmjs tagged with "node-red" then it can be picked up in the palette manager and the Flows site.

14

Thanks, I hope I did that (completely unfamiliar with both npm & github uploading of stuff...)

npm dist-tag ls node-red-tab-manager-v5
latest: 1.0.1
node-red: 1.0.1

npm dist-tag ls node-red-tab-manager-v4
latest: 1.0.1
node-red: 1.0.1
15

Cant see this on npmjs.org

16

Yeah, see that, have no idea, I think I have published and made them public

image
image1422Ă—799 73.1 KB

17

OK, that's odd. I can't see it on npm.

https://www.npmjs.com/search?q=node-red-tab-manager-v5

image
image1517Ă—670 110 KB

As you can see, nothing is returned.

It may be because of the way you've set up your repo. You have a single repo for 2 packages. To publish to npm, you would need to do an npm publish --access public from each sub-folder. You will likely have to do npm login first in order to meet the publishing requirements of npm.

Ah, I see, if I go direct to:

https://www.npmjs.com/package/node-red-tab-manager-v5

image
image1221Ă—545 61.1 KB

I can see it. But if I search for it, I cannot. I wonder if this is one of the new security features of npm - in fact, now I think about it, I think I did read about this - maybe I even posted about it. You will need to wait until it is searchable before it can be added to the Flows site and be useable in the Palette Manager.

In case it helps, the following are the release steps I use for UIBUILDER. Publishing is step 8.

18

Struggling a bit...think I managed. Now they at least can be found in search at npmjs.org. Added some files like LICENSE and README.md and some naming issues. Two versions, v4 for Node-RED version 4 and v5 for Node-RED version 5

(not sure but maybe v5 works for both NR 4 and NR 5)

EDIT: v5 also works for me if I install it for Node-RED 4 so maybe v4 could omitted

19

For some reason the Flows site hasn't picked up the current README that shows on npmjs but at least it is there. You could update your readme to show that it can be installed via the palette manager now.

20

You see them in the palette now? I do not....

I guess it is because several criterias like naming etc etc are not fulfilled. I'm not sure it should be in the palette either, I let management decide, this is just a suggestion for a useful tab organizer. To be used or not

image
image1422Ă—799 49.3 KB