# AF Enhanced HTML Node - Complete Usage Guide A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting. ![Version](https://img.shields.io/badge/version-0.0.5-blue) ![License](https://img.shields.io/badge/license-MIT-green) ![ComfyUI](https://img.shields.io/badge/ComfyUI-Compatible-orange) --- ## ✨ Key Features - **Rich HTML Support** - Full HTML formatting with colored sections, lists, tables, code blocks, and more - **Non-Intrusive Design** - Doesn't interfere with normal ComfyUI workflow interactions - **Easy Editing** - Double-click anywhere on the content to edit HTML - **Smart Links** - Ctrl+click to open external links or trigger custom actions - **Beautiful Styling** - Predefined color schemes that match ComfyUI's theme - **Custom HTML Support** - Write your own HTML with inline styles - **No Dependencies** - All CSS is inlined for reliable performance --- ## 🎮 Interaction Guide ### Editing Content - **Double-click** anywhere on the HTML content to enter edit mode - **Escape key** or click outside to exit edit mode and save changes - Changes are automatically saved when exiting edit mode ### Using Links - **Hold Control key + Click** on any link to activate it - External links open in new tabs - JavaScript actions and alerts work when Control is held ### Node Management - **Click and drag** the node title bar to move - **Drag edges/corners** to resize - **Middle mouse button** works for canvas panning (like other nodes) --- ## 🎨 Predefined Section Colors The node comes with several predefined colored section styles. Click each section below to see the code and rendered example.
đŸŸĸ Positive Section (Green) ### Code: ```html

đŸŸĸ Positive Prompts

masterpiece, best quality, highly detailed

``` ### Rendered Result: ![Positive Section Example](examples/positive-section.png)
🔴 Negative Section (Red) ### Code: ```html

🔴 Negative Prompts

low quality, blurry, distorted

nsfw, watermark, signature, bad anatomy

``` ### Rendered Result: ![Negative Section Example](examples/negative-section.png)
📝 Neutral Section (Gray) ### Code: ```html

📝 Notes

General notes and information...

``` ### Rendered Result: ![Neutral Section Example](examples/neutral-section.png)
ℹī¸ Info Section (Light Blue) ### Code: ```html

ℹī¸ Information

Using: SDXL 1.0

Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras

``` ### Rendered Result: ![Info Section Example](examples/info-section.png)
⚠ī¸ Warning Section (Yellow) ### Code: ```html

⚠ī¸ Warning

This workflow requires:

  1. High VRAM (8GB+)
  2. Latest ComfyUI version
  3. SDXL compatible models
``` ### Rendered Result: ![Warning Section Example](examples/warning-section.png)
💛 Yellow Section (Alternative) ### Code: ```html

💛 Yellow Section

Alternative yellow styled content with different shade...

``` ### Rendered Result: ![Yellow Section Example](examples/yellow-section.png)
đŸ”ĩ Blue Section (Deep Blue) ### Code: ```html

đŸ”ĩ Blue Section

Deep blue styled content for technical information...

``` ### Rendered Result: ![Blue Section Example](examples/blue-section.png)
🎨 Custom Section (Purple) ### Code: ```html

🎨 Custom

Purple custom styled content for special cases...

``` ### Rendered Result: ![Custom Section Example](examples/custom-section.png)
--- ## 📏 Predefined Spacers Use these spacer classes to control vertical spacing between elements.
All Spacer Sizes - Click to see examples ### Code: ```html
Content Block 1
Content Block 2
Content Block 3
Content Block 4
Content Block 5
Content Block 6
Content Block 7
``` ### Rendered Result: ![Spacer Examples](examples/spacers.png) ### Size Reference: - `af-spacer-top` → 2px - `af-spacer-mini` → 4px - `af-spacer-small` → 8px - `af-spacer` → 16px (default) - `af-spacer-large` → 32px - `af-spacer-xl` → 48px
--- ## 📐 Column Layouts Create two-column layouts using the predefined column classes.
Two-Column Layout Example ### Code: ```html

🎨 Style Settings

  • Style: Photorealistic
  • Aspect: 16:9
  • Quality: Ultra High

