# Using node red in Html

**URL:** <https://discourse.nodered.org/t/using-node-red-in-html/45342>\
**Category:** General\
**Created:** [7 May 2021 13:53 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342 "2021-05-07T13:53:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [7 May 2021 13:53 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/1 "2021-05-07T13:53:43Z")

</div>

Could i somehow open node red application in my own html ? Lets say i make a webpage and try to put the application inside some div or something like that

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 May 2021 14:18 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/2 "2021-05-07T14:18:35Z")

</div>

Node-red runs in node js, server side. It cannot run in a web page.

You can however embed node-red in an application (but it still doesn't run in html)

You can also display the node-red editor in an iframe if you desire.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [7 May 2021 14:20 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/3 "2021-05-07T14:20:32Z")

</div>

Not sure i quite understand. Could i have a header that says welcome and below it whole node-red framework on which i could acutally work in node-red.  
I want to do something fancy with it if its possible

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 May 2021 14:27 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/4 "2021-05-07T14:27:18Z")

</div>

> [@jake123](#):
>
> Not sure i quite understand.

then search iframe - its a HTML thing (nothing at all to do with node-red)

> [@jake123](#):
>
> Could i have a header that says welcome and below it whole node-red framework on which i could acutally work in node-red

Give it a go and find out

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Jake-RED</title>
</head>
<body>

<h1>Welcome</h1>
<hr>
<iframe src="https://192.168.0.1:1880" title="Node-RED"></iframe>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [7 May 2021 14:36 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/5 "2021-05-07T14:36:12Z")

</div>

Thats really nice. Didnt know you could do that! Awesome

---

<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 15:30 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/6 "2021-05-07T15:30:25Z")

</div>

Do you mean the editor? If so, yes, there is available configuration for that. Check the settings.js file.

---

<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:** [21 May 2021 15:31 UTC](https://discourse.nodered.org/t/using-node-red-in-html/45342/7 "2021-05-21T15:31:06Z")

</div>

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