# Write fully typed Node-RED nodes with @bonsae/nrg framework

**URL:** <https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825>\
**Category:** Share Your Projects\
**Created:** [23 April 2026 03:15 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825 "2026-04-23T03:15:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [23 April 2026 03:15 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825/1 "2026-04-23T03:15:35Z")

</div>

Template V3: [GitHub - AllanOricil/node-red-vue-template: Write Node-RED nodes using Vue and Typescript · GitHub](https://github.com/AllanOricil/node-red-vue-template)  
@bonsae/nrg: [GitHub - bonsaedev/nrg: Build Node-RED nodes with Vue 3, TypeScript, and JSON Schema · GitHub](https://github.com/bonsaedev/nrg)

Soon `@bonsae/create-nrg` will be available to ease the scaffolding of Node-RED nodes built with nrg

**What's New**

v3 is a complete rewrite powered by the `@bonsae/nrg` framework.

**Zero-Config Client**

The entire src/client/ directory is now optional. Your nodes are automatically registered based on their server-side class definitions — no client code required.

- No client/index.ts — node registration is auto-generated at build time
- No client/components/{type}.vue — forms are rendered automatically from your Config and Credentials schemas
- No client/nodes/{type}.ts — category, color, inputs, outputs, and icon are read from the server class

Only create client files when you need to:

- components/{type}.vue — custom form UI beyond what the schema generates
- nodes/{type}.ts — client-only hooks like onPaletteAdd or custom label functions
- index.ts — control registration order or add custom initialization

**Server-Driven Schemas**

Define your node's config, credentials, input, and output schemas once using TypeBox. The framework uses them everywhere:

- TypeScript type inference (Infer)
- Server-side validation (AJV)
- Client-side real-time validation
- Auto-generated editor forms
- Pre-computed defaults at build time

Config and Credentials schemas are optional. When provided, they define the node's editable properties, generate the editor form automatically, and enable client-side  
validation. Without them, the node appears in the palette with no configuration panel.

Input and Output schemas are also optional. When provided, users get a toggle in the editor to enable runtime message validation per node instance. This is useful for:

- Catching unexpected message shapes during development
- Enforcing contracts between nodes in production flows

You don't need to define every field in your input/output schemas. Use them as a base contract — validate the fields you care about and let the rest pass through.  
Node-RED messages are plain JavaScript objects that can carry arbitrary properties, so your schemas should reflect only what your node actually reads or writes, not the  
entire message structure.

Even without schemas, you can still provide TInput and TOutput type parameters to the IONode generic class for full TypeScript type safety in your input() and send()  
methods. In the future, these type parameters will enable compile-time wiring validation — the framework will be able to verify that connected nodes have compatible  
input/output types, catching wiring errors before deployment.

Other Highlights

- ESM server build with auto-generated CJS bridge for Node-RED compatibility
- Per-instance validation toggles — users can enable input/output validation from the editor
- Per-port output validation — outputsSchema accepts Schema[] for multi-output nodes
- Dynamic output ports — include outputs in your config schema and users can change it from the editor
- Simplified lifecycle — done() is called automatically, this.send() works everywhere, timers auto-cleanup
- Type-checking before build — pnpm build runs tsc before bundling
- Source maps in production builds for easier debugging
- automatic deregistration of timers when using internal timer methods
- **beter APIs**
- new hooks: registered and created
- support of ESM only dependencies
- a lot more

`auto-wired-node` form was fully generated by nrg at build time based on the schemas defined at `./src/server/nodes/auto-wired-node.ts` class

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

`your-node` form was taken from `./src/client/components/your-node.vue`

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

Client and Server debug is still working as before with source maps available.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10d2892f241088176f13a8ca328cc3ff7e94ba49.png)

And since we are using Vue for authoring forms, Vue dev tools are available in the browser and in VSCode.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91a4ef124a9dbcedd5dac18add4875a459f86fa2.png)

disclaimer: AI is being used only to assist me with work that I've done thousand times. The whole framework design and implementation was conceived by my brain and hands. I started thinking about it around 2023~2024 after disliking my dev experience using vanilla Node-RED. I'm a believer that if Node-RED wants to standout dx is a must.

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [24 April 2026 02:53 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825/2 "2026-04-24T02:53:00Z")

</div>

Scaffolding tool was updated

> **[NRG](https://bonsaedev.github.io/nrg/)**
>
> Build Node-RED nodes with Vue 3, TypeScript, and JSON Schema validation

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [29 April 2026 20:16 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825/3 "2026-04-29T20:16:07Z")

</div>

@bonsae/nrg@v0.6.0 released

> **[Release v0.6.0 · bonsaedev/nrg](https://github.com/bonsaedev/nrg/releases/tag/v0.6.0)**
>
> 0.6.0 (2026-04-29)
> Features
> 
> add defineIONode and defineConfigNode factory functions (df7ecb2)
> add defineModule for typed server entry exports (f7db901)
> add NodeRedToggle component with x-nrg-form ...

It exposes type safe functional APIs as an alternative to Classes

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [3 May 2026 14:20 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825/4 "2026-05-03T14:20:37Z")

</div>

V0.9.0 released

Now docs are generated automatically based on the locales and schemas

> **[Locales & Help Docs | NRG](https://bonsaedev.github.io/nrg/guide/locales.html)**
>
> Build Node-RED nodes with Vue 3, TypeScript, and JSON Schema validation

---

<div class="post-metadata">

**Author:** ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)\
**Post date:** [4 May 2026 16:56 UTC](https://discourse.nodered.org/t/write-fully-typed-node-red-nodes-with-bonsae-nrg-framework/100825/5 "2026-05-04T16:56:38Z")

</div>

V0.10 enables unit testing node behaviors with vitest

> **[Testing a Node | NRG](https://bonsaedev.github.io/nrg/guide/testing.html)**
>
> Build Node-RED nodes with Vue 3, TypeScript, and JSON Schema validation