# Expandable code editor for ui\_template node

**URL:** https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841
**Category:** Feature Requests
**Created:** [4 September 2018 16:14 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841 "2018-09-04T16:14:29Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [4 September 2018 16:14 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/1 "2018-09-04T16:14:29Z")

</div>

Since version 0.19 the **function node** has this very useful expanded JavaScript editor feature. Is it possible to add this for **ui\_template node** as well?

---

<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: [4 September 2018 16:22 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/2 "2018-09-04T16:22:38Z")

</div>

Yup, Dave and I have discussed this and it will happen. But it has to be added to the core editor of node-red first, and then dashboard updated to use it (and updated to handle it not being there if installed in an older version of nr).

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [4 September 2018 16:26 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/3 "2018-09-04T16:26:22Z")

</div>

Wonderful 🙂

---

<div class="post-metadata">

### Author: ![mu3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mu3/32/4332_2.png) [@mu3](https://discourse.nodered.org/u/mu3)
#### Post date: [5 April 2019 09:41 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/4 "2019-04-05T09:41:59Z")

</div>

Is the new editor based on some project that can be integrated into another system or this is a part of the NR’s core?

---

<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: [5 April 2019 10:06 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/5 "2019-04-05T10:06:09Z")

</div>

The underlying editor widget we use is [https://github.com/ajaxorg/ace](https://github.com/ajaxorg/ace)

But this discussion is more specifically about the NR UI and how a node's edit dialog can take advantage of some of things we can do with the built-in features - specifically being able to expand a text editor to take up the full screen. It is doable today and I know @TotallyInformation has figured out how to drive the editor's APIs to do it with his ui-builder node.

---

<div class="post-metadata">

### Author: ![mu3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mu3/32/4332_2.png) [@mu3](https://discourse.nodered.org/u/mu3)
#### Post date: [5 April 2019 10:28 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/6 "2019-04-05T10:28:54Z")

</div>

Thank you for the information!

Where can I read more about this? Is [this](https://github.com/node-red/designs/blob/master/designs/function-library-node.md#details) related?

> the expanded JS editor introduced in 0.19 could be extended to a more useful IDE

---

<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: [7 April 2019 21:20 UTC](https://discourse.nodered.org/t/expandable-code-editor-for-ui-template-node/2841/7 "2019-04-07T21:20:45Z")

</div>

Hi, I've been on hols.

Have a look at the html file in the v2 branch of uibuilder. That uses the ACE editor component - it isn't that hard to do.
