# Node-red Bind data in HTML

**URL:** <https://discourse.nodered.org/t/node-red-bind-data-in-html/4226>\
**Category:** General\
**Created:** [23 October 2018 16:56 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226 "2018-10-23T16:56:26Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [24 October 2018 14:44 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/5 "2018-10-24T14:44:06Z")

</div>

There are several approaches on [this discussion thread](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922) that will give you some ideas.

In a nutshell, you can either render the html table inside the node-red server, and pass the finished page to the browser for display (the `template` node is good for doing simple string substitution and iteration over arrays) -- or you can pass the payload array to the browser, and use either of the built-in JS libraries (Angular or jQuery) to copy the data into new rows of an empty table (I like to use a `ui_template` node with Angular directives).

A third solution is to have the output of your flow wired to a websocket that connects to a static html page -- where the page's onload event creates a websocket and begins listening for data to arrive. When it does, the browser's logic modifies the DOM elements to display the incoming data in real time. A bit more complex, but possible -- or better yet, you could use the [uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder) node to handle the msg passing for you, along with any front-end library you would like (RiotJS, moon, Vue, React, etc).

---

_[View the full topic](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226)._
