Writing Dashboard ui nodes - Any suggestions on how to get started

I'm thinking about how "difficult" is it to start developing my own ui-nodes for Dashboard. I will probably start by looking at the ui_nodes already present on Github, to see how the coding is done.

But what I'm really wondering about, is what has to be done to make my own nodes available for installation in NR as all other nodes are, using the Manage Palette.

This could all be a relative simple thing to do but if it were, I think the amount of available ui-nodes would be much larger then it currently is. So Is there anyone that would like to comment on this.


It isn't that difficult provided you have the relevant experience. First, though, can you give an example of what you want so we can see where you are coming from?

Where non-ui nodes have two parts (a jquery config screen and a NodeJs backend server part), the UI nodes have a extra thired part (the AngularJs dashboard widget part). So if you are already familiar developing non-ui nodes, the step will be 'rather' small to a ui node...

Yes I would have a look at node-red-ui-nodes, like e.g. the mylittleui node and the lineairgauge node. These have been developed with lots of comments and few functionality to get people started. If you go immediately to see other UI nodes (like e.g. my svg node), you might get lost into the functionality itself...

Take into account that developing custom ui nodes was only possible since 2018 (if I'm not mistaken), while custom non-ui nodes exist for much longer time. So it is rather normal that there are much more non-ui nodes. But of course, a non-ui node is easier to develop ...

Well actually I don't have a specific need right now, I just sometimes feel the design options are rather limited in Dashboard and have thought about designing alternative ui_nodes.
I'm rather new to NR and have just used it for maybe 6 month now, and is still in a learning phase.

One of the first things I thought looked a little strange was how few options I had when wanting to display status of turned on lights on the dashboard. If you don't have many options, and the dashboard space/size is very limited (small mobile phones) I really miss having more options.

And it's from there I got into thing that designing ui-node maybe was the answer.

Great, I'I look into it. But what about the work that applies to making ui-node installable i NR, is that an area where readily available information is rather scarce ?.


1 Like

Before you set off down a DIY path ask here about the specific requirement. You might be surprised to find they are more configurable than you think, though it is not always obvious.

Once you have published it to npm then it becomes installable by anybody.

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