# Sharing flows on the forum just get prettier

**URL:** https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957
**Category:** News
**Created:** [4 July 2025 09:02 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957 "2025-07-04T09:02:54Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [4 July 2025 17:58 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/21 "2025-07-04T17:58:54Z")

</div>

> [@E1cid](#):
>
> Is there any way to view the JSON in the forum display if someone adds flows? As sometimes i just read the direct JSON to see issues. I see Colin has raised this to, I do not get emails unless I am watching a topic, so would love to see the source easily.

Not currently, but an issue/PR is always welcome'd so we can track the request: [GitHub · Where software is built](https://github.com/FlowFuse/flow-renderer/issues)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [6 July 2025 08:09 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/22 "2025-07-06T08:09:43Z")

</div>

In @knolleary's first post above, 4 backticks were also used in the post, as well as 3 backticks...  
What's the significance of 4 backticks?  
I assume it's to separate the flow from the visual.

 ![Screenshot_20250706-100615](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b242d8ae740b817391b7c416e6573cfd5764326b.png)

---

<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: [6 July 2025 08:22 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/23 "2025-07-06T08:22:24Z")

</div>

Because I wanted to include three backticks in the body of the code block without the forum treating that as the start of an actual code block.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [6 July 2025 08:42 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/24 "2025-07-06T08:42:03Z")

</div>

Ummmm....

[This thread](https://discourse.nodered.org/t/neo-pixel-led-heart-beat-help/97990/5)

(yeah, mine, sorry.)

I can - _eventually_ see the code posted if I zoom out a fairly long way.

I'm not sure if it is because I am not _using the feature correctly_ or not.

But just to check.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [6 July 2025 08:46 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/25 "2025-07-06T08:46:57Z")

</div>

I've only access via my phone, but hit a problem whilst viewing this post;

> [@Neo-pixel LED, heart beat. Help](https://discourse.nodered.org/t/neo-pixel-led-heart-beat-help/97990/5):
>
> It's completely blank (as in nothing) and yes I've tried scrolling & zooming.

If I zoom out, really out, I can see a really small image, but if I zoom in to see it, it drops to the bottom of the frame, and I see half of it.  
If I zoom in again , it's gone.  
I'll try and do a gift later.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [6 July 2025 08:51 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/26 "2025-07-06T08:51:54Z")

</div>

> [@Paul-Reed](#):
>
> If I zoom in,

Strange.

I press the `-` a LOT of times and then I can see it.

(Not having a go at you. Just that seems the opposite way to what I am doing)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [6 July 2025 09:07 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/27 "2025-07-06T09:07:26Z")

</div>

Should the flow position be normalised in some way before visualisation? This is a flow posted in [Neo-pixel LED, heart beat. Help - #2 by Trying\_to\_learn](https://discourse.nodered.org/t/neo-pixel-led-heart-beat-help/97990/2) which is not visible unless you zoom right out and scroll halfway down.

```flows
[{"id":"4d9e128f61b30b9a","type":"trigger","z":"a1911aa3.c45be8","name":"","op1":"40","op2":"0","op1type":"num","op2type":"num","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":750,"y":5330,"wires":[["7a69456b898157aa"],["f2ea8ebf91675d97","7a69456b898157aa"]]},{"id":"7d52e8e1113688cd","type":"trigger","z":"a1911aa3.c45be8","name":"","op1":"20","op2":"0","op1type":"num","op2type":"num","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":970,"y":5380,"wires":[["7a69456b898157aa"],["7a69456b898157aa","ef16a26c16c1e3c2"]]},{"id":"49b7e79d69b3f6ee","type":"inject","z":"a1911aa3.c45be8","name":"Start","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":570,"y":5390,"wires":[["4d9e128f61b30b9a"]]},{"id":"7a69456b898157aa","type":"template","z":"a1911aa3.c45be8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"rgb,3,0,{{payload}},0","output":"str","x":1130,"y":5330,"wires":[["cd95830a0d79ecd2","e007d147d4be7647"]]},{"id":"f2ea8ebf91675d97","type":"delay","z":"a1911aa3.c45be8","name":"","pauseType":"delay","timeout":"250","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":760,"y":5380,"wires":[["7d52e8e1113688cd"]]},{"id":"22333e36399b9c35","type":"inject","z":"a1911aa3.c45be8","name":"Stop","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"CONTROL","payload":"STOP","payloadType":"str","x":570,"y":5250,"wires":[["1048afc94a871bd0"]]},{"id":"14b8f1d26a67e16e","type":"inject","z":"a1911aa3.c45be8","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"CONTROL","payload":"GO","payloadType":"str","x":570,"y":5290,"wires":[["1048afc94a871bd0"]]},{"id":"1048afc94a871bd0","type":"gate","z":"a1911aa3.c45be8","name":"","controlTopic":"CONTROL","defaultState":"open","openCmd":"GO","closeCmd":"STOP","toggleCmd":"toggle","defaultCmd":"default","persist":false,"x":570,"y":5330,"wires":[["4d9e128f61b30b9a"]]},{"id":"ef16a26c16c1e3c2","type":"delay","z":"a1911aa3.c45be8","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":1105,"y":5380,"wires":[["1048afc94a871bd0"]],"l":false}]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:11 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/28 "2025-07-06T09:11:48Z")

</div>

Regarding this empty flow view on [Neo-pixel LED, heart beat. Help - #2 by Trying\_to\_learn](https://discourse.nodered.org/t/neo-pixel-led-heart-beat-help/97990/2) and [Idea: Add a node.js LTS check to Node-RED? - #3 by TotallyInformation](https://discourse.nodered.org/t/idea-add-a-node-js-lts-check-to-node-red/96980/3) they both render correctly when I run them flows in the source code version of the flow viewer

in fact, if I inspect these 2 demo flows they both have the `<g>` node elements but something quirky is going on with the div scroll - certain zoom levels will allow the elements to show! Investigating.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:14 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/29 "2025-07-06T09:14:51Z")

</div>

> [@Colin](#):
>
> Should the flow position be normalised in some way before visualisation?

That was (is) a consideration. The original implementation scans the min/max x/y and positions it in the scrollable div to reveal what the user has posted. This was done to maintain fidelity of the actual flow being rendered.

As of writing, it renders fine in dev env so there may be a bug in positioning logic, scroll size calculations (this is my suspicion) or issue with it being rendered as a discourse plugin or...

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [6 July 2025 09:26 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/30 "2025-07-06T09:26:31Z")

</div>

Have you tested on mobile devices? I'm on holiday now and just using my phone.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:28 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/31 "2025-07-06T09:28:23Z")

</div>

Yes, the ones that render here also work on mobile (at least FF and Chrome that I've tested)

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [6 July 2025 09:29 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/32 "2025-07-06T09:29:12Z")

</div>

It's a bit difficult to scroll down beyond this window on a phone, too easy to scroll within the window (revealing empty space) instead.

Would an image zoomed to the extent of the exported nodes be equally useful?  
No idea how difficult that would be!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:31 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/33 "2025-07-06T09:31:45Z")

</div>

> [@jbudd](#):
>
> Would an image zoomed to the extent of the exported nodes be equally useful?  
> No idea how difficult that would be!

They are (it does already auto zoom, auto scroll), but something quirky with the forum implementation is going on. Investigating

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:35 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/34 "2025-07-06T09:35:10Z")

</div>

This is something to do with forum plugin outer div scroll calculation. When zoomed, the scroll length is supposed to be updated to reflect the zoomed (smaller/larger) grid size - the scroll bars should adjust to reflect the inner content size

Andrews flow if you zoom and scroll - the nodes/flow is present:  
 ![chrome_HOtvXMy86F](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c25bf18e3e39cd285581837cf5c03b0fde3fe66.gif)

Andrews flow when rendered in the src version - auto scrolls, auto zooms:  
 ![chrome_5nQRi4Ueta](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b3dfd0d87b14c7c440174d48ff69130d2b08e192.gif)

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [6 July 2025 09:39 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/35 "2025-07-06T09:39:55Z")

</div>

> [@Steve-Mcl](#):
>
> it does already auto zoom, auto scroll

If the window shows the extent of the exported nodes, what's the value of it being scrollable?  
And my phone already has a well established procedure for zooming in/out, the two finger pinch.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 09:46 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/36 "2025-07-06T09:46:24Z")

</div>

> [@jbudd](#):
>
> If the window shows the extent of the exported nodes, what's the value of scrolling?

It doesnt, it attempts to zoom the content to fit the space. If the flow is mahoosive, the overflow is hidden and the scrollbars provide access. Also, imagine for some "whatever" reason there was an extra flow positioned right at the bottom of the grid...

> [@jbudd](#):
>
> And my phone already has a well established procedure for zooming in/out, the two finger pinch.

The auto zoom / auto scroll has nothing really to do with pinch to zoom or mobile interface, it is about locating the flows that someone posted. They are almost always NOT at top left position x0,y0.

But, better zooming for mobile has already been discussed internally. There is no open issue but it is a known. If you could raise an issue, it will not get forgotten (again)

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [6 July 2025 09:55 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/37 "2025-07-06T09:55:50Z")

</div>

> [@Steve-Mcl](#):
>
> imagine for some "whatever" reason there was an extra flow positioned right at the bottom of the grid

If an exported flow had eg this down there

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0aa82fc0416d99edc00624caeab6288bd5747e4.png)

I would prefer if the whole lot was shown, like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d74fa83d7dc2a9d38a39ea4e98a41cad46025cd1.png)

Personal preference though 🙂

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2025 10:05 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/38 "2025-07-06T10:05:58Z")

</div>

let me show you what it would really look like on a NR4.x grid of 8000x8000 😉

![chrome_7E2bKeh3qG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/82affd5f2c63e525f4f41a785b41d9e21b74cfc8.gif)

---

<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: [6 July 2025 10:08 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/39 "2025-07-06T10:08:12Z")

</div>

> [@Colin](#):
>
> Should the flow position be normalised in some way before visualisation? This is a flow posted in [Neo-pixel LED, heart beat. Help - #2 by Trying\_to\_learn](https://discourse.nodered.org/t/neo-pixel-led-heart-beat-help/97990/2) which is not visible unless you zoom right out and scroll halfway down.
> 
> Flow 1
> 
> topictopicStarttemplatedelayStopGogate
> 
> CopyDownload
> 
> -○+

Please see my post earlier in this thread.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [6 July 2025 10:41 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/40 "2025-07-06T10:41:38Z")

</div>

I think @jbudd is trying to say he would prefer the image to expand to show all nodes with no scroll bar, not how it looks now.

[Previous page](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957.md?page=1)

[Next page](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957.md?page=3)
