# Node-Red in Browser via Stackblitz

**URL:** <https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224>\
**Category:** General\
**Created:** [14 December 2022 21:11 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224 "2022-12-14T21:11:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:11 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/1 "2022-12-14T21:11:03Z")

</div>

Not really a question - but did you know that you can run Node-Red in the browser using Stackblitz -

just created a sample repo [Node.js (forked) - StackBlitz](https://stackblitz.com/edit/node-2yujvu?file=index.js)

based on this sample [https://nodered.org/docs/user-guide/runtime/embedding](https://nodered.org/docs/user-guide/runtime/embedding)

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:15 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/2 "2022-12-14T21:15:04Z")

</div>

Just run `node index.js` and navigate to `/red`

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d22f757cc9a680a3ed1632f85fea8111792e247a.png)

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:25 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/3 "2022-12-14T21:25:08Z")

</div>

If the `userDir` points to a folder within the project the data is even persistent:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed90c974d81e0c37528579a60b210d62d3c6d1d0.png)

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:31 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/4 "2022-12-14T21:31:18Z")

</div>

Custom nodes are also possible by running `npm install whatever-node`

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bccdf5b15c66563d21d228585a2da79c440c6beb.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:** [14 December 2022 21:49 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/5 "2022-12-14T21:49:56Z")

</div>

🤔 Interesting! So I could run up a template repo that contained a pre-configured node-red with uibuilder installed along with a simple flow and get people to click on a link to get a completely known environment that runs in their browser and where they can try to reproduce bugs!

Nice 😃 🧙‍♀️

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:52 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/6 "2022-12-14T21:52:36Z")

</div>

yes. actually all the sample flows could be spinned up that way and users could start testing them interactive.

---

<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:** [14 December 2022 21:53 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/7 "2022-12-14T21:53:21Z")

</div>

I LIKE it - thanks for sharing.

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 21:55 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/8 "2022-12-14T21:55:56Z")

</div>

There are pre-configured [starter-templates](https://stackblitz.com/?starters=backend). Maybe node-red could also have one

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8d6e14523f7325297786ebb70ecc209ae0d158e.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:** [14 December 2022 21:57 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/9 "2022-12-14T21:57:04Z")

</div>

That would be nice. Though (when I get time!), I'm going to create my own custom one so that I can get people to better test uibuilder. 😉

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [14 December 2022 22:11 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/10 "2022-12-14T22:11:06Z")

</div>

[JavaScript SDK | StackBlitz Docs](https://developer.stackblitz.com/platform/api/javascript-sdk) - so it looks like this could really be embedded in any website - so wiring up dynamically a node-red stackblitz for every sample flow for example should be possible

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 December 2022 08:55 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/11 "2022-12-15T08:55:41Z")

</div>

Nice,  
if you set adminRoot to / and add a `"start": "node index.js"` to the scripts section of package.json it just fires straight up. Very simple.  
I would also add

```auto
flowFile: 'flows.json',
flowFilePretty: true,

```

to the settings section of index.js to stop it creating random flow file names.

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [15 December 2022 10:00 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/12 "2022-12-15T10:00:47Z")

</div>

Only problem I have with this setup is, that it says "Not started" because I guess express tries to serve the page faster than node-red is spinning up.

---

<div class="post-metadata">

**Author:** ![bloigge](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bloigge/32/47983_2.png) [@bloigge](https://discourse.nodered.org/u/bloigge)\
**Post date:** [15 December 2022 10:04 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/13 "2022-12-15T10:04:19Z")

</div>

Solution could be to start express a little bit later. Is there a callback / promise on the `RED` object which will be called when it's done spinning up so it can trigger the server startup?

```auto
// Start the runtime
RED.start();

setTimeout(() => {
  server.listen(8000);
}, 1500)

```

---

<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:** [15 December 2022 14:43 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/14 "2022-12-15T14:43:30Z")

</div>

> [@bloigge](#):
>
> so it looks like this could really be embedded in any website

So you could have Node-RED running inside Node-RED Dashboard, .... 🤣

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [15 December 2022 15:08 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/15 "2022-12-15T15:08:06Z")

</div>

> [@TotallyInformation](#):
>
> So you could have Node-RED running inside Node-RED Dashboard,

Your A sick man @TotallyInformation 😱

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 December 2022 15:25 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/16 "2022-12-15T15:25:28Z")

</div>

ooops - I must be sick

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00cddf01c5417791c2cf4409dcbbae43633778b0.png)

( this is a useful page -[Embedding projects | StackBlitz Docs](https://developer.stackblitz.com/guides/integration/embedding#embed-url-options) )

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 December 2022 15:27 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/17 "2022-12-15T15:27:09Z")

</div>

What about "editor is not dashboard" now?

---

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [15 December 2022 15:31 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/18 "2022-12-15T15:31:46Z")

</div>

Please stop, my brain cannot handle this! 🤣

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [15 December 2022 16:04 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/19 "2022-12-15T16:04:35Z")

</div>

I might watch inception this weekend! 😉

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 December 2022 16:31 UTC](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224/20 "2022-12-15T16:31:37Z")

</div>

> [@hotNipi](#):
>
> What about "editor is not dashboard" now?

I think we need to add "… and the dashboard is not an editor..."

[Next page](https://discourse.nodered.org/t/node-red-in-browser-via-stackblitz/72224.md?page=2)