# Exploring NR Editor source code - wrt new ideas

**URL:** <https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100>\
**Category:** General\
**Created:** [18 November 2019 14:07 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100 "2019-11-18T14:07:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tony-shannon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tony-shannon/32/7378_2.png) [@tony-shannon](https://discourse.nodered.org/u/tony-shannon)\
**Post date:** [18 November 2019 14:07 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100/1 "2019-11-18T14:07:39Z")

</div>

Hi  
I'm exploring some of the key aspects of NodeRed editor and wondering how they can be edited/customised +/- /improved..

For instance this panel here in the Change Node -- for JSONata expressions

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3462c2fb905870065b623682bb64ad8cfc607181.png)

I would like to be able to experiment with some local changes..eg something like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cd65164faae650d31688fa57bc57ad42df087600.png)  
that I am using on another project

I've been trying to explore the source code that underpins the editor but its somewhat tricky to navigate  
I thought I would find it here

> <https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/15-change.html>

  
but its not a clear match

Am I missing something (ie I cant see "Function Reference" , "Test", "Example Message" or "Result" in the NR Editor source code) or perhaps its due to the abstraction of the source code that I'm not able to follow?

Thanks in advance  
Tony

---

<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:** [18 November 2019 14:15 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100/2 "2019-11-18T14:15:03Z")

</div>

Hi @tony-shannon

the JSONata expression editor is built into the core so it can be reused by any node.

It lives here: [https://github.com/node-red/node-red/tree/master/packages/node\_modules/%40node-red/editor-client/src/js/ui/editors](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors)

alongside the other type editors (JSON, Markdown, etc).

---

<div class="post-metadata">

**Author:** ![tony-shannon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tony-shannon/32/7378_2.png) [@tony-shannon](https://discourse.nodered.org/u/tony-shannon)\
**Post date:** [18 November 2019 14:25 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100/3 "2019-11-18T14:25:10Z")

</div>

thanks @knolleary

That makes sense.  
I'm looking at the source code for expressions there and still not seeing references to " "Function Reference" , "Test", "Example Message" or "Result" from the panel...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/ffd7d3873523ec659363f5a43b138bd952a41ce4.png)

so wondering where they are coming from?

Please forgive me if they are staring me in the face but I cant see them , so cant quite follow the code..

thanks again  
Tony

---

<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:** [18 November 2019 14:34 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100/4 "2019-11-18T14:34:09Z")

</div>

All pieces of text in the UI are handled through a message catalog that allows them to be translated.

The two tabs you can see are added here: [https://github.com/node-red/node-red/blob/master/packages/node\_modules/%40node-red/editor-client/src/js/ui/editors/expression.js#L221-L225](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/expression.js#L221-L225)

You can see it sets the label of the tab with the code: `RED._('expressionEditor.functionReference')`.

This tells the editor to lookup the value value of `expressionEditor.functionReference` in whatever language the editor is currently using.

That particular message value, in English, is here: [https://github.com/node-red/node-red/blob/master/packages/node\_modules/%40node-red/editor-client/locales/en-US/editor.json#L772](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/locales/en-US/editor.json#L772) alongside the other messages for the expression editor.

---

<div class="post-metadata">

**Author:** ![tony-shannon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tony-shannon/32/7378_2.png) [@tony-shannon](https://discourse.nodered.org/u/tony-shannon)\
**Post date:** [18 November 2019 15:00 UTC](https://discourse.nodered.org/t/exploring-nr-editor-source-code-wrt-new-ideas/18100/5 "2019-11-18T15:00:55Z")

</div>

thanks for the detailed explanation Nick  
Makes sense

I had hoped I would have been able to trace that up through the code, if I was able to find any of those keywords via a text search in the codebase.  
For some reason when I did a text search for that via Github it didn't show that up in the results, don't know why..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5e1871fe7ae91fe0fd25df04a707ebb1eab1471c.png)

Anyway that explanation really helps.. thank you  
Tony