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