# Previewing flows on the Flow Library
**URL:** https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442
**Category:** News
**Created:** [19 September 2023 20:47 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442 "2023-09-19T20:47:52Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [19 September 2023 20:47 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/1 "2023-09-19T20:47:52Z")
Building on the great work done by @gregorius, and thanks to @joepavitt efforts, we've now got previews of flows in the Flow Library.
This lets you see the flow without having to import its JSON.
What's even more cool is the 'Share flow' link in the sidebar that will give you some html you can copy and paste to embed the flow viewer in another site... including in this forum...
https://flows.nodered.org/flow/cbf44e064b9406a1175a7e8d589f66ac/share?height=500
There's more work to do to improve the overall experience. For example, it doesn't know about the icons/colours of contrib nodes so they all get a very generic appearance - but this is a great starting point.
Let us know what you think!
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [19 September 2023 21:17 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/2 "2023-09-19T21:17:13Z")
That’s really nice. Great work all.
Could you also drag / drop the flow across ?
---
### Author:  [@softy2k](https://discourse.nodered.org/u/softy2k)
#### Post date: [20 September 2023 04:51 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/3 "2023-09-20T04:51:07Z")
Nice job. I hope that the project will continue
---
### Author:  [@gregorius](https://discourse.nodered.org/u/gregorius)
#### Post date: [20 September 2023 09:14 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/4 "2023-09-20T09:14:21Z")
Thanks to @joepavitt for the feedback 👍
Great idea with embedding of flows, I hope it takes off!
I had a quick play around with [this flow](https://flows.nodered.org/flow/7970809f43d73b0a2e7af27f7165420c)
https://flows.nodered.org/flow/7970809f43d73b0a2e7af27f7165420c/share
And noticed the subflows weren't connected. I began zooming around and switching between tabs and somewhere along the lines, I was zoomed out and couldn't zoom in again:
that was maximum zoomed in'ness - perhaps the zoom needs to be reset between switching between subflows and main flow?
Sorry for being pedantic 🙂
EDIT:
> And noticed the subflows weren't connected.
That seems to be because some obj has no `wires` attribute and then `obj.wires.length` breaks ... it's a bug in the flowviewer unfortunately ...
EDIT2:
Turns out it was config node in the subflow that broke it, [fixed with this commit](https://github.com/gorenje/node-red-flowviewer-js/commit/f828d9f706282987b5d68518bbb8377d2803b92a)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [20 September 2023 14:34 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/5 "2023-09-20T14:34:43Z")
Brilliant! Kudos all round. A great addition. Many thanks.
* * *
Minor thing, not sure that the frame/zoom is always quite correct?
[Examples of uibuilder's uib-tag node (flow) - Node-RED (nodered.org)](https://flows.nodered.org/flow/54bd1f725b847fe9f4503e047e15b15b)
Top is an included img and the bottom is the flow visualisation, the 3rd flow is out of view.
I've checked a few and many of the visualisations are out of sight.
Also, some where the content seems to be misinterpreted completely
[Test sql lite (flow) - Node-RED (nodered.org)](https://flows.nodered.org/flow/a8282453b7214a2130151060b6bbba8c)
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [20 September 2023 15:32 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/6 "2023-09-20T15:32:53Z")
> [@TotallyInformation](#):
>
> Top is an included img and the bottom is the flow visualisation, the 3rd flow is out of view.
We haven't implemented auto-framing at the moment, but if you're open to contributing, it would be a welcome addition.
For now, it just defaults to zoom level "1", equivalent of the Node-RED Editor.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [20 September 2023 15:34 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/7 "2023-09-20T15:34:40Z")
> [@TotallyInformation](#):
>
> Also, some where the content seems to be misinterpreted completely
>
> [Test sql lite (flow) - Node-RED (nodered.org)](https://flows.nodered.org/flow/a8282453b7214a2130151060b6bbba8c)
The viewer on that page seems to work fine?
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [20 September 2023 15:48 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/8 "2023-09-20T15:48:23Z")
Preview displays fine but the extra duplicate JSON is huge and overwrites other elements
On Android Chrome
Then 7 plus full screens down
---
### Author:  [@gregorius](https://discourse.nodered.org/u/gregorius)
#### Post date: [20 September 2023 15:51 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/9 "2023-09-20T15:51:52Z")
> [@joepavitt](#):
>
> We haven't implemented auto-framing at the moment, but if you're open to contributing, it would be a welcome addition.
I think d3 isn't capable of doing framing content into the viewable area (or at least I didn't find it), what I did therefore was to readjust the size of the svg to be the same size as the containing div and then setting the viewBox of the svg to the bounding box of the content:
```javascript
var svg = $("#flowdatacontainer .svg-container-noderedjson svg");
svg.attr('width','');
svg.attr('height','');
svg.css('width', $('#flowdatacontainer').width() + "px");
svg.css('height', $('#flowdatacontainer').height() + "px");
var bbx = $("#flowdatacontainer .svg-container-noderedjson svg .containerGroup")[0].getBBox();
svg.attr('viewBox', bbx.x + " " + bbx.y + " " + (bbx.width * 1.1) + " " + (bbx.height * 1.1) )
```
---
### Author:  [@gregorius](https://discourse.nodered.org/u/gregorius)
#### Post date: [20 September 2023 15:53 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/10 "2023-09-20T15:53:53Z")
> [@TotallyInformation](#):
>
> Also, some where the content seems to be misinterpreted completely
>
> [Test sql lite (flow) - Node-RED (nodered.org)](https://flows.nodered.org/flow/a8282453b7214a2130151060b6bbba8c)
that seems to be a flow where someone has included the flow.json into the description field when creating the flow - instead of writing a description of the flow
EDIT:
viewing the [gist](https://gist.github.com/AmazingBuckEye/a8282453b7214a2130151060b6bbba8c) it does seem so ...
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [20 September 2023 16:40 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/11 "2023-09-20T16:40:23Z")
A couple of my old contributions were also strange which I don't remember seeing before. But I haven't had a chance to go check the GISTs yet.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [21 September 2023 08:52 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/12 "2023-09-21T08:52:51Z")
> [@gregorius](#):
>
> I think d3 isn't capable of doing framing content into the viewable area (or at least I didn't find it), what I did therefore was to readjust the size of the svg to be the same size as the containing div and then setting the viewBox of the svg to the bounding box of the content:
Have dropped some thoughts here: [Flowviewer - Auto Frame Content · Issue #106 · node-red/flow-library · GitHub](https://github.com/node-red/flow-library/issues/106)
---
### Author:  [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)
#### Post date: [30 September 2023 01:08 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/13 "2023-09-30T01:08:28Z")
Love the new change. I wasn't anticipating it to be integrated so quickly! You guys are awesome.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [29 November 2023 01:08 UTC](https://discourse.nodered.org/t/previewing-flows-on-the-flow-library/81442/14 "2023-11-29T01:08:50Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.