# How to add new tabs in Node Editor Window

**URL:** <https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655>\
**Category:** Developing Nodes\
**Tags:** editor\
**Created:** [3 December 2024 08:29 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655 "2024-12-03T08:29:07Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [3 December 2024 11:22 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655/3 "2024-12-03T11:22:57Z")

</div>

Here is the Editor JS code:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/resources/uibuilder.js#L1567-L1605>

Here are my Obsidian notes on RED.tabs:

**RED.tabs**

- [https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/3](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/3)
- [https://github.com/node-red/node-red/blob/master/packages/node\_modules/%40node-red/nodes/core/function/10-function.html#L358](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L358)
- [https://github.com/bartbutenaers/node-red-contrib-blockly/blob/master/blockly.html#L624](https://github.com/bartbutenaers/node-red-contrib-blockly/blob/master/blockly.html#L624)
- [https://github1s.com/node-red/node-red/blob/HEAD/packages/node\_modules/@node-red/editor-client/src/js/ui/common/tabs.js](https://github1s.com/node-red/node-red/blob/HEAD/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js)

```js
	this.tabs = RED.tabs.create({
	     id: "node-svg-tabs",
	     scrollable: true,
	     collapsible: true,
	     onchange: function(tab) { }
	})
	
	this.tabs.addTab({
	     id: "node-svg-tab-source",
	     label: "SVG source"
	})
	
	this.tabs.removeTab("node-svg-tab-editor")
	
	this.tabs.order(["node-svg-tab-source", "node-svg-tab-editor", "node-svg-tab-animations"])

```

```js
	const tabs = RED.tabs.create({
            id: 'el-tabs',
            // scrollable: true,
            // collapsible: true,
            onchange: function (tab) {
                $('#el-tabs-content').children().hide()
                $('#' + tab.id).show()
            }
        })
        tabs.addTab({
            id: 'el-tab-main',
            label: 'Main'
        })
        tabs.addTab({
            id: 'el-tab-conf',
            label: 'Element Config'
        })

```

```html
<div class="form-row func-tabs-row">
 <ul style="min-width: 450px; margin-bottom: 20px;" id="el-tabs"></ul>
</div>

<div id="el-tabs-content">
 <div id="el-tab-main" style="display:none">
     <!-- ... -->
 </div>
 <!-- ... -->
</div>

```

 ![Pasted image 20221201141739](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/315b6c214eb03867f6c3677a9762c93f0bf2a130.jpeg)

the Function node, or the MQTT Broker config nodes. They both contain tabbed sections and will show how it is done. [node-red/packages/node\_modules/@node-red/nodes/core/network/10-mqtt.html at b3ce0c007907b93aeb52e13631597ff258719254 · node-red/node-red · GitHub](https://github.com/node-red/node-red/blob/b3ce0c007907b93aeb52e13631597ff258719254/packages/node_modules/%40node-red/nodes/core/network/10-mqtt.html#L545)

---

_[View the full topic](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655)._