\
**Category:** General\
**Created:** [28 August 2020 02:28 UTC](https://discourse.nodered.org/t/node-red-html-template/32127 "2020-08-28T02:28:59Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@ashur\_3d](https://discourse.nodered.org/u/ashur_3d)\
**Post date:** [28 August 2020 02:29 UTC](https://discourse.nodered.org/t/node-red-html-template/32127/1 "2020-08-28T02:29:00Z")
Hi,
So, I can use the dashboard nodes and implement my data points in with no problem. Then, I thought to create my one custom HTML with custom CSS etc.. but inserting data into the Node Red HTML template node looks way harder than what I thought. I can not insert the data in the HTML page using the {{payload}}. So can you please tell why? I read a lot about this, watched some videos, and tried multiple different ways, but still not working. So, what i'm doing wrong? The debug area is showing right info when I inject it, but not onto the HTML page. The other question I have, is what if I then try to insert more than one data point onto the HTML page! what I need to make that happen? any help is appreciated. please see the simple flow i'm testing below.
```auto
[{"id":"89439520.8d6e98","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"e00d0af5.2a3a28","type":"http in","z":"89439520.8d6e98","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":100,"y":280,"wires":[["6a103da0.7eea94"]]},{"id":"10510ab9.ca2825","type":"http response","z":"89439520.8d6e98","name":"","statusCode":"","headers":{},"x":620,"y":280,"wires":[]},{"id":"6a103da0.7eea94","type":"template","z":"89439520.8d6e98","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload}} !","output":"str","x":360,"y":280,"wires":[["10510ab9.ca2825"]]},{"id":"1165748e.6c30ab","type":"debug","z":"89439520.8d6e98","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":490,"y":200,"wires":[]},{"id":"8e04e99b.193e68","type":"inject","z":"89439520.8d6e98","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"8","payloadType":"num","x":170,"y":200,"wires":[["6a103da0.7eea94","1165748e.6c30ab"]]}]
```
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [28 August 2020 18:24 UTC](https://discourse.nodered.org/t/node-red-html-template/32127/2 "2020-08-28T18:24:29Z")
it wasnt working because the **HTTP IN** node reguest has to send a message to your **HTTP out** node.
You cannot inject payload to Http out bypassing http in like in your flow.
See example :
```auto
[{"id":"ac8ddd3f.28e1f8","type":"http in","z":"b913f30e.6b6098","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":300,"wires":[["57b1ecda.eed20c"]]},{"id":"8b51bdc0.47edc","type":"http response","z":"b913f30e.6b6098","name":"","statusCode":"","headers":{},"x":840,"y":300,"wires":[]},{"id":"3c861534.f6423a","type":"template","z":"b913f30e.6b6098","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload}} !
","output":"str","x":640,"y":300,"wires":[["8b51bdc0.47edc"]]},{"id":"57b1ecda.eed20c","type":"change","z":"b913f30e.6b6098","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"8","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["3c861534.f6423a"]]}]
```
---
**Author:**  [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [28 August 2020 20:43 UTC](https://discourse.nodered.org/t/node-red-html-template/32127/3 "2020-08-28T20:43:07Z")
> [@ashur\_3d](#):
>
> The other question I have, is what if I then try to insert more than one data point onto the HTML page! what I need to make that happen?
Regarding this part of the question .. since you are creating you own endpoints using HTTP IN - OUT the only format you can use in the template node is mustache syntax .. i think your are better off using the UI template dashboard nodes .. or if you want something custom look into UIbuilder that can use Vue as a front end library.
Here is a flat example of mustache :
```auto
[{"id":"ac8ddd3f.28e1f8","type":"http in","z":"b913f30e.6b6098","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":300,"wires":[["57b1ecda.eed20c"]]},{"id":"8b51bdc0.47edc","type":"http response","z":"b913f30e.6b6098","name":"","statusCode":"","headers":{},"x":840,"y":300,"wires":[]},{"id":"3c861534.f6423a","type":"template","z":"b913f30e.6b6098","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\tMy Favorite Fruit
\n\n\t\n \n | Name | \n Price | \n
\n \n \n {{#payload}}\n \n | {{name}} | \n {{price}} | \n
\n {{/payload}}\n \n
\n\n","output":"str","x":640,"y":300,"wires":[["8b51bdc0.47edc"]]},{"id":"57b1ecda.eed20c","type":"change","z":"b913f30e.6b6098","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"name\":\"apple\",\"price\":100},{\"name\":\"orange\",\"price\":80},{\"name\":\"banana\",\"price\":210}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["3c861534.f6423a"]]}]
```
---
**Author:**  [@ashur\_3d](https://discourse.nodered.org/u/ashur_3d)\
**Post date:** [29 August 2020 06:12 UTC](https://discourse.nodered.org/t/node-red-html-template/32127/4 "2020-08-29T06:12:50Z")
Thank you so much for your response. I see how that can work.
regarding the Dashboard, I feel it's somehow limited even though i was able to customize it a little. and I read that it doesn't support multiple users! I am more aware of HTML and CSS and that's why I'm trying to go with regular html template to have the ability to customize the front end as desired. I really liked the UiBuilder too but I think this one needs some good level skills of Javascript which I don't have.
---
**Author:**  [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 October 2020 06:13 UTC](https://discourse.nodered.org/t/node-red-html-template/32127/5 "2020-10-28T06:13:04Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.