HTML Preview
A phone-shaped window into the HTML your LLM just wrote
- STRING
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
sandboxattribute, 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
refreshbutton. 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 currentsrcdoc.
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, default1.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 tofalsegives you a landscape phone.html- the HTML string itself. It'sforceInput, 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.
Inputs (5)
| Name | Type | Default | Description |
|---|---|---|---|
| width | INT | 375 | — |
| height | INT | 667 | — |
| scale | FLOAT | 1.000–10 | — |
| is_portrait | BOOLEAN | true | — |
| html | STRING | — |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| STRING | STRING | — |