Display HTML

The Display HTML node renders custom HTML content directly in the workflow interface. It allows you to create rich, interactive, and highly customized visual presentations using HTML, CSS, and JavaScript. This node is ideal for complex layouts, embedded content, interactive elements, custom styling, and advanced user interfaces that go beyond standard display nodes.

Display HTML

Basic Usage

Use the Display HTML node to present custom-designed content using HTML markup. Write or paste your HTML code into the Input field, and it will be rendered for users during workflow execution.

Inputs

Input (Green Port)

HTML Content: Accepts text/HTML data from connected nodes.

Connects to green output ports of text-providing nodes
Receives HTML code dynamically from previous nodes
Can be used with Text nodes, AI-generated content, or other text sources
Optional - you can also write HTML directly in the configuration

Outputs

The Display HTML node does not produce outputs that are passed to subsequent nodes. It serves as a display endpoint for presenting HTML content.

However, it does have a red output port for flow control:

Output (Red Port)

Flow Control: Continues execution to the next node after HTML content is displayed.

Connects to red input ports of subsequent nodes
Allows workflow to continue after content is shown
Standard flow progression connection

Configuration

Input Field

HTML Code: Write or paste your HTML, CSS, and JavaScript code.

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Features:

Full HTML5 support
CSS styling (inline, <style> tags, or external)
JavaScript functionality
Multiple lines supported
Syntax highlighting in editor
Real-time preview available

Show Full Width

Checkbox Option: Controls the display width of the HTML content.

Unchecked (Default):

Content displays in standard width container
Maintains consistent layout with other nodes
Suitable for most content

Checked:

Content expands to full available width
Uses entire screen width
Ideal for wide layouts, tables, galleries
Better for immersive experiences

Example Workflows

Simple HTML Display

Scenario: Display formatted text with custom styling.

Display HTML Example

Steps to Create the Flow:

Add a Start Node.

Add a Display HTML node:

i. Write HTML code in the Input field:

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: blue;">Welcome to the Course</h1>
    <p>This is a <strong>custom formatted</strong> paragraph.</p>
  </body>
</html>

ii. Configure options:

Leave "Show Full Width" unchecked for standard layout
Or check it for full-width display

Connect flow control:
- Start → Display HTML (red to red)

Preview:

[Start] → [Display HTML: Custom formatted content]
       → User sees blue heading and formatted text

Result: Users see professionally formatted HTML content with custom styling.

Display Text: Simpler text display with Markdown support
Display Image: Display single images
Text: Provides text/HTML content to Display HTML
AI General Prompt: Generate HTML content with AI
Form: Collect user input (use after HTML instructions)
Widgets: Alternative for specific interactive elements
Online Video Player: Dedicated video player (simpler than HTML embed)

Display HTML vs Other Display Methods

Feature	Display HTML	Display Text	Display Image
HTML Support	Full HTML/CSS/JS	Markdown only	N/A
Styling	Complete control	Limited	N/A
Interactivity	JavaScript enabled	Links only	None
Complexity	Can be complex	Very simple	Very simple
Layout Control	Precise control	Standard	Standard
Learning Curve	Requires HTML knowledge	Easy	Easy
Use Case	Complex layouts	Simple text	Single images

When to use Display HTML:

Custom layouts and designs
Interactive elements
Embedded media
Data tables
Complex formatting
JavaScript functionality
Multiple images with layout
Branded content

When to use Display Text:

Simple formatted text
Markdown content
Standard paragraphs
Basic lists and headers

When to use Display Image:

Single image display
No custom layout needed
Simple image presentation

Technical Considerations

HTML Rendering

Supported:

HTML5 tags and elements
CSS3 styling
JavaScript (ES6+)
Responsive design
Media elements (video, audio)
Forms and inputs
SVG graphics
Canvas elements

Limitations:

Sandboxed environment
No server-side execution
Limited external resource access
Security restrictions on certain APIs

Performance

Optimization Tips:

Minimize inline JavaScript
Use efficient CSS selectors
Optimize image sizes
Avoid heavy animations
Test with large content
Consider mobile performance

Loading Behavior:

HTML renders when node is reached
External resources load asynchronously
Page may briefly show loading state
Consider preloading critical resources

Security

Built-in Protection:

Sandboxed execution environment
XSS attack prevention
Limited DOM access outside sandbox
Safe iframe embedding

Best Practices:

Sanitize any user input
Avoid inline event handlers when possible
Use modern JavaScript practices
Test thoroughly before deployment

Summary

The Display HTML node is the most powerful and flexible display option:

✓ Versatile: Full HTML, CSS, and JavaScript support
✓ Interactive: Enable user interactions and dynamic content
✓ Customizable: Complete control over styling and layout
✓ Professional: Create polished, branded experiences
✓ Advanced: Support complex layouts and functionality

Master the Display HTML node to create truly custom and engaging learning experiences that go beyond standard formatting limitations.

Basic Usage​

Inputs​

Input (Green Port)​

Outputs​

Output (Red Port)​

Configuration​

Input Field​

Show Full Width​

Example Workflows​

Simple HTML Display​

Related Nodes​

Display HTML vs Other Display Methods​

Technical Considerations​

HTML Rendering​

Performance​

Security​

Summary​