[{"data":1,"prerenderedAt":297},["ShallowReactive",2],{"blog-\u002Fblog\u002F2023\u002F09\u002Fflow-viewer":3},{"id":4,"title":5,"body":6,"description":280,"extension":281,"meta":282,"navigation":292,"path":293,"seo":294,"stem":295,"__hash__":296},"blog\u002Fblog\u002F2023\u002F09\u002Fflow-viewer.md","Share & Preview Flows on flows.nodered.org",{"type":7,"value":8,"toc":273},"minimark",[9,20,23,28,43,50,55,67,75,79,82,86,90,105,183,192,213,266,269],[10,11,12,13],"p",{},"For years, Node-RED's website has provided functionality to share flows through ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fflows.nodered.org",[18],"nofollow","flows.nodered.org",[10,21,22],{},"This week, we at FlowFuse have contributed a new feature to the site that allows users to visually preview those flows, and embed\u002Fshare those flows in articles and on forum posts.",[24,25,27],"h2",{"id":26},"visual-flow-previews","Visual Flow Previews",[10,29,30,31,36,37,42],{},"A huge thank you for this work needs to go Gerrit Riessen's work published on his ",[14,32,35],{"href":33,"rel":34},"https:\u002F\u002Fblog.openmindmap.org\u002F",[18],"Open Mind Map Blog",". He recently open-sourced some great work to GitHub (",[14,38,41],{"href":39,"rel":40},"https:\u002F\u002Fgithub.com\u002Fgorenje\u002Fnode-red-flowviewer-js",[18],"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.",[10,44,45,46,49],{},"Adding this to ",[14,47,19],{"href":16,"rel":48},[18]," 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.",[51,52,54],"h3",{"id":53},"example-simple-flow","Example: Simple Flow",[10,56,57,58,62,63,66],{},"Here's a demonstration of a simple ",[59,60,61],"code",{},"Inject"," > ",[59,64,65],{},"Debug"," node:",[68,69],"iframe",{"width":70,"height":71,"src":72,"allow":73,"style":74},"100%","200px","https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F500ee13719e54e42493c8ec96fa733b6\u002Fshare?height=100","clipboard-read; clipboard-write","border: none;",[51,76,78],{"id":77},"example-subflows-groups-links-switches","Example: Subflows, Groups, Links & Switches",[10,80,81],{},"Here's a non-functional flow that just demonstrates how FlowViewer renders the range of node types available in Node-RED:",[68,83],{"width":70,"height":84,"src":85,"allow":73,"style":74},"500px","https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F82a8602b615740491d30c083e5292e5f\u002Fshare",[24,87,89],{"id":88},"sharing-embedding-flows","Sharing & Embedding Flows",[10,91,92,93,96,97,100,101,104],{},"Any flow on ",[14,94,19],{"href":16,"rel":95},[18]," now has a ",[59,98,99],{},"Share Flow"," option in the ",[59,102,103],{},"Actions"," section on the right side of the flows page. Clicking this will provide you with an iframe like:",[106,107,112],"pre",{"className":108,"code":109,"language":110,"meta":111,"style":111},"language-html shiki shiki-themes github-light github-dark","\u003Ciframe width=\"100%\" height=\"100%\"\n    src=\"https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F7c2dd3ccde70746a40ef8f5aa58c591c\u002Fshare\"\n    allow=\"clipboard-read; clipboard-write\" style=\"border: none;\">\u003C\u002Fiframe>\n","html","",[59,113,114,145,156],{"__ignoreMap":111},[115,116,119,123,126,130,133,137,140,142],"span",{"class":117,"line":118},"line",1,[115,120,122],{"class":121},"sVt8B","\u003C",[115,124,68],{"class":125},"s9eBZ",[115,127,129],{"class":128},"sScJk"," width",[115,131,132],{"class":121},"=",[115,134,136],{"class":135},"sZZnC","\"100%\"",[115,138,139],{"class":128}," height",[115,141,132],{"class":121},[115,143,144],{"class":135},"\"100%\"\n",[115,146,148,151,153],{"class":117,"line":147},2,[115,149,150],{"class":128},"    src",[115,152,132],{"class":121},[115,154,155],{"class":135},"\"https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F7c2dd3ccde70746a40ef8f5aa58c591c\u002Fshare\"\n",[115,157,159,162,164,167,170,172,175,178,180],{"class":117,"line":158},3,[115,160,161],{"class":128},"    allow",[115,163,132],{"class":121},[115,165,166],{"class":135},"\"clipboard-read; clipboard-write\"",[115,168,169],{"class":128}," style",[115,171,132],{"class":121},[115,173,174],{"class":135},"\"border: none;\"",[115,176,177],{"class":121},">\u003C\u002F",[115,179,68],{"class":125},[115,181,182],{"class":121},">\n",[10,184,185,186,191],{},"Which you can paste\u002Fembed into any website or blog post. Nick has also ",[14,187,190],{"href":188,"rel":189},"https:\u002F\u002Fdiscourse.nodered.org\u002Ft\u002Fpreviewing-flows-on-the-flow-library\u002F",[18],"enabled the Node-RED forums to support these embeds too",", and is also how we've embeded the above flows too.",[10,193,194,195,198,199,202,203,205,206,209,210,212],{},"If you want more control over the sizing of the viewer, you can also include a ",[59,196,197],{},"?height="," query parameter on the ",[59,200,201],{},"src"," value of the ",[59,204,68],{},". You may also need to hardcode the ",[59,207,208],{},"height"," property of the ",[59,211,68],{}," itself to account for this change, depending on where you're embedding it to. For example:",[106,214,216],{"className":108,"code":215,"language":110,"meta":111,"style":111},"\u003Ciframe width=\"100%\" height=\"250px\"\n    src=\"https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F7c2dd3ccde70746a40ef8f5aa58c591c\u002Fshare?height=100\"\n    allow=\"clipboard-read; clipboard-write\" style=\"border: none;\">\u003C\u002Fiframe>\n",[59,217,218,237,246],{"__ignoreMap":111},[115,219,220,222,224,226,228,230,232,234],{"class":117,"line":118},[115,221,122],{"class":121},[115,223,68],{"class":125},[115,225,129],{"class":128},[115,227,132],{"class":121},[115,229,136],{"class":135},[115,231,139],{"class":128},[115,233,132],{"class":121},[115,235,236],{"class":135},"\"250px\"\n",[115,238,239,241,243],{"class":117,"line":147},[115,240,150],{"class":128},[115,242,132],{"class":121},[115,244,245],{"class":135},"\"https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F7c2dd3ccde70746a40ef8f5aa58c591c\u002Fshare?height=100\"\n",[115,247,248,250,252,254,256,258,260,262,264],{"class":117,"line":158},[115,249,161],{"class":128},[115,251,132],{"class":121},[115,253,166],{"class":135},[115,255,169],{"class":128},[115,257,132],{"class":121},[115,259,174],{"class":135},[115,261,177],{"class":121},[115,263,68],{"class":125},[115,265,182],{"class":121},[10,267,268],{},"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.",[270,271,272],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":111,"searchDepth":147,"depth":147,"links":274},[275,279],{"id":26,"depth":147,"text":27,"children":276},[277,278],{"id":53,"depth":158,"text":54},{"id":77,"depth":158,"text":78},{"id":88,"depth":147,"text":89},"For years, Node-RED's website has provided functionality to share flows through flows.nodered.org","md",{"navTitle":5,"excerpt":283},{"type":7,"value":284},[285,290],[10,286,12,287],{},[14,288,19],{"href":16,"rel":289},[18],[10,291,22],{},true,"\u002Fblog\u002F2023\u002F09\u002Fflow-viewer",{"title":5,"description":280},"blog\u002F2023\u002F09\u002Fflow-viewer","4lojPfsoYIMgoLGACj__W5UOGW7mk3b5cNgG9q7FZbw",1780070550919]