# Editor based on xsd

**URL:** <https://discourse.nodered.org/t/editor-based-on-xsd/33965>\
**Category:** Developing Nodes\
**Created:** [8 October 2020 22:24 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965 "2020-10-08T22:24:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 October 2020 22:24 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/1 "2020-10-08T22:24:57Z")

</div>

Hi folks,

I'm stuck with one of my nodes in another [discussion](https://discourse.nodered.org/t/node-red-contrib-onvif-nodes-beta-test/33722/7), where I need a user-friendly editor to manipulate a quite large data structure. And I don't want to spend the remaining of my life maintaining a complex user interface.

So I was wondering if anybody knows whether a (javascript/html based) editor exists, that allows to me to manipulate a data structure, based on an [xsd file](https://www.onvif.org/ver10/schema/onvif.xsd).

I don't want to show an xml editor. But would like to have a user friendly user interface, that even less technical users can use. For example an editable tree view, or some other kind of user interface based on an xsd. And that the validations and so on are automatically executed.

Have been looking on google, but I have the impression that I'm using the wrong keywords. Because I would find it very strange if I would have to build something like that myself from scratch...

Thanks!!!!

Bart

---

<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:** [8 October 2020 22:55 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/2 "2020-10-08T22:55:08Z")

</div>

The best known XML/XSD editor I know of is actually Microsoft's OneNote. Not that I think this will do you any good, sorry.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 October 2020 09:43 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/3 "2020-10-09T09:43:59Z")

</div>

Something like this? [https://www.npmjs.com/package/jquery.xmleditor](https://www.npmjs.com/package/jquery.xmleditor)

It has two demos to test. An [empty document](http://unc-libraries.github.com/jquery.xmleditor) and a [prefilled one](http://unc-libraries.github.com/jquery.xmleditor/demo/mods.html).

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 October 2020 10:45 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/4 "2020-10-09T10:45:52Z")

</div>

Something like that might indeed do the job. But it seems to contain some bugs in my Chrome, and the project is not maintained anymore.

Does anybody knows whether I perhaps could use the JSON editor of Node-RED for this?  
Because it looks very nice:

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

But not sure whether I can add some kind of (json?) schema to this, so the user can only input stuff that is allowed? I assume that is not the purpose of this editor ... But it would look cool...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 October 2020 11:09 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/5 "2020-10-09T11:09:44Z")

</div>

As a short term solution, you could permit JSON input and validate it again a schema?

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 October 2020 12:04 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/6 "2020-10-09T12:04:08Z")

</div>

Another possible option came to mind when browsing npm. There were several XSD to JSON schema converters. Perhaps it'd be easier to find a working editor against a JSON schema?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 October 2020 14:35 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/7 "2020-10-09T14:35:24Z")

</div>

> [@ristomatti](#):
>
> XSD to JSON schema

Good idea! So I use an xsd to json schema converter. Then I'm already a step closer to Node-RED standards ...

> [@Steve-Mcl](#):
>
> As a short term solution, you could permit JSON input and validate it again a schema?

That would be perfect! And e.g. the Node-RED json editor would allow to simplify editing a json.

Does anybody know whether it is somehow possible to use the json schema inside the JSON editor. I mean when I want to add an item, that I get a dropdown of the available items (e.g. resolution, brightness, ...)?

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 October 2020 23:08 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/8 "2020-10-09T23:08:57Z")

</div>

Not really but while doing an adhoc search on my phone I ran across this [https://codepen.io/orif-jr/pen/zozdJQ](https://codepen.io/orif-jr/pen/zozdJQ)

Based on the title it's ACE editor together with a JSON validator (whatever that means in this case). I can't make anything out of it with a phone screen so I suppose this is an extreme long shot. 😆

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 October 2020 22:11 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/9 "2020-10-21T22:11:25Z")

</div>

Have been looking over-and-over at various _ **json schema based editors** _ ...

- The [@json-editor/json-editor](https://www.npmjs.com/package/@json-editor/json-editor) package has a nice looking [demo](https://json-editor.github.io/json-editor/css_integration.html). But it has a lot of dependencies which are optional, however it looks awfull when I don't add those dependencies:

- The [json-editor](https://github.com/mirshahreza/json-editor) only depends on JQuery, and generates a property grid:

- The [sditor](https://www.npmjs.com/package/sditor) looks _ **very** _ Node-RED alike:

Not sure which of those 3 options I have to choose.

From a usability point of view, I would prefer the last one. But that will be a lot of work. And suppose I could get it working, it would be a pity if it wouldn't be reusable. Because I think that some other contrib nodes might want to use a widget like that one ...

Any thoughts about this??

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 October 2020 22:29 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/10 "2020-10-21T22:29:44Z")

</div>

> [@BartButenaers](#):
>
> But that will be a lot of work

Although the json schema [reference](http://json-schema.org/understanding-json-schema/reference/index.html) seems to be quite well explained...

---

<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:** [21 October 2020 23:06 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/11 "2020-10-21T23:06:00Z")

</div>

Given there is a visual JSON editor built into Node-RED already, it would be a shame to create another one, rather than take a starting point of wanting to enhance/improve what is already there.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 October 2020 05:09 UTC](https://discourse.nodered.org/t/editor-based-on-xsd/33965/12 "2020-10-22T05:09:21Z")

</div>

Hey Nick,  
Absolutely. Hmmm I should have added this to my comments: of course my first thought was indeed to use the visual json editor. But after having a look at the code, I got a first impression that there are at the moment not really much hooks which I can use to tell it which input is expected. But I can be mistaken. Had only a quick look, because my braun is melted lately due to my daily job 🥺  
But then I will try to look it that direction when I get time. I had hoped last night that you would join this duscussion 😉