Share & Preview Flows on flows.nodered.org

For years, Node-RED's website has provided functionality to share flows through flows.nodered.org

This week, we at FlowFuse have contributed a new feature to the site that allows users to visually preview those flows, and embed/share those flows in articles and on forum posts.

#  Visual Flow Previews

A huge thank you for this work needs to go Gerrit Riessen's work published on his Open Mind Map Blog. He recently open-sourced some great work to GitHub (repo), and with some adaptation and collaboration, we've been able to utilise this as a foundation for the functionality we've added into the flows site.

Adding this to flows.nodered.org will make it far easier to learn how others use Node-RED, and to share your own flows with others too. The embedding functionality should also make talking about Node-RED in your own articles & forums much easier.

#  Example: Simple Flow

Here's a demonstration of a simple Inject > Debug node:

#  Example: Subflows, Groups, Links & Switches

Here's a non-functional flow that just demonstrates how FlowViewer renders the range of node types available in Node-RED:

#  Sharing & Embedding Flows

Any flow on flows.nodered.org now has a Share Flow option in the Actions section on the right side of the flows page. Clicking this will provide you with an iframe like:

<iframe width="100%" height="100%"
    src="https://flows.nodered.org/flow/7c2dd3ccde70746a40ef8f5aa58c591c/share"
    allow="clipboard-read; clipboard-write" style="border: none;"></iframe>

Which you can paste/embed into any website or blog post. Nick has also enabled the Node-RED forums to support these embeds too, and is also how we've embeded the above flows too.

If you want more control over the sizing of the viewer, you can also include a ?height= query parameter on the src value of the iframe. You may also need to hardcode the height property of the iframe itself to account for this change, depending on where you're embedding it to. For example:

<iframe width="100%" height="250px"
    src="https://flows.nodered.org/flow/7c2dd3ccde70746a40ef8f5aa58c591c/share?height=100"
    allow="clipboard-read; clipboard-write" style="border: none;"></iframe>

We know it's still not perfect, and there's plenty more we can do with it, but hopefully this is a welcome contribution to the Node-RED community.