# Create nodes using Typescript, Vue and Vite

**URL:** <https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340>\
**Category:** Developing Nodes\
**Created:** [8 February 2026 01:04 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340 "2026-02-08T01:04:50Z")\
**Posts on this page:** 10\
**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:** [8 February 2026 01:04 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/1 "2026-02-08T01:04:50Z")

</div>

Continuing from this other thread: [Write nodes using Typescript + Vue 3 + JSON Schemas for runtime validations](https://discourse.nodered.org/t/write-nodes-using-typescript-vue-3-json-schemas-for-runtime-validations/97151)

You can now develop nodes using Typescript and build them with Vite. This will soon be released as a standalone package, but you can preview it here today.

> **[GitHub - AllanOricil/node-red-vue-template at wip\_ts](https://github.com/AllanOricil/node-red-vue-template/tree/wip_ts)**
>
> wip\_ts

I built a core library that unlocks a modern API for authoring nodes with class-based definitions and JSON Schema. Take a look

IONode

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd296af2e2162e054ea7eb4eecd0e7083bead154.png)  
ConfigNode  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfe8a2fc5891c7d741558be974ab6e2bb8a3ea7d.png)

Today’s my birthday, but I’m the one giving something back. 🎁  
I hope this resonates with anyone building a product on top of Node-RED.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [8 February 2026 08:08 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/2 "2026-02-08T08:08:50Z")

</div>

Great Stuff and a really nice API for creating nodes - well done!

I think there is a learning for all of us developing _for_ NR: the current method of creating node packages doesn't fly with the _users_ of NR.

Encapsulating functionality into smaller units is currently possible either using a) sub-flows or b) extended JS code in function nodes, c) using node packages or d) extending NR itself.

Of those, the only two available for _users_ of NR are sub-flows and function nodes. But both are limited and not as broad as creating a node package or extending NR.

Clarification: "users" of NR are those that create "flows as code" and don't, themselves, create code using JS. Hence these "users" are not able to create their own node packages.

Your work is aimed at developers of NR packages who are capable of coding JS or using third-party editors to create code. _Users_ of NR aren't necessarily able to do that. For these "users", their editor is the NR frontend, VScode or Emacs or Vi or NotePad are developer tools unknown to them.

So I would suggest that using this as a basis for a frontend components inside NR would be a good next step. Especially as you have removed the need to know how the HTML templates work - which is great.

I've tried doing this with the [NodeDev](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-nodedev) package but it's definitely not perfect. One thing is does allow is importing of existing node packages that then can be modified inside NR and then can be reinstalled into NR - thus "users" can begin learning how to develop node packages for NR _inside_ NR, no third-party editor required.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [8 February 2026 09:29 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/3 "2026-02-08T09:29:30Z")

</div>

Happy birthday. Have a great day

---

<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 February 2026 04:41 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/4 "2026-02-23T04:41:14Z")

</div>

This is how easy the setup with vite is

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

If you need custom runtime settings, just create a file named `node-red.settings.ts` in the root of your project. IT IS FULLY TYPED!

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

To start the dev server with the `latest` node-red runtime, run `pnpm vite`

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

If you need a different version, configure `nodeRedLauncherOptions.runtime.version` with the version you need. For example,

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

If you need different runtime `settings` for different environments, configure `nodeRedLauncherOptions.runtime.settingsFilepath` with the path to a different `settings.ts` file. When this property isn't set, the plugin tries to use settings located at `./node-red.settings.ts`

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

To build your production distro, run `pnpm build`.

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

By default, the following 3 files/dir are always copied to `dist`:

- LICENSE
- README.md
- examples

Your license is also added to the begining of your `index.html`

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

The package.json in the dist folder is automatically generated containing only the dependencies that were actually used by the server-side code. Client-side dependencies are bundled with your distro, and properly broken into smaller chunks.

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

Soon this plugin and the core library will be packaged. At the moment imports will be `@allanoricil/nrg/core` and `@allanoricil/nrg/vite`. However, If the node-red core team (@knolleary, @dceejay, @hardillb)review and let me publish these under the @node-red namespace, then imports will be `@node-red/nrg/core` and `@node-red/nrg/vite`, which would look way more professional.

This is the directory structure of an `nrg` project

```auto
.
├── client/
│ ├── assets
│ ├── components
│ ├── icons
│ ├── nodes
│ ├── public
│ └── index.ts
├── server/
│ ├── nodes
│ ├── schemas
│ └── index.ts
├── locales/
│ ├── docs/
│ │ └── {node-type}/
│ │ └── {en-US|pt-BR|...}.{md|html}
│ └── labels/
│ └── {node-type}/
│ └── {en-US|pt-BR|...}.json
├── examples/
│ └── 01-example.json
├── package.json
├── LICENSE
├── README.md
├── node-red.settings.ts
└── vite.config.ts

```

---

<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:** [18 March 2026 21:29 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/5 "2026-03-18T21:29:29Z")

</div>

You should all try this!

Together with NRG Sentinel, this turns Node-RED environments in Enterprise ready environments.

Good code + runtime protection

What else you need?

This is vision

---

<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:** [21 April 2026 18:09 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/6 "2026-04-21T18:09:37Z")

</div>

Hang in there. Almost done with packaging everything and creating a proper monorepo

---

<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:23 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/7 "2026-04-23T03:23:09Z")

</div>

DONE!

> [@Write fully typed Node-RED nodes with @bonsae/nrg framework](https://discourse.nodered.org/t/write-node-red-nodes-fully-typed-with-the-bonsae-nrg-framework/100825):
>
> 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 regi…

The first step for Wiring Contracts at deploy time

---

<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:52 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/8 "2026-04-24T02:52:30Z")

</div>

> **[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 18:52 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/9 "2026-04-29T18:52:45Z")

</div>

NRG now supports Functional API

> **[Functional API: defineIONode and defineConfigNode ​ - Creating a Node | NRG](https://bonsaedev.github.io/nrg/guide/creating-a-node.html#functional-api-defineionode-and-defineconfignode)**
>
> This guide walks through creating a complete Node-RED node — from schema definition to server logic to the Vue 3 editor form. | Build Node-RED nodes with Vue 3, TypeScript, and JSON Schema validation

---

<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:** [28 June 2026 18:53 UTC](https://discourse.nodered.org/t/create-nodes-using-typescript-vue-and-vite/100340/10 "2026-06-28T18:53:00Z")

</div>

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