# NR5: Presenter Mode

**URL:** <https://discourse.nodered.org/t/nr5-presenter-mode/101334>\
**Category:** Share Your Projects\
**Tags:** node-red-5\
**Created:** [22 June 2026 08:46 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334 "2026-06-22T08:46:22Z")\
**Posts on this page:** 5\
**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:** [22 June 2026 08:46 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334/1 "2026-06-22T08:46:22Z")

</div>

Hi There,

For completion, I wanted to present something that I thought up in the context of the [scrollbar over content issue](https://github.com/node-red/node-red/issues/5808).

![608640385-bab3d18e-496c-4c3a-b162-33125d2fdf32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/36b13434e966323fa09d1014d126f388820e8342.gif)

It's called "presenter mode" and can be activated using some frontend code. The idea is to remove all decorations from the workspace so that only the workspace flow is shown. My original idea was to remove overlap of navigation and content but perhaps it could also be generally useful.

The code is very much specific to NR 5.0.0 and might well not work in the future.

```js
$('#red-ui-workspace-footer').toggle()
$('#red-ui-workspace-scroll-v').toggle()
$('#red-ui-workspace-scroll-h').toggle()

if ($('#red-ui-workspace-footer').is(":visible") ) {
    if (!$("#red-ui-sidebar-separator").is(":visible")) {
        RED.actions.invoke("core:toggle-right-sidebar")
    }

    if (!$("#red-ui-sidebar-left-separator").is(":visible")) {
        RED.actions.invoke("core:toggle-left-sidebar")
    }

    $('#red-ui-workspace-scroll-h').css('bottom', '36px')
} else {
    if ($("#red-ui-sidebar-separator").is(":visible")) {
        RED.actions.invoke("core:toggle-right-sidebar")
    }
    
    if ($("#red-ui-sidebar-left-separator").is(":visible")) {
        RED.actions.invoke("core:toggle-left-sidebar")
    }

    $('#red-ui-workspace-scroll-h').css('bottom', '5px')
}

```

Why do I post here? I think it's a nice feature and something that could be introduced to NR5. So perhaps it will get traction here and convince others to also request this feature.

I've also wrapped the code into a client code node and created a [flow](https://flowhub.org/f/83c516da813de532) for activating the presenter mode. It also does something else:

![Screen Recording 2026-06-22 at 10.37.38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/1891c784f35b3ea6ac86a1fa7b5f74c44b5a5542.gif)

Here a "message tracing" mode is activated, what happens is that the msg trace sidebar is shown on the top and the debug panel on the bottom. The left sidebar is removed. I.e. this mode shows specific sidebars relevant for a specific task.

The idea is to have buttons that setup the editor for various activities that are common. With four separate sidebar placements, setting up all the sidebars for a specific task can become tiresome hence a shortcut would be nice.

Of course, this mode assumes that sidebars have been grouped correctly, i.e. the introspection is in the top group and the debug panel in the bottom sidebar on the right side.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [23 June 2026 03:52 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334/2 "2026-06-23T03:52:15Z")

</div>

So a bit like Perspectives in Eclipse 🤔

IMO, having the means to switch between different UI configs is definitely worth thinking about.  
I already have several use cases in mind, like "standard" development, Dashboard dev, Debugging/Tracing, or a simple "zen mode" to concentrate on a task or reflect on a flow.

---

<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:** [23 June 2026 06:56 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334/3 "2026-06-23T06:56:32Z")

</div>

> [@kuema](#):
>
> Perspectives in Eclipse

Reading up from [here](https://www.epic-ide.org/guide/ch04s03.php) and specifically this image:

 ![Image70_select_pers](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/7/e78bb28e5072109cc73819325fac00dc94d7e92d.gif)  
Yes that's intention, having specific tasks and designing/having a UI layout that assists in doing that task.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [23 June 2026 11:09 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334/4 "2026-06-23T11:09:13Z")

</div>

Exactly. That’s it. 🤓

Back in my Java days, I used Eclipse a lot, both as an IDE and as the UI platform for our frontend. So I got pretty used to it back then.

Perspectives are a deeper concept in the Eclipse platform, but from a UI point of view, it’s basically exactly what you proposed.

---

<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:** [29 July 2026 10:46 UTC](https://discourse.nodered.org/t/nr5-presenter-mode/101334/5 "2026-07-29T10:46:20Z")

</div>

I've packed this into the [presenter mode](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-presenter-mode) package for easy installation. The package also includes the sidebar panel buttons, see [post](https://discourse.nodered.org/t/nr5-add-sidebar-panel-controls/101552) for more details.