# 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:** 5
**Page:** 1
### Author:  [@kamronkhakimov](https://discourse.nodered.org/u/kamronkhakimov)
#### Post date: [3 December 2024 08:29 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655/1 "2024-12-03T08:29:07Z")
There are many tabs under properties tab. Where can I find documentation to it?
---
### Author:  [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [3 December 2024 10:01 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655/2 "2024-12-03T10:01:28Z")
Welcome to the forums @kamronkhakimov
I couldn't find any documentation, but in a nutshell - you will do something like this.
1. Define the containers, in your HTML
```auto
```
1. in `oneditprepare` - create the Tabs
```js
$('#tabs-content').children().hide()
$(`#tab-1`).show() /* Show initial */
const tabs = RED.tabs.create({
id: 'tabs',
scrollable: false,
collapsible: false,
onchange: function(tab) {
$('#tabs-content').children().hide()
$(`#${tab.id}`).show()
})
})
tabs.addTab({ id: 'tab-1', label: 'My Tab 1' })
tabs.addTab({ id: 'tab-2' label: 'My Tab 2' })
```
Note: this was based on [node-red-contrib-uibuilder (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-uibuilder) by @TotallyInformation
---
### Author:  [@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")
Here is the Editor JS code:
>
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
```
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)
---
### Author:  [@kamronkhakimov](https://discourse.nodered.org/u/kamronkhakimov)
#### Post date: [4 December 2024 10:58 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655/4 "2024-12-04T10:58:49Z")
Thanks! That is exactly what I needed.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 December 2024 10:59 UTC](https://discourse.nodered.org/t/how-to-add-new-tabs-in-node-editor-window/93655/5 "2024-12-18T10:59:38Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.