# What do you guys think about writting nodes using json schemas?
**URL:** https://discourse.nodered.org/t/what-do-you-guys-think-about-writting-nodes-using-json-schemas/96936
**Category:** Developing Nodes
**Created:** [6 May 2025 23:46 UTC](https://discourse.nodered.org/t/what-do-you-guys-think-about-writting-nodes-using-json-schemas/96936 "2025-05-06T23:46:59Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)
#### Post date: [6 May 2025 23:46 UTC](https://discourse.nodered.org/t/what-do-you-guys-think-about-writting-nodes-using-json-schemas/96936/1 "2025-05-06T23:46:59Z")
The framework I'm creating uses json schemas (draft v7) as the source of truth for configs (defaults), credentials, input and outputs messages. This is the folder structure of a single node.
This is an example of a Node that uses json schemas for configs, credentials, input and output messages
>
>
This an example of Config Node that use a schema for Config props only
>
In this framework you can use TypeBox to write your schemas with typechecking or just write an object that complies with json schema draft v7. The only additional keyword I had to add is "nodeType", which allows developers to define the node type of a config node.
Intelisense is based on the types you create from your schemas
Validations run in the server using the same schemas
The client side of your node is now reduced to a simple Vue component
And the registration is much simpler than ever before. You no longer have to redefine defaults or credentials. The source of thruth is also your schemas
If you want to use other node-red node props you can still do it
While writting your node forms you can use the same built in node-red inputs you are used to, but with a much simpler api.
Typed Input
Config Input
Select and MultiSelect Input
Editor Input
To avoid breaking the editor all these inputs are being mounted in the dom using node-red apis (jquery widgets)
sourcemaps out of the box in dev builds
vue devtools
you can choose to disable the save button on error
---
### Author:  [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)
#### Post date: [12 May 2025 15:59 UTC](https://discourse.nodered.org/t/what-do-you-guys-think-about-writting-nodes-using-json-schemas/96936/2 "2025-05-12T15:59:13Z")
I think I have finaly reached a final design for the framework. You can check it out in the following link
> **[GitHub - AllanOricil/node-red-vue-inputs-experiments: Write Node-RED nodes using Vue and Typescript](https://github.com/AllanOricil/node-red-vue-inputs-experiments)**
>
> Write Node-RED nodes using Vue and Typescript
The following is an example of an IONode. IONodes are the ones we can drag and drop in the canvas.
`src/nodes/your-node/server/index.ts`
```ts
import { Static } from "@sinclair/typebox";
import {
CloseDoneFunction,
InputDoneFunction,
IONode,
IONodeValidations,
SendFunction,
} from "../../../core/server/nodes";
import RemoteServerConfigNode from "../../remote-server/server";
import {
ConfigsSchema,
CredentialsSchema,
InputMessageSchema,
OutputMessageSchema,
} from "../schemas";
export type YourNodeConfigs = Static;
export type YourNodeCredentials = Static;
export type YourNodeInputMessage = Static;
export type YourNodeOutputMessage = Static;
export default class YourNode extends IONode<
YourNodeConfigs,
YourNodeCredentials,
YourNodeInputMessage,
YourNodeOutputMessage
> {
static override validations: IONodeValidations = {
configs: ConfigsSchema,
credentials: CredentialsSchema,
input: InputMessageSchema,
outputs: OutputMessageSchema,
};
static override async init() {
console.log("testing your node init");
}
async onInput(
msg: {
payload?: string | undefined;
topic?: string | undefined;
_msgid?: string | undefined;
} & { myVariable?: string | undefined },
send: SendFunction<
{
payload?: string | undefined;
topic?: string | undefined;
_msgid?: string | undefined;
} & { originalType: "string" | "number"; processedTime: number }
>,
done: InputDoneFunction
): Promise {
console.log(this);
console.log(msg);
const server = IONode.getNode(
this.configs.remoteServer
);
console.log(server?.users);
}
async onClose(removed: boolean, done: CloseDoneFunction): Promise {
console.log("removing node");
done();
}
}
```
`src/nodes/your-node/client/index.ts`
```ts
import { defineNode } from "../../../core/client";
import component from "./Form.vue";
export default defineNode({
category: "function",
color: "#FFFFFF",
inputs: 1,
outputs: 1,
icon: "vue.png",
form: {
component,
disableSaveButtonOnError: true,
}
});
```
`src/nodes/your-node/client/Form.vue`
```html
```
`src/nodes/your-node/schemas.ts`
```ts
import { Type, Static } from "@sinclair/typebox";
import {
IONodeConfigsSchema,
TypedInputSchema,
MessageSchema,
} from "../../core/schemas";
const ConfigsSchema = Type.Object(
{
...IONodeConfigsSchema.properties,
name: Type.String({ default: "your-node" }),
myProperty: TypedInputSchema,
myProperty2: TypedInputSchema,
remoteServer: Type.String({ nodeType: "remote-server" }),
anotherRemoteServer: Type.Optional(
Type.String({ nodeType: "remote-server" })
),
country: Type.String({ default: "brazil" }),
fruit: Type.Array(Type.String(), { default: ["apple", "melon"] }),
number: Type.String({ default: "1" }),
object: Type.Array(Type.String(), {
default: [JSON.stringify({ test: "a" }), JSON.stringify({ test: "b" })],
}),
array: Type.String({
default: '["a"]',
}),
jsontest: Type.String({ default: "" }),
csstest: Type.String({ default: "" }),
},
{
$id: "YourNodeConfigsSchema",
}
);
const CredentialsSchema = Type.Object(
{
password: Type.Optional(
Type.String({
default: "",
minLength: 8,
maxLength: 20,
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/.source,
format: "password",
})
),
password2: Type.Optional(
Type.String({
default: "",
pattern:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
.source,
format: "password",
})
),
username: Type.Optional(
Type.String({ default: "", maxLength: 10, minLength: 5 })
),
},
{
$id: "YourNodeCredentialsSchema",
}
);
const InputMessageSchema = Type.Intersect(
[
MessageSchema,
Type.Object({
myVariable: Type.Optional(Type.String()),
}),
],
{
$id: "YourNodeInputMessageSchema",
}
);
const OutputMessageSchema = Type.Intersect(
[
MessageSchema,
Type.Object({
originalType: Type.Union([
Type.Literal("string"),
Type.Literal("number"),
]),
processedTime: Type.Number(),
}),
Type.Unknown(),
],
{ $id: "YourNodeOutputMessageSchema" }
);
export {
ConfigsSchema,
CredentialsSchema,
InputMessageSchema,
OutputMessageSchema,
};
```
The only part that is a little bit complicated is defining JSON Schemas using TypeBox. However, if you don't like it, you can define the JSON Schema by hand, using an object.
---
### Author:  [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)
#### Post date: [12 May 2025 16:13 UTC](https://discourse.nodered.org/t/what-do-you-guys-think-about-writting-nodes-using-json-schemas/96936/3 "2025-05-12T16:13:05Z")
And this is how you create a ConfigNode
`src/nodes/remote-server/server/index.ts`
```ts
import { Static } from "@sinclair/typebox";
import { ConfigNode, ConfigNodeValidations } from "../../../core/server/nodes";
import { ConfigsSchema } from "../schemas";
export type RemoteServerConfigs = Static;
export default class RemoteServerConfigNode extends ConfigNode {
static override validations: ConfigNodeValidations = {
configs: ConfigsSchema,
};
// NOTE: run only once when node type is registered
static override init() {
console.log("server-node");
}
}
```
`src/nodes/remote-server/client/index.ts`
```ts
import { defineNode } from "../../../core/client";
import component from "./Form.vue";
export default defineNode({
category: "config",
color: "#a6bbcf",
form: {
component,
disableSaveButtonOnError: true,
},
});
```
`src/nodes/remote-server/client/Form.vue`
```ts
