# JSON-Editor in UI

**URL:** <https://discourse.nodered.org/t/json-editor-in-ui/29068>\
**Category:** Developing Nodes\
**Created:** [27 June 2020 14:22 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068 "2020-06-27T14:22:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![deme](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@deme](https://discourse.nodered.org/u/deme)\
**Post date:** [27 June 2020 14:22 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/1 "2020-06-27T14:22:21Z")

</div>

Hello,

I am trying to build a node which allows the user to edit a JSON in the UI. To provide the user some visual clues about the structure of the JSON, I wanted to use the same IDE that is used in the node-red function editor: [Ace](https://github.com/ajaxorg/ace)

As starting-point, I wanted to include the editor in a template node:

```auto
<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

```

I am currently struggling what the correct path for `ace.js` is.

Furthermore, afterall, is this the correct approach? Did I miss any existing node which allows the user to edit a JSON in the UI?

Thanks

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [27 June 2020 14:26 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/2 "2020-06-27T14:26:56Z")

</div>

The inject node and change node both allow you to edit json to be send as a payload. So maybe look at their code as the json editor there includes automatic formatting and a visual json builder.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c8ee42a8aca71499f83962870bc3eda2de7ce40.jpeg) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f625c1d9bf87af35cace3d7cd50a4b79b016920a.jpeg)

---

<div class="post-metadata">

**Author:** ![deme](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@deme](https://discourse.nodered.org/u/deme)\
**Post date:** [27 June 2020 14:48 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/3 "2020-06-27T14:48:00Z")

</div>

this is basically what I want to have as a regular ui-node.

If I am not mistaken, the corresponding file is this:

> <https://github.com/node-red/node-red/blob/master/packages/node_modules/@node-red/nodes/core/common/20-inject.html>

However, I am completly at a loss where the `JSON editor` is to be found...

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [27 June 2020 14:51 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/4 "2020-06-27T14:51:32Z")

</div>

Rather than directly calling `ace.edit`, the Node-RED core has pre-existing editors available. One worthwhile to take a look at how it works, and how to expand it to a full width editor, is the Template node from the `functions` category: [node-red/packages/node\_modules/@node-red/nodes/core/function/80-template.html at master · node-red/node-red · GitHub](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/80-template.html)

The way this works is that in `onEditPrepare` a call is placed to `RED.editors.createEditor`, which puts the editor in place.

```auto
 this.editor = RED.editor.createEditor({
    id: 'node-input-template-editor',
    mode: 'ace/mode/html',
    value: $("#node-input-template").val()
});

```

What you set as mode is the format used by default, as the template node includes a list of options to provide highlighting for. For `json` you would use `mode: 'ace/mode/json'`.

The difference with the code you're seeing here for expanding is that rather than call `editText` you have to call `editJson`, which leads to this part of code: [node-red/packages/node\_modules/@node-red/editor-client/src/js/ui/editors/json.js at master · node-red/node-red · GitHub](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/json.js)

Within the `RED.editors.createEditor` function, the call to `ace.edit` is made:

> <https://github.com/node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/%40node-red/editor-client/src/js/ui/editor.js#L2437>

Then, on `showTypeEditor` handles the logic for displaying the exact type editor, which is what happens behind the scenes when calling `editJson`:

> <https://github.com/node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/%40node-red/editor-client/src/js/ui/editor.js#L2417>

> [@deme](#):
>
> However, I am completly at a loss where the `JSON editor` is to be found...

As the JSON part of the inject node is handled as part of the TypedInput, it sadly isn't found within the inject node's code. For showing this view, you could combine the knowledge from the template node as shown above, with what it shows there for the expand button function, but if you don't set the width to infinity and use `editJSON` rather than `editText`, you get the same overlay as the inject node.

I hope this helps, I'm currently working in putting something similar in place for uibuilder, rather than have it use the regular `ace.edit` calls as using those will mean the expanding won't work on all devices.

Here's the specific code for expanding in the inject node by the way, through the typedInput:

> <https://github.com/node-red/node-red/blob/708620f929199b392c5a30cae502b540f94546d0/packages/node_modules/%40node-red/editor-client/src/js/ui/common/typedInput.js#L63-L81>

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [30 June 2020 12:22 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/5 "2020-06-30T12:22:09Z")

</div>

hi @deme,  
I've seen your message in DM, but I'm not interested in doing the development on your node for you. I've other projects eating up most of my time. For future readers of this topic, the author has seen my response and has considered this too difficult to implement. He's looking for people to instead implement it for him in his node, potentially paid through a donation.  
Maybe someone else is interested in picking this up.

---

<div class="post-metadata">

**Author:** ![deme](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@deme](https://discourse.nodered.org/u/deme)\
**Post date:** [30 June 2020 13:41 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/6 "2020-06-30T13:41:56Z")

</div>

to add to this: the required know-how to implement this exceeds my current knowledge, hence I will not be able to develop this on my own.

If somebody is interested in the functionality above, I would be willing to "kickstart" the development (no strings attached, ideally you will publish the code as open-source). Please contact me if you are interested.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 August 2020 13:41 UTC](https://discourse.nodered.org/t/json-editor-in-ui/29068/7 "2020-08-29T13:41:59Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.