node-red-contrib-display

Display adds live, resizable Markdown and HTML cards to the Node-RED editor. Values from incoming messages, flow context, global context, and environment variables can be displayed directly on the flow canvas.

Features

• Render sanitized Markdown directly inside the editor.
• Render interactive HTML inside a sandboxed document.
• Insert live values using placeholders such as ${msg.payload} and ${msg.sensor.temperature}.
• Read values from message, flow, global, and environment scopes.
• Embed links, images, tables, websites, dashboards, and supported videos.
• Resize and zoom displayed content directly on the flow canvas.
• Remember previously received placeholder values.
• Flatten the node to display only its rendered content.
• Use transparent backgrounds for custom HTML designs.
• Hide scrollbars when content overflows.
• Limit the maximum display update rate.

Behaviour

A display can be designed almost entirely through Markdown, HTML, CSS, and JavaScript. However, it should primarily be used for visualization rather than as a complex script execution environment. The visual output is intended for use inside the Node-RED editor. It is not a replacement for a standalone Node-RED Dashboard or external web interface. Complex displays can consume browser and runtime resources. Consider disabling displays that are no longer needed, especially before deploying a finished flow to a production machine.

Placeholders

Placeholders can be used in both Markdown and HTML:

${msg.payload}

Use explicit scopes whenever possible:

Message: ${msg.topic}
Message Nested: ${msg.payload.temperature} °C
Flow: ${flow.room}
Global: ${global.site.name}
Environment: ${env.name}

Nested object paths are supported. Objects and arrays are rendered as JSON.

Markdown and HTML

Markdown mode

Markdown is sanitized before it is displayed. Safe embedded HTML can also be included.

The sandbox prevents the display from directly accessing the Node-RED editor page.

Iframe content may still be blocked by:

• The target website
• Browser security policies
• The Node-RED editor's content security policy
• X-Frame-Options or Content-Security-Policy headers

Example usage of displays

Example 01: Zooming

Resize and zoom displayed content directly on the flow canvas.

Example 02: Live data

Display values from incoming Node-RED messages.

Example 03: Multiple live values

Use multiple placeholders to update different parts of a display.

Example 04: Live status

Create live status indicators using message values and custom styling.

Example 05: Memory

Preserve older placeholder values when messages contain only partial updates.

Example 06: GIFs and images

Embed animated GIFs and regular images inside a display.

Example 07: Websites

Embed supported websites using an iframe.

Example 08: Node-RED Dashboard

Display an existing Node-RED Dashboard directly on the flow canvas.

Example 09: YouTube video

Embed supported YouTube videos using the YouTube embed URL.

Example 10: Resizing

Resize the display to fit different types of content.

Example 11: Scrollbars

Allow or hide scrollbars when content exceeds the available display area.

Example 12: Responsive updates

Render rapidly changing values while controlling the maximum update rate.

Security

Displayed context and environment values are visible to anyone with access to the Node-RED editor. HTML displays can also execute JavaScript and make network requests. Only use HTML and JavaScript that you trust. Do not display passwords, API keys, access tokens, or other secrets.

Requirements

• Node-RED 5.0 or newer
• Node.js 22.9 or newer

Contact

Found a bug, have a suggestion, or want to discuss the node?

• Start a topic on the Node-RED Forum and tag me.
• Join the Discord community.

License

Licensed under the MIT License.