# Info content preview button

**URL:** <https://discourse.nodered.org/t/info-content-preview-button/97548>\
**Category:** Core Development\
**Tags:** feature-request\
**Created:** [11 June 2025 10:07 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548 "2025-06-11T10:07:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 10:07 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/1 "2025-06-11T10:07:14Z")

</div>

Hi There,

So doing documentation in Node-RED is super simple since there is the info panel and the info property of nodes and tabs and it's all in markdown - wonderful however ....

What annoys me is that to preview my changes, I need to save my changes, close the panel open the info panel (if its not open already).

What I'd like to have instead is a preview button (ideally an automatic preview like here in the forum would be best):

![preview-feature](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7441e93ce30237ee0e66f59abce137fb93e5f97d.gif)

That screen shot is take from my Erlang-Red editor and the changes are in this [commit](https://github.com/gorenje/erlang-red/commit/1956c307ad9276277c13ae42e8a7355fc5367bc0).

I only made the change for the tab info contents (not nodes) and it's very rough and ready. But it also has the advantage that I can preview changes **but** when I do cancel, those changes aren't saved - I'm creating a duplicate node and using that to update the sidebar:

```auto
let tabNode = RED.nodes.createExportableNodeSet([RED.nodes.workspace(RED.workspaces.active())])[0];
tabNode.info = window.currentTabflowEditor.getValue();
RED.sidebar.info.refresh(tabNode);

```

I don't know how relevant this would be for editing documentation for nodes, I tend to only document the entire flow, i.e., tab i.e., workspace.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [11 June 2025 10:27 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/2 "2025-06-11T10:27:06Z")

</div>

I see the benefit and am in favor.  
I can edit cleanly this FR (so open a PR) if the team agrees.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 10:43 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/3 "2025-06-11T10:43:41Z")

</div>

> [@GogoVega](#):
>
> I can edit cleanly

I also just improved the solution by using the `node` context instead of the `window` 🙂

But ideally there would be a much better solution than cloning nodes all over the place.

I was going to use the [`setInfoText`](https://github.com/node-red/node-red/blob/36afe1ebd00d7a21888268ea6ec3fe6db8b78845/packages/node_modules/%40node-red/editor-client/src/js/ui/tab-info.js#L452-L467) function but that isn't exported, so it had to be the `refresh()` function.

---

<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:** [11 June 2025 13:16 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/4 "2025-06-11T13:16:37Z")

</div>

You can already do this.

1. Click the expand button

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/69c5479b31a8d23a909dd5bb5611affadc113307.png)

1. Click the preview button

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae7441ba922492f5f7ffdb54a620d977e0bb81b4.png)

1. Marvel at the preview

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/0141d225e69bfe29e7a9cf11470228d360a2e0bc.jpeg)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 14:27 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/5 "2025-06-11T14:27:27Z")

</div>

that is indeed very cool especially since the sidebar is still active.

It's a 4.x thing right? Didn't find it in my 3.1.x installation.

---

<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:** [11 June 2025 15:00 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/6 "2025-06-11T15:00:23Z")

</div>

> [@gregorius](#):
>
> It's a 4.x thing right? Didn't find it in my 3.1.x installation.

According to the change history, the preview button for the markdown editor has been there since 0.20.0 - 7 years ago.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 June 2025 15:12 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/7 "2025-06-11T15:12:04Z")

</div>

> [@knolleary](#):
>
> According to the change history, the preview button for the markdown editor has been there since 0.20.0 - 7 years ago.

Mea culpa, my eyes are going - on second looks, it's there in 3.1.x - sorry for the confusion!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 June 2025 09:52 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/8 "2025-06-12T09:52:54Z")

</div>

@knolleary If you do that expand then it is easy for the preview button to get hidden behind the bar on the right... so much so I missed it completely 😉

 ![Screenshot 2025-06-12 at 10.50.15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/4703272c27aec2c02c57bef2e0ab81f829e128e9.png)

---

<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:** [12 June 2025 21:25 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/9 "2025-06-12T21:25:27Z")

</div>

> [@dceejay](#):
>
> I missed it completely

Glad I wasn't the only one! I don't feel quite as much a dufus now. 😊

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 June 2025 21:26 UTC](https://discourse.nodered.org/t/info-content-preview-button/97548/10 "2025-06-26T21:26:13Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.