AF Enhanced HTML Node - Usage Guide

A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.

Basic Section Colors

<!-- Positive section (green) -->
<div class="af-section af-positive">
    <h2>🟢 Positive Prompts</h2>
    <p>Your positive prompts go here...</p>
</div>

<!-- Negative section (red) -->
<div class="af-section af-negative">
    <h2>🔴 Negative Prompts</h2>
    <p>Your negative prompts go here...</p>
</div>

<!-- Neutral section (gray) -->
<div class="af-section af-neutral">
    <h3>📝 Notes</h3>
    <p>General notes and information...</p>
</div>

<!-- Info section (blue) -->
<div class="af-section af-info">
    <h3>ℹ️ Information</h3>
    <p>Important information...</p>
</div>

<!-- Warning section (yellow) -->
<div class="af-section af-warning">
    <h3>⚠️ Warning</h3>
    <p>Warning or caution messages...</p>
</div>

<!-- Custom section (purple) -->
<div class="af-section af-custom">
    <h3>🎨 Custom</h3>
    <p>Custom styled content...</p>
</div>

Spacers

<!-- Small spacer -->
<div class="af-spacer-small"></div>

<!-- Regular spacer -->
<div class="af-spacer"></div>

<!-- Large spacer -->
<div class="af-spacer-large"></div>

<!-- Extra large spacer -->
<div class="af-spacer-xl"></div>

Clickable Links

<!-- External link -->
<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>

<!-- Link with custom action -->
<a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>

<!-- Link with data attribute for custom handling -->
<a href="#" data-action="custom-command">Custom Command</a>

Complete Example Template

<div class="af-section af-positive">
    <h2>🟢 Positive Prompts</h2>
    <p>masterpiece, best quality, highly detailed</p>
    <ul>
        <li>Professional lighting</li>
        <li>Sharp focus</li>
        <li>8K resolution</li>
    </ul>
</div>

<div class="af-spacer"></div>

<div class="af-section af-negative">
    <h2>🔴 Negative Prompts</h2>
    <p>low quality, blurry, distorted</p>
    <code>nsfw, watermark, signature</code>
</div>

<div class="af-spacer-large"></div>

<div class="af-section af-info">
    <h3>ℹ️ Model Information</h3>
    <p>Using: <strong>SDXL 1.0</strong></p>
    <p>Steps: <em>25</em> | CFG: <em>7.5</em></p>
    <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">Model Page</a>
</div>

<div class="af-spacer"></div>

<div class="af-section af-neutral">
    <h3>📝 Notes</h3>
    <p>Remember to:</p>
    <ol>
        <li>Check image dimensions</li>
        <li>Adjust sampling method</li>
        <li>Fine-tune CFG scale</li>
    </ol>
    <hr>
    <p><small>Last updated: Today</small></p>
</div>

Features

• No external dependencies - All CSS is inlined to avoid loading issues
• Colored sections - 6 predefined color schemes (positive, negative, neutral, info, warning, custom)
• Flexible spacers - 4 different spacer sizes
• Clickable links - Support for external links and custom actions
• Responsive design - Works on different screen sizes
• HTML support - Full HTML formatting (lists, tables, code blocks, etc.)
• Custom scrollbars - Styled to match ComfyUI theme

Installation

1. Create folder: ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML/
2. Add the Python file: AF_Enhanced_HTML.py
3. Add the init file: __init__.py
4. Create web/ subfolder
5. Add the JavaScript file: web/AF_Enhanced_HTML.js
6. Restart ComfyUI
7. Find the node under AF > AF - Enhanced HTML