Nodes/ComfyUI_html/HTML Preview
ComfyUI Node

HTML Preview

A phone-shaped window into the HTML your LLM just wrote

By filipemeneses·Created about a year ago·Updated about a year ago· 2
HTML Preview
    • STRING
    width375
    height667
    scale1.00
    is_portraittrue
    html

    This is the node that makes the whole pack worth installing. HTML Preview renders HTML inside the node itself, in a little viewport that defaults to exactly a phone screen: 375×667, the classic CSS pixel dimensions of an iPhone in portrait. If your workflow is an LLM writing markup - landing pages, newsletters, product cards - this is how you actually look at the thing before it goes anywhere. Blindly saving text an LLM called HTML is how you discover it's broken markup; previewing it first is how you catch that.

    It's also the most "plumbing-native" node in the pack: it passes the HTML straight through on an output, so you can drop it inline in a string pipeline and the preview is just a side effect of data flowing.

    How it works

    The Python side runs, takes your html string, and pushes the content plus the viewport settings back to the frontend in its UI message. The bundled JavaScript extension (js/HtmlPreview.js) then creates an <iframe> and stuffs your HTML into it via srcdoc. Because srcdoc is inline content, there's no file round-trip - the node resizes itself to match the viewport you asked for, and you're looking at a live rendering of your markup.

    Two details are worth knowing:

    • The scripts in your HTML actually run. The iframe has no sandbox attribute, so any <script> in the content executes in your browser session. For LLM output that's usually fine, but don't paste HTML from someone untrusted into this node and act surprised.
    • There's a refresh button. Because the iframe only re-renders when the node re-executes, editing the HTML widget upstream can leave a stale preview. The button just re-injects the current srcdoc.

    The inputs

    The four viewport knobs plus the content:

    • width / height - viewport size in pixels, defaulting to 375×667. Set these to whatever device you're designing for; they're what the iframe is sized to.
    • scale - zoom factor, default 1.0, up to 10. Crank it down to see the whole page, up to squint at details.
    • is_portrait - a boolean that swaps which of width/height is treated as the long side. Flipping it to false gives you a landscape phone.
    • html - the HTML string itself. It's forceInput, so it wants a wire, not typing.

    The single output is the STRING - the same HTML you fed in. Wire it to a Save HTML node and the preview becomes a free checkpoint in your pipeline.

    Install

    Search ComfyUI_html in ComfyUI Manager, or:

    cd ComfyUI/custom_nodes
    git clone https://github.com/filipemeneses/ComfyUI_html
    

    Then restart. No models, no dependencies beyond what ComfyUI already ships.

    When it bites

    The whole preview feature lives in the frontend JS, so headless or API runs give you nothing to look at (the node still passes the string through, which is why it doesn't crash). And a heavy page - a big image, a lot of JavaScript - makes the canvas sluggish while it's on screen, so don't leave a dozen of these open. But as a "show me what the model wrote" tool, it's the one node in this pack you'll actually reach for.

    Categoryutils

    Inputs (5)

    NameTypeDefaultDescription
    widthINT375
    heightINT667
    scaleFLOAT1.000–10
    is_portraitBOOLEANtrue
    htmlSTRING

    Outputs (1)

    NameTypeDescription
    STRINGSTRING