# Have an "out of the box" editor for inputs

**URL:** <https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020>\
**Category:** Developing Nodes\
**Created:** [22 October 2019 15:44 UTC](https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020 "2019-10-22T15:44:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JbIPS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jbips/32/9246_2.png) [@JbIPS](https://discourse.nodered.org/u/JbIPS)\
**Post date:** [22 October 2019 15:44 UTC](https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020/1 "2019-10-22T15:44:24Z")

</div>

Hi,

I created some custom nodes and as they grow I want to polish their properties editor. In most case, have a nice textarea editor with JSON syntax highlighting.

To do that, I copy/paste the code of the "Template" node with some adjustment. I did it once, then twice, then had enough of copying all the `onedit...` custom handler and the HTML tags.

Is there a more "out of the box" solution ? Like a input type `editor`? Or maybe just a lib which would insert the HTML marking and add the handler in the registration process?

I don't know if this exists and if it should, but it's a pain each time I want to make a nice UI and I cannot be the only one. I'm ready to develop/test something but I'd like some inputs on the "How" and maybe warning of edge cases or such.

Thank you

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [22 October 2019 17:12 UTC](https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020/2 "2019-10-22T17:12:46Z")

</div>

Do you mean the actual HTML file containing the UI code of your custom node? Or do you mean an input text field for a property that supports highlighting?

For the latter you could use the ACE editor that is already shipped with Node-RED. Function or template nodes are great examples for its usage.

---

<div class="post-metadata">

**Author:** ![JbIPS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jbips/32/9246_2.png) [@JbIPS](https://discourse.nodered.org/u/JbIPS)\
**Post date:** [22 October 2019 17:33 UTC](https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020/3 "2019-10-22T17:33:54Z")

</div>

Yes, I'm talking about property that supports highlighting (like Template) and I'm using ACE, but that's not very a drop-in solution, you need to create multiple inputs (hidden, textarea, button), handle edit/prepare/save/cancel and a little bit of CSS.

So the idea would be to bundle all of this in a simple operation to encourage node creator to use all the capabilities of NodeRED, ACE included.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [22 October 2019 18:03 UTC](https://discourse.nodered.org/t/have-an-out-of-the-box-editor-for-inputs/17020/4 "2019-10-22T18:03:59Z")

</div>

Ah, now I see. And you're right, there are quite a few steps to get it done when using ACE. I have used it in some of my nodes, too.

But the same goes for the other widgets, like the [EditableList](https://nodered.org/docs/api/ui/editableList/). Even though they provide _some_ level of abstraction, you have to take care of the custom stuff in the prepare and save hooks... like converting the data, creating your controls, etc. I don't think there can be much done to reduce this.

Also keep in mind that ACE is highly customizable, you wouldn't want to lose that.

I agree that things can get complicated if you want to use multiple instances of ACE. In my case I used one instance and switched the content (and config) via tabs.