# FlowHub.org - Gists for Node-RED

**URL:** <https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215>\
**Category:** Share Your Projects\
**Created:** [1 August 2023 11:49 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215 "2023-08-01T11:49:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [1 August 2023 11:49 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/1 "2023-08-01T11:49:04Z")

</div>

Hi There!

I've started a little project to itch a scratch that might also be useful for others. Ever since I've been using Node-RED, I've also wanted to share flows, either between projects or just to show others how Node-RED works. The solution has always been to send a long json string and ask people to import that string. (Between projects this is simply a matter of switching browser tabs & import/export.)

What I was missing was a preview and easy of use to share flows (i.e. flow tabs is meant in this context).

This began with the [flowviewer](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388) to render flows in the browser without having Node-RED, then I wanted to compare different versions of flows but visually, this became the [comparing tool](https://discourse.nodered.org/t/standalone-visual-comparison-of-flows-in-browser/80021). [FlowHub](https://flowhub.org) is a combination of all that plus two extra [nodes](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-flowhub) for pushing and pulling flows to/from FlowHub to/from Node-RED.

An example of what I have in mind is the [web router flow](https://flowhub.org/f/40ea5f2aea6592ae) explanation. The web router simply routes various http requests to the various handlers but no one understands what is going on by simply looking at the flow. What I wanted was to document the flow and allow others to use and improve it. It's just my way of doing request routing and I'm sure there are others.

So what's so new about the explanation? The flow is shown visually and can be zoomed/panned. Links in the text highlight parts of the flow and a mermaid flowchart tries to visually present the logic behind the router. Finally the various versions of the flow can be visually compared - not that much changed on that particular flow. (Also it's possible to view a particular version of a flow and then download that version.)

All the documentation (i.e. the explanation) is stored in the flow (the flow-tabs info box contains the documentation). So the flow is self-contained. My long term vision is to have an collaborative approach to development of flows that are generally useful and entertaining.

Of course, I might have created an NPM package with subflows but that is for me to static and not really simple. Also it means that I would have had to create all the npm collateral files (license, readme, package.json ....) for something that probably wasn't complete anyway. Plus I can't do that inside Node-RED - my aim is to extend Node-RED using Node-RED!

I know mermaid is coming to Node-RED 3.1.x, but I would - ironically - like to have documentation on flows that works _outside_ of Node-RED. I.e. that works on mobiles and for newbies that might not have Node-RED installed. Besides the documentation for flows works inside Node-RED and at FlowHub - all mermaid diagrams are using "```mermaid" blocks.

Of course all this is a prototype and not designed for permanency rather as a test and tryout (i.e. things will break). It uses a public github repo for flow storage and a Node-RED instance as web server.

Cheers!

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [12 August 2023 15:29 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/2 "2023-08-12T15:29:59Z")

</div>

Just a short update, I've improved the UI to be more mobile friendly and added some more content. There is a complete list of [flows is available as RSS feed](https://flows.flowhub.org/feed.xml). I've been adding flows that I have found interesting but also some learnings I've made:

- [Don't drop when splitting](https://flowhub.org/f/1cf772ae2066495e)
- [Switch: check all v. stop after first](https://flowhub.org/f/ea246f68766c8630)

But also stuff that surprised me:

- [Swagger OpenAPI support in Node-RED](https://flowhub.org/f/49221ed0e76e27c3)
- [How to use the I2C bus for LED displays](https://flowhub.org/f/be2109bba90b6c5a)

All-in-all, Node-RED is a really nice tool for all sorts of things.

---

<div class="post-metadata">

**Author:** ![striper](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/striper/32/81114_2.png) [@striper](https://discourse.nodered.org/u/striper)\
**Post date:** [23 January 2024 10:48 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/3 "2024-01-23T10:48:52Z")

</div>

@gregorius: is FlowHub in itself closed source or could I also spin up my own (private) instance somewhere? I really like your idea of sharing and documenting flows, but I don't want to share all of them publicly (especially in a professional context).

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [23 January 2024 13:52 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/4 "2024-01-23T13:52:32Z")

</div>

FlowHub the server is private. But for financial benefit to me, I can share the code with you!

After all I did spend a fair bit of my time working on it and my landlord does not get paid in flows - unfortunately..

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [23 January 2024 15:28 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/5 "2024-01-23T15:28:27Z")

</div>

> [@gregorius](#):
>
> FlowHub the server is private. But for financial benefit to me, I can share the code with you!

Having said that, I am pleased that someone else see the potential in [FlowHub.org](http://FlowHub.org) - @striper I appreciate that!

Also if anyone is interested in financially or cooperatively helping in commercialising [FlowHub.org](http://FlowHub.org) into a SaaS product then please DM/PM me and lets talk!

---

<div class="post-metadata">

**Author:** ![striper](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/striper/32/81114_2.png) [@striper](https://discourse.nodered.org/u/striper)\
**Post date:** [25 January 2024 07:12 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/6 "2024-01-25T07:12:19Z")

</div>

Thank you for the clarification. I was suspecting that, but I could not find the official statement 😉  
I fully understand and support your motivation. No doubt this costed you quite some effort to think up and build.  
I will contact you via DM to explain my use case.

---

<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:** [25 January 2024 17:24 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/7 "2024-01-25T17:24:58Z")

</div>

> [@gregorius](#):
>
> The solution has always been to send a long json string and ask people to import that string

This has always been a pet peeve of mine as well! I don't want to have to import a flow just to visualize the problem being described, or to understand how someone else solved an issue. Way too many discourse answers are simply "here is my solution... just import this flow".

> [@gregorius](#):
>
> What I was missing was a preview and easy of use to share flows

In my opinion, the best use for this technique would be to automatically display in-line flows in both Discourse and the Flows library. Lately, I have been playing around with Mermaid myself. It looks like code blocks already support many different display formats (e.g. Markdown, Javascript, Json, Mermaid, PlantUML, etc) so it makes me wonder how feasible it is to extend support to the NodeRED flows syntax? Ideally it would be rendered as an SVG diagram with a "copy" button that puts the flow source onto the clipboard.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [25 January 2024 17:37 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/8 "2024-01-25T17:37:12Z")

</div>

> [@shrickus](#):
>
> In my opinion, the best use for this technique would be to automatically display in-line flows in both Discourse and the Flows library. Lately, I have been playing around with Mermaid myself. It looks like code blocks already support many different display formats (e.g. Markdown, Javascript, Json, Mermaid, PlantUML, etc) so it makes me wonder how feasible it is to extend support to the NodeRED flows syntax? Ideally it would be rendered as an SVG diagram with a "copy" button that puts the flow source onto the clipboard.

We added this to the Flow Library last September - [Previewing flows on the Flow Library](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442)

---

<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:** [25 January 2024 17:51 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/9 "2024-01-25T17:51:09Z")

</div>

Excellent -- which shows how much time I've had to use the Flows library lately... :\*(

So does this mean that the same rendering code could be added to the Discourse site?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [25 January 2024 17:53 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/10 "2024-01-25T17:53:52Z")

</div>

> [@shrickus](#):
>
> So does this mean that the same rendering code could be added to the Discourse site?

It _could_. Writing a discourse plugin to actually do so is another matter entirely. I simply don't have the bandwidth.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [25 January 2024 18:14 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/11 "2024-01-25T18:14:53Z")

</div>

I did create an [oEmbed endpoint](https://github.com/iamcal/oembed/pull/727#event-11559146646) for [flowhub.org](http://flowhub.org) so that I could integrate SVG versions of flows into LinkedIn posts ... doesn't work because they have an extra [provider list](https://www.linkedin.com/help/linkedin/answer/a522472/providers-we-support-for-embedding-content-within-an-article-on-linkedin?lang=en-us&intendedLocale=en) ☹

Is there a way to whitelist [FlowHub.org](http://FlowHub.org) for embedding in discourse?

Something like this:

```auto
https://flowhub.org/o/embed?url=https%3A//flowhub.org/f/390ee0021ded4910

or this:

<iframe src="https://flowhub.org/s/390ee0021ded4910?oembed=1"></iframe>

```

Attempts when doing this:

Oembed:

[https://flowhub.org/o/embed?url=https%3A//flowhub.org/f/390ee0021ded4910](https://flowhub.org/o/embed?url=https%3A//flowhub.org/f/390ee0021ded4910)

Another attempt:

[https://oembed.link/https://flowhub.org/f/7c29441a5cb63c9e](https://oembed.link/https://flowhub.org/f/7c29441a5cb63c9e)

---

<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:** [30 January 2024 09:05 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/12 "2024-01-30T09:05:26Z")

</div>

> [@gregorius](#):
>
> Is there a way to whitelist [FlowHub.org](http://FlowHub.org) for embedding in discourse?

Sorry, my security antenna's twitched at this suggestion. I can't say that it sounds like a good approach.

Generally cross-domain data embeds need to be at least treated with great caution. What might happen if you made a mistake in the code or someone hacked your site? Could end up having a significant impact on Discourse.

I've not looked at Discourse add-ins and what they can/can't do but I think that needs to be the starting point, not hacking one site into another. Resource use on Discourse might also need to be taken into account as I know that we already push the limits.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [30 January 2024 09:32 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/13 "2024-01-30T09:32:19Z")

</div>

> [@TotallyInformation](#):
>
> Sorry, my security antenna's twitched at this suggestion.

I assume you don't use your CC to purchase stuff in the web? Or provide your mobile number to 2FA providers? Did you hear about the [26 Billion record leak](https://www.forbes.com/sites/daveywinder/2024/01/23/massive-26-billion-record-leak-dropbox-linkedin-twitterx-all-named/)? Perhaps your data is there already?

And installing random packages from NPMjs is also _verboten_? I personally don't like coding my own libraries, so I do install unknown, unchecked and unvetted third-party packages from NPMjs. But they are _all_ safe because they come from [npmjs.com](https://hackaday.com/2018/10/31/when-good-software-goes-bad-malware-in-open-source/) ...

Thankfully I won't be at risk in coming to this forum now that we don't have _any_ integration here.

So instead of having a visual representation of visual code, we'd rather have the textual, length json representation - since everyone here can visualise length Jsons in their heads, can reconstruct the original flow from that json representation and basically a textual representation of something inherently visual is far better anyway.

At the end of the day, IDC (I don't Care) - if folks are that worried about where they point their browser to, they should have plugins installed that block cross-site nastyness - uMatrix is not bad. But that is installed from a potential third party criminal gang - or what guarantee do I have when I install uMatrix from the Firefox app store?

But as long as I am safe here ...

Edit:

As clarification, what I should say is that if security argument stands in the way of making something simpler then we should avoid giving away our CC numbers, personal details and identities. We do all this because it makes life easier at the expense of our own personal security.

If third-party content is truly the problem, then uMatrix literally helps. When I open the above in my uMatrix Firefox I get:

![Screen Shot 2024-01-30 at 12.19.38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cec8e1aa0c55e94f67f6257a3e74f91365d4250.png)

I have to actively allow iframe-based third-party content. Anyone who is worried about this should be using uMatrix or something similar.

However not doing something - which might improve the current situation - because it could potentially be a security risk - in the future - then avoid using mobile phones and alike. Everything done today might be illegal tomorrow. This is obviously not an argument for doing nothing today.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [30 January 2024 09:33 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/14 "2024-01-30T09:33:10Z")

</div>

> [@TotallyInformation](#):
>
> someone hacked your site?

That's why I don't use UIBUILDER since what if your site got hacked?

Edit / Clarification:

UIBUILDER is just as safe as any software retrieved from [npmjs.com](http://npmjs.com) or any other registry of third-party software. I was not seriously suggesting that UIBUILDER is unsafe to use. Just as my site is as safe as most other sites include this one.

However is it legitimate to question the "safety" of a site as an argument to not to use the software that comes from that site? My reasons for not using UIBUILDER is not to do with the safety of @TotallyInformation website, it was an illustration of an argument that - for me - makes no sense.

Perhaps someone will hack @TotallyInformation account and upload a malware version of UIBUILDER to [npmjs.com](http://npmjs.com) - I can't judge nor know, I trust that it won't happen. The same argument applies to software that is perhaps hosted on my site but yes, you'll have to trust me that it doesn't do anything bad.

To use that as an argument _before_ anything has happened is the same as my original argument for not using UIBUILDER - and that was the illustration.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [30 January 2024 09:44 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/15 "2024-01-30T09:44:28Z")

</div>

Just going to temporarily close this thread until @knolleary or @dceejay have had a chance to assess it

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [30 January 2024 09:44 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/16 "2024-01-30T09:44:32Z")

</div>



---

<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:** [2 February 2024 17:32 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/17 "2024-02-02T17:32:33Z")

</div>

Before I respond directly, I will reiterate something I published maybe a week or so ago. The repo for UIBUILDER has now had the recommended security actions applied. They are there to ensure that neither the UIBUILDER code itself nor any of its dependencies contain any security issues and to prevent unauthorised change. The UIBUILDER documentation also contains significant security information and guidelines for use. As someone professionally involved in cyber security and privacy for some nationally critical systems, I take this very seriously. Far more so, in fact, than most developers.

> [@gregorius](#):
>
> Perhaps someone will hack @TotallyInformation account and upload a malware version of UIBUILDER to [npmjs.com](http://npmjs.com) - I can't judge nor know, I trust that it won't happen. The same argument applies to software that is perhaps hosted on my site but yes, you'll have to trust me that it doesn't do anything bad.

Which is, again, why I'd previously added the recommended protections based on [stepsecurity.io](http://stepsecurity.io)

But, your use of software is a separate risk from service integration between two websites.

Take an extreme example. If my bank provides a web service and decides to use some specific 3rd-party code, it will assess the risks and add mitigations similar to the [stepsecurity.io](http://stepsecurity.io) ones (except - hopefully - even more comprehensive) and it will have ongoing security testing to ensure security & privacy. They will also use change control processes to prevent unauthorised changes even from 3rd-party software.

But, if my bank decides to integrate a live service from some other source - lets say Coinbase - the live integration is a whole different set of risks because now, the bank no longer has direct control over what happens at the other end and cannot control what live changes might happen on the other end and so has no control over the risks that may evolve over time. This requires a different set of mitigations & controls. Typically by using either a messaging hub or an API interface to limit the integration impacts.

* * *

But back on-topic. I suspect that you may have thought I was suggesting that _your_ website was somehow deficient in security - that was not my intent. The point I was trying to make was that ANY external website that integrates to the forum is a risk to the forum that the forum owners must assess. That could be from one of my sites or anyone else.

> [@gregorius](#):
>
> However is it legitimate to question the "safety" of a site as an argument to not to use the software that comes from that site? My reasons for not using UIBUILDER is not to do with the safety of @TotallyInformation website, it was an illustration of an argument that - for me - makes no sense.

I think we are discussing at cross-purposes here. If someone choses to use some _SOFTWARE_ on their website, that is one set of risks that they assess - and possibly add some measures such as the ones I've added to the UIBUILDER repo to help mitigate. If someone choses to integrate one _website_ into another _website_, it is not just about the software in use. It is now an _INTEGRATION_ issue. The risks are slightly different and need to be assessed accordingly.

In the case of this forum, it uses a public service as its host. Integration of another website _might_ cause performance, denial-of-service or some other issues. _Might_ is the key word here. There is a risk and that risk has to be taken into account by whoever runs the service.

But the key point is, that this kind of integration, unless done carefully, could introduce uncontrollable risks.

> [@gregorius](#):
>
> To use that as an argument _before_ anything has happened

Security and privacy design MUST use risk-based arguments _before_ anything happens. That is a fundamental requirement. For my house, I don't wait to see if anyone will burgle me before thinking about the risks associated with my doors and windows. I think about the local risks and issues, decide what risk I'm happy with vs the amount of money I want to spend mitigating them and then take action accordingly.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [2 February 2024 17:55 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/18 "2024-02-02T17:55:41Z")

</div>

Please note, this topic was locked by a moderator to avoid it descending into an off-topic argument.

@TotallyInformation as a moderator, you are able to bypass that lock. However @gregorius is not.

Given you have posted to this locked thread, I will tentatively unlock it otherwise @gregorius will not be able to reply.

However please by mindful that I'm keeping an eye on this thread and if it goes off the rails, it will get locked again.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [2 February 2024 17:55 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/19 "2024-02-02T17:55:58Z")

</div>



---

<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:** [2 February 2024 18:13 UTC](https://discourse.nodered.org/t/flowhub-org-gists-for-node-red/80215/20 "2024-02-02T18:13:09Z")

</div>

Fair enough. I won't, in any case be making any more comments on this thread.