Nodes/ComfyUI_LiteLLM/HTMLRenderer
ComfyUI Node

HTMLRenderer

Preview the HTML an LLM just wrote, right inside the node

By Hopping-Mad-Games·Created 2 years ago·Updated 11 months ago· 7
HTMLRenderer
    • STRING
    html_content
    iframe_height800px
    iframe_width100%

    This is the pack's answer to a specific, recurring moment: your LLM node just spat out a chunk of HTML, and you have no idea whether it's a beautiful page or a broken pile of tags. HTMLRenderer is an output node that renders that HTML in an iframe directly in the ComfyUI canvas, so you can see the result without leaving the graph or firing up a browser tab.

    It's the display counterpart to the pack's generation nodes. The pattern is simple: have LiteLLMCompletion (or an agent) write HTML into a text output, feed that string into html_content, run the workflow, and the node shows you the rendered page. The JS side of the pack builds a live preview widget right on the node, and the preview height follows the iframe_height setting.

    The inputs

    • html_content - the HTML string to render. Multiline not set on this one, so it's designed to receive the value from another node rather than be hand-typed.
    • iframe_height (default "800px") - the iframe height; the preview widget resizes to match.
    • iframe_width (default "100%") - the iframe width.

    Output: STRING - the original HTML, passed straight through. Because it's an output node, you can also wire this into other nodes if you want the HTML to continue somewhere after being previewed.

    How it works

    Under the hood the node HTML-escapes your content and embeds it into an <iframe srcdoc="..."> element, which is what ComfyUI's UI displays. srcdoc is the key trick: it lets an iframe contain raw HTML without a separate file or server round-trip. The result is shown in the node's display area, and the raw HTML is what comes out of the STRING output.

    Because it's an output node (the OUTPUT_NODE = True flag in the code), the render only happens when the workflow runs to completion, and the preview appears in the node's UI on execution.

    Installing

    It ships with ComfyUI_LiteLLM. ComfyUI Manager, search "ComfyUI_LiteLLM", or:

    cd ComfyUI/custom_nodes
    git clone https://github.com/Hopping-Mad-Games/ComfyUI_LiteLLM
    cd ComfyUI_LiteLLM
    pip install -r requirements.txt
    

    Restart ComfyUI. The rendering needs the pack's js/htmlRenderer.js, which loads automatically from the pack's WEB_DIRECTORY - no extra setup. You'll find it under ETK/LLM/LiteLLM. No API keys needed; this node never makes a network call.

    Where people get burned

    If the preview doesn't show, check that you ran the workflow - the display only populates on execution, and a freshly placed node shows an empty white box until then. Second, this is a display node, not a sandbox: whatever HTML you paste gets rendered by your browser in the ComfyUI page. If the HTML comes from an untrusted source, that's a risk - treat generated HTML like any untrusted content. Third, the height/width are CSS strings, so 800px and 100% behave differently than plain numbers would; if you're setting them by hand, keep the units. And if you're building HTML that should be viewable at a shareable URL rather than inside ComfyUI, that's what HTMLServerLink is for - this node is purely for eyeballing in the canvas.

    CategoryETK/LLM/LiteLLM

    Inputs (3)

    NameTypeDefaultDescription
    html_contentSTRING
    iframe_heightSTRING800px
    iframe_widthSTRING100%

    Outputs (1)

    NameTypeDescription
    STRINGSTRING