# How to edit config.js file

**URL:** <https://discourse.nodered.org/t/how-to-edit-config-js-file/20266>\
**Category:** Dashboard\
**Created:** [13 January 2020 15:00 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266 "2020-01-13T15:00:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 15:00 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/1 "2020-01-13T15:00:30Z")

</div>

I would like to have customize tab in right palette exactly like how config does. So, how can I edit config src code to add few more enchantments.

Note: I don't want to modify the existing config tab but I want to create a new tab containing same behavior how config does and add few more features into it.

---

<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:** [13 January 2020 15:04 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/2 "2020-01-13T15:04:35Z")

</div>

Hi @tanya

can you explain a bit more what you mean?

Do you mean you would like to create a custom sidebar tab in the editor? Is this related to a node you are creating for Node-RED? Or do you want to create a custom version of Node-RED itself?

Creating a custom sidebar tab is not very well documented - and it would help to understand a bit more about what you are trying to do so I can point you in the right direction.

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 16:17 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/3 "2020-01-13T16:17:26Z")

</div>

Hi,  
Thanks for replying!

I want to mimic how config tab is working on sidebar. exactly same i want to create one more tab on sidebar. How can i do that?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b63c65225c8123fdadd7aa81e415876d4e8a224.png)

---

<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:** [13 January 2020 16:26 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/4 "2020-01-13T16:26:54Z")

</div>

> [@knolleary](#):
>
> Is this related to a node you are creating for Node-RED? Or do you want to create a custom version of Node-RED itself?

It would help if you could provide a bit more information about what you are trying to do. As I said, this isn't well documented and the best I can do is point you at examples - but I need to know a bit more from you.

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 16:38 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/5 "2020-01-13T16:38:18Z")

</div>

Yes I would like to create a custom sidebar tab in the editor.Yes this is related to a node am creating for Node-RED. I want to create similar tab like config tab which is on sidebar.

Note: I want all features which are there in config tab in sidebar with few more features which i want to add. My question is how to run tab-config.js file on node red so that i can add few more enchantments to it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/965c90a92ab9ecea9c2de371f68bd0b08b2ae276.png)

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 16:41 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/6 "2020-01-13T16:41:45Z")

</div>

Yes I would like to create a custom sidebar tab in the editor.Yes this is related to a node am creating for Node-RED

---

<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:** [13 January 2020 16:49 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/7 "2020-01-13T16:49:25Z")

</div>

Hi @tanya

> [@tanya](#):
>
> Yes this is related to a node am creating for Node-RED

In your node's [html definition](https://nodered.org/docs/creating-nodes/node-html#node-definition) you can define a function called `onpaletteadd`. This will get called when your node is loaded into the editor.

Inside that function you can do the work to create the sidebar tab.

(You should also define `onpaletteremove` that can be used to delete the sidebar tab if you node is removed.... but that can be done later)

The main call to register a new sidebar looks like this:

```auto
RED.sidebar.addTab({
    id: "config",
    label: RED._("sidebar.config.label"),
    name: RED._("sidebar.config.name"),
    content: content,
    toolbar: toolbar,
    iconClass: "fa fa-cog",
    action: "core:show-config-tab",
    onchange: function() { refreshConfigNodeList(); }
});

```

As you have already found `tab-config.js` I suggest you step through it to see how it creates `content` and `toolbar` - you'll need to do something similar to get the CSS classes right for those components.

You've said you want a sidebar that is like the config node sidebar, but with some enhancements. Can you explain what enhancements you want?

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 18:57 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/8 "2020-01-13T18:57:38Z")

</div>

How can I run this file tab-config.js? I want to run on node red and see the changes i made to this file. how can i check my changes on node red?

---

<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:** [13 January 2020 19:42 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/9 "2020-01-13T19:42:23Z")

</div>

@tanya so you want to modify the core editor code? I thought you wanted to add a custom sidebar with your node?

What changes do you want to make to the file? What are the enhancements?

`tab-config.js` is part of the editor source code - you can't just modify and run it. You have follow the steps listed here: [https://github.com/node-red/node-red#developers](https://github.com/node-red/node-red#developers) That will get you to the point where you are able to run a build of the node-red code. You can then modify tab-config.js ,run a build and then run node-red to see the changes.

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://discourse.nodered.org/u/tanya)\
**Post date:** [13 January 2020 19:48 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/10 "2020-01-13T19:48:19Z")

</div>

I want to group all the debug options created on my nodes to render on sidebar like config tab is doing.

Am unable to modify tab-config.js and see results on node red at browser.(am going through all the steps)

[/quote]

---

<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:** [13 January 2020 19:53 UTC](https://discourse.nodered.org/t/how-to-edit-config-js-file/20266/11 "2020-01-13T19:53:57Z")

</div>

> [@tanya](#):
>
> Am unable to modify tab-config.js and see results on node red at browser.(am going through all the steps)

If you want your node to provide its own sidebar, then you need to put the code for that in your node's html file and use the `onpaletteadd` function to call it. It will then get loaded when your node is loaded.

You'll have to copy the code out of tab-config.js, but to do that, you'll need to step through it to understand what it is doing.