# Node-RED Dashboard custom node

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242>\
**Category:** Developing Nodes\
**Created:** [6 May 2021 02:04 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242 "2021-05-06T02:04:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![KevinGhadyani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevinghadyani/32/41324_2.png) [@KevinGhadyani](https://discourse.nodered.org/u/KevinGhadyani)\
**Post date:** [6 May 2021 02:04 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242/1 "2021-05-06T02:04:47Z")

</div>

Is it possible to create a custom node for Node-RED Dashboard? If so, where's the documentation on that?

I'd like to create a new Template node that uses React instead of AngularJS v1.

I've been working on this myself, but I'd like to see if there's a better way.

Getting data into the React would have to happen through various methods, Redux, Native JS events, etc. The goal is just setting up the code as a dashboard element.

---

<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:** [7 May 2021 09:16 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242/2 "2021-05-07T09:16:51Z")

</div>

> [@KevinGhadyani](#):
>
> Is it possible to create a custom node for Node-RED Dashboard? If so, where's the documentation on that?

Yes. Not sure about docs as I don't really use Dashboard. But there are plenty of examples now that you may be able to reference.

> [@KevinGhadyani](#):
>
> I'd like to create a new Template node that uses React instead of AngularJS v1.

Don't think that will be as useful as you think. Dashboard is based on a deeply embedded version of Angular v1. So you would be trying to mix Angular with REACT, I can't imagine that will work out well.

If you don't need the rest of Dashboard, you could use uibuilder instead. This provides a control node that delivers some web service extensions and communications channels to the front-end code and a front-end helper library. While it uses VueJS for its default template, you can ditch that for REACT.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 May 2021 09:35 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242/3 "2021-05-07T09:35:04Z")

</div>

The most commented node is the mylittleuinode in this repository - [GitHub - node-red/node-red-ui-nodes: Additional nodes for Node-RED Dashboard](https://github.com/node-red/node-red-ui-nodes)

---

<div class="post-metadata">

**Author:** ![KevinGhadyani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevinghadyani/32/41324_2.png) [@KevinGhadyani](https://discourse.nodered.org/u/KevinGhadyani)\
**Post date:** [8 May 2021 09:03 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242/4 "2021-05-08T09:03:48Z")

</div>

Thanks for the link @dceejay! It's a lot cleaner than the code in Node-RED Dashboard.

I figured this out on Wednesday, but it's possible I could use some improvement.

My method of handling this was listening to `io` directly on `window` and when messages came in for `'update-value'`, I checked the `id` against the `node.id` which I put on the React root node as a data attribute.

Although, the implementation of `mylittleuinode` would've been much cleaner than trying to modify `ui_template` 👍.

* * *

From there, it was smooth-sailing, but not really.

There were some other issues to figure out:

1. React apps typically render on a single root element identified by its `id`. But Node-RED could render the same React app multiple times in the same HTML document. That means you can't use `id` and have to make sure you're rendering each app into its own `div`.
2. When updating the source in a Node, it will cause a complete re-render of the React app, but it doesn't unmount the old one before doing so.

I solved both problems already, but I just thought up a simpler method.

If you render the React app in an iframe using `srcdoc`, you can do `window.top.io` in the iframe's context to get access to the [Socket.io](http://Socket.io) instance in the parent `window`.

This solves a few problems:

1. When the iframe's re-rendered with the new React code, the old one is automatically removed.
2. You can lookup root nodes by their `id` because there will only be one in the iframe's context.

---

<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:** [7 July 2021 09:04 UTC](https://discourse.nodered.org/t/node-red-dashboard-custom-node/45242/5 "2021-07-07T09:04:12Z")

</div>

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