⚙ī¸ Technical

Resolution: 1920x1080

Batch: 4

đŸšĢ Exclusions

  • No text in image
  • Avoid oversaturation
  • No watermarks

💡 Tips

Use lower CFG for more creative results

``` ### Rendered Result: ![Two Column Layout Example](examples/two-column-layout.png) **Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
--- ## 🔗 Clickable Links & Actions All links require **Ctrl+Click** to activate for safety and to prevent accidental navigation. JavaScript actions work on links when Ctrl+Click is used.
Link Examples ### Code: ```html

🔗 Interactive Links

ComfyUI GitHub Repository

Click for alert

Log to console

Link with logging

JavaScript alert link

``` ### Rendered Result: ![Link Examples](examples/links.png) **Remember:** Hold **Ctrl** while clicking any link to activate it!
--- ## đŸ’ģ Custom HTML & Inline Styles The node supports **standard HTML** with **inline CSS styling**. You can write custom HTML just like you would for a webpage. ### ✅ Supported Features - **All standard HTML tags**: `
`, ``, `

`, `

`-`

`, `
    `, `
      `, `
    1. `, ``, etc. - **Inline CSS styles**: Use the `style` attribute on any element - **Text formatting**: ``, ``, ``, ``, ``, `
      `
- **Lists**: Ordered and unordered lists
- **Tables**: Full table support with styling
- **Horizontal rules**: `
      ` for dividers
- **Code blocks**: `` and `
      ` tags

---

## 🎨 Custom Styling Examples


      
Custom Spacers with Inline Styles

### Code:
```html

      First Section
      



      


      Second Section
      



      


      Third Section
      



      


      Fourth Section
      
```

### Rendered Result:
![Custom Spacers](examples/custom-spacers.png)


      


      
Custom Colored Sections

### Code:
```html


      
    
      Custom Pink Section
      
    
      Your content here with custom colors...
      

      



      
    
      Custom Teal Section
      
    
      Different color scheme for variety...
      

      



      
    
      Custom Orange Section
      
    
      Create any color combination you need...
      

      
```

### Rendered Result:
![Custom Colors](examples/custom-colors.png)


      


      
Custom Text Styling

### Code:
```html

      
    
    
      
        Large blue bold text for emphasis
    
      
    
    
    
      
        Small gray italic text for subtitles
    
      
    
    
    
      
        Highlighted text with yellow background
    
      
    
    
    
      
        Custom monospace text for code-like display
    
      

      
```

### Rendered Result:
![Custom Text Styles](examples/custom-text.png)


      


      
Custom Borders and Boxes

### Code:
```html


      
    
      Dashed Border Box
      
    
      Content in a custom dashed border box
      

      



      
    
      Solid Border with Shadow
      
    
      Creates depth with shadow effect
      

      



      
    
      Thick Left Border
      
    
      Emphasizes content with thick accent border
      

      
```

### Rendered Result:
![Custom Borders](examples/custom-borders.png)


      


      
Custom Layouts and Alignment

### Code:
```html


      
    
      Centered Title
      
    
      Centered paragraph text for announcements
      

      



      
    Right-aligned footer note

      



      
    Tag 1
    Tag 2
    Tag 3

      
```

### Rendered Result:
![Custom Layouts](examples/custom-layouts.png)


      


      
Custom Info Cards

### Code:
```html

      
    
      
        Steps
        
      25
      
    
      
    
    
      
        CFG Scale
        
      7.5
      
    
      
    
    
      
        Batch Size
        
      4
      
    
      

      
```

### Rendered Result:
![Custom Info Cards](examples/custom-cards.png)


      

---

## ⚠ī¸ JavaScript Limitations

JavaScript functionality is limited for security. It **only works on `` (link) elements** and **only when Ctrl+Click is used**.

### ✅ What Works (with Ctrl+Click on links):
```html

Alert on click


Log to console


Confirmation dialog


Multiple actions
```

### ❌ What Doesn't Work:
```html






      Won't work
      



      Won't fire
      
Won't fire



    Can't modify other elements




    Storage APIs blocked

```

### Security Restrictions:
- **No `