# JSON Typed into with schema validation

**URL:** <https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499>\
**Category:** Developing Nodes\
**Created:** [12 January 2024 03:15 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499 "2024-01-12T03:15:32Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thomassorensen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomassorensen/32/45692_2.png) [@Thomassorensen](https://discourse.nodered.org/u/Thomassorensen)\
**Post date:** [12 January 2024 03:15 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/1 "2024-01-12T03:15:32Z")

</div>

Has anyone found a good way to allow the user to edit a JSON document that enforce schema validation?

Currently I use the JSON TypedInput, but the only way I found to implement the schema validation to return false on validation error. It does not give the best user experience that they have to close the editor to see the validation error.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [12 January 2024 09:21 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/2 "2024-01-12T09:21:38Z")

</div>

Good question 🤔

If the JSON is in unexpanded input form, a tooltip may appear below with an error message. However, if the input is expanded (editor), I believe there is nothing (apart JSON correction with Monaco).

Validation is done on input, switching to an editor does not trigger validation until the editor is closed.

I don't think we can extend validation to the editor 😕

> [@Thomassorensen](#):
>
> return false

returns String to show an error message

Note that the current version of NR may prevent you from seeing the tooltip  
See the [FR](https://discourse.nodered.org/t/proposal-add-validation-tooltip-message-to-all-fields/83229/4) and actual work [here](https://github.com/GogoVega/node-red/tree/tooltip-input-validation)

---

<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:** [12 January 2024 09:35 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/3 "2024-01-12T09:35:20Z")

</div>

> [@GogoVega](#):
>
> Validation is done on input, switching to an editor does not trigger validation until the editor is closed.

Is that true, I seem to remember seeing a red outline to the editor if the JSON isn't valid?

But in any case, if you could add a schema validation extension to the Monaco editor, it should be possible to tie into its validation. Dynamic display should then be possible anyway as long as there is some event to tie into. I'm not familiar with the internals of Monaco but as it is specifically built with live Linting in mind, I would expect there to be something that can be used.

* * *

Not quite the same but shows that it should be possible: [reactjs - React monaco editor json schema validation event - Stack Overflow](https://stackoverflow.com/questions/71714799/react-monaco-editor-json-schema-validation-event)

And this:

> **[Monaco Editor JSON Schema Validation: A Comprehensive Guide](https://hatchjs.com/monaco-editor-json-schema-validation/)**
>
> Monaco Editor JSON Schema Validation: Validate your JSON schemas with the Monaco Editor in a few clicks. Get started today and see how easy it is to ensure your schemas are valid.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [12 January 2024 09:39 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/4 "2024-01-12T09:39:55Z")

</div>

> [@TotallyInformation](#):
>
> Is that true, I seem to remember seeing a red outline to the editor if the JSON isn't valid?

This is Monaco editor validation - not input validation

> [@TotallyInformation](#):
>
> could add a schema validation extension to the Monaco editor

Have to ask Steve if it’s possible.

---

<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:** [12 January 2024 09:50 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/5 "2024-01-12T09:50:28Z")

</div>

> [@GogoVega](#):
>
> This is Monaco editor validation - not input validation

Yes, but as long as the Monaco validations creates an event, then the Node-RED Editor can respond to it. The REACT example I shared is a very similar parallel. There is nothing special about the Editor, it is a web page when all is said and done.

> [@GogoVega](#):
>
> Have to ask Steve if it’s possible.

🙂

Looks like JSON Schema validation is available in Monaco itself?

[https://codesandbox.io/p/sandbox/monaco-editor-json-validation-example-gue0q?file=%2Fsrc%2Findex.js](https://codesandbox.io/p/sandbox/monaco-editor-json-validation-example-gue0q?file=%2Fsrc%2Findex.js)

---

<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:** [12 January 2024 15:25 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/6 "2024-01-12T15:25:43Z")

</div>

> [@TotallyInformation](#):
>
> Looks like JSON Schema validation is available in Monaco itself?

Yes, it is. A call to `monaco.languages.json.jsonDefaults` would do it. **However** , the user would need to first duplicate the `json` model (i.e. as `json_my_node` model) and apply it to THAT model as all the the models are shared (i.e. we would now want all JSON inputs to be validated with the schema this node adds)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [12 January 2024 16:01 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/7 "2024-01-12T16:01:45Z")

</div>

And is it possible to link it to typedInput?  
Wouldn't it be simpler for the developer to use `RED.editor.editJSON` with `schema` property?

---

<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:** [12 January 2024 16:58 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/8 "2024-01-12T16:58:01Z")

</div>

Not without some forethought but creating duplicate model, setting the schema and then opening the editor through ctrateEditor (providing the name of the new model) _should_ surface any schema errors.

Untested and written from phone on a metro on the way to Newcastle 🍻 😂

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [12 January 2024 17:02 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/9 "2024-01-12T17:02:16Z")

</div>

> [@Steve-Mcl](#):
>
> but creating duplicate model

This is to avoid that but I think we have to recreate it?

Tkt 😉 🍻

---

<div class="post-metadata">

**Author:** ![Thomassorensen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomassorensen/32/45692_2.png) [@Thomassorensen](https://discourse.nodered.org/u/Thomassorensen)\
**Post date:** [18 January 2024 03:41 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/10 "2024-01-18T03:41:55Z")

</div>

Thanks for all the replies. It sounds like Monaco editor is the way to go! Next step is to browse the function node source code, to see if I can learn how to integrate Monaco in my UI..

---

<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:** [18 January 2024 06:39 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/11 "2024-01-18T06:39:05Z")

</div>

> [@Thomassorensen](#):
>
> how to integrate Monaco in my UI..

`RED.editor.createEditor`

E.g.  
Create:

> <https://github.com/bestlong/node-red-contrib-mssql-plus/blob/64f78f4d929179301fd0c7daf4a22a16c2d1661e/src/mssql.html#L427>

Destroy:

> <https://github.com/bestlong/node-red-contrib-mssql-plus/blob/64f78f4d929179301fd0c7daf4a22a16c2d1661e/src/mssql.html#L767>

---

<div class="post-metadata">

**Author:** ![ghocev1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghocev1/32/81671_2.png) [@ghocev1](https://discourse.nodered.org/u/ghocev1)\
**Post date:** [3 March 2024 10:58 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/12 "2024-03-03T10:58:51Z")

</div>

@Thomassorensen Hello. I am learning Sparkplug B protocol with your node-red-contrib-mqtt-sparkplug-plus (node). Do you know why metric data "is\_historical" does not work with node "mqtt sparkplug device"? It works with a "the mqtt sparkplug out" in the ignition scada. It would be nice if it worked with a "mqtt sparkplug device" also. I only found where to reach you in this discussion, so I am sorry that this topic is not complied with disscution here. Thank you for your answer.

---

<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:** [2 May 2024 10:59 UTC](https://discourse.nodered.org/t/json-typed-into-with-schema-validation/84499/13 "2024-05-02T10:59:00Z")

</div>

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