# How can I create UI to custom node

**URL:** <https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437>\
**Category:** Developing Nodes\
**Created:** [28 March 2022 09:33 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437 "2022-03-28T09:33:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wen27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wen27/32/59174_2.png) [@wen27](https://discourse.nodered.org/u/wen27)\
**Post date:** [28 March 2022 09:33 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/1 "2022-03-28T09:33:38Z")

</div>

Hi all, I am new here,  
I am some question about create custom node.  
custom node code have two input ,I want render to website(HTML),  
How can I do?

using http in -\> custom node -\> http out .  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd34b08956e7ace5aab8e4d2e11018d1e34a2e4e.png)

custom node code  
HTML:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1254c6d83010abfbe972c8b36ff7afd61a4183ea.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/532a1a6de13108cf15cf512e1e5facab826d819c.png)  
JS:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c6f2ea79cc3b75760d56d53f848da6e1cddf0bd8.png)

---

<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:** [28 March 2022 17:02 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/2 "2022-03-28T17:02:05Z")

</div>

I think that Node-RED probably already has what you need to do this.

You can use the http-in/-out nodes with the template node to create a new web page with custom server-side processing.

Alternatively, you can use Node-RED's static folder to serve up a static page and send your form data to an http-in/-out node combination.

You could use Dashboard with ui\_template node. Though if the form is fairly simple, you could use the ui form node.

And of course, you can use uibuilder which lets you build any kind of custom web page(s) with a provided communications link from/to Node-RED - and MUCH more. 😀

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 March 2022 21:37 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/3 "2022-03-28T21:37:56Z")

</div>

> [@TotallyInformation](#):
>
> You can use the http-in/-out nodes with the template node to create a new web page with custom server-side processing.

Indeed, you might have a look at [this](https://cookbook.nodered.org/http/create-an-http-endpoint) nice tutorial like Julian has mentioned.  
Bart

---

<div class="post-metadata">

**Author:** ![wen27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wen27/32/59174_2.png) [@wen27](https://discourse.nodered.org/u/wen27)\
**Post date:** [29 March 2022 06:13 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/4 "2022-03-29T06:13:04Z")

</div>

> [@TotallyInformation](#):
>
> static folder to serve up a static page

thank you for replay,  
I have used uibuilder is great tool for custom web page, but I want to create nodes like dashboard with buttons, forms etc.  
I try "Node-RED's static folder to serve up a static page this suggestion" ,but can not find good example for this case  
could you have example for this case ?

---

<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:** [29 March 2022 14:15 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/5 "2022-03-29T14:15:21Z")

</div>

I think that you may be trying to run before you can walk. Lots of people have tried to create something that lets you write nodes that create front-end elements. Dashboard being the most obvious.

To do something like that from scratch is a big job.

By the way, if you switch to the beta version of uibuilder (the vNext branch on GitHub), there is nothing stopping you from creating nodes that send/receive data to a uibuilder node. There is an example in the uib-sender node. You could fairly easily extend such a node to send configuration to your front-end when a uibuilder client connects so that the front-end would automatically build itself. I have a partial proof-of-concept for the front-end part of that approach using the Svelte framework.

> [@wen27](#):
>
> I try "Node-RED's static folder to serve up a static page this suggestion" ,but can not find good example for this case  
> could you have example for this case ?

No. But all you need to do is to configure the static folder in settings.js, restart node-red and put an html file in the configured folder. You should be able to access that with a URL such as `http://localhost:1880/mypagename.html`

---

<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 May 2022 14:15 UTC](https://discourse.nodered.org/t/how-can-i-create-ui-to-custom-node/60437/6 "2022-05-28T14:15:25Z")

</div>

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