Nodes/ComfyUI_Eclipse/Preview Image (DOM)
ComfyUI Node

Preview Image (DOM)

The Preview That Renders Like a Web Page

By r-vageΒ·Created 10 months agoΒ·Updated a day agoΒ· 31
Preview Image (DOM)
  • images
  • IMAGE

What it is

If the stock Preview Image is the plain-paper printout of ComfyUI, Preview Image (DOM) is the responsive web page. It takes your image batch and renders it in a browser-DOM widget - a resizable grid that behaves like a real layout instead of a fixed bitmap stuck in the canvas. You can resize the node and the images reflow, probe their natural aspect ratios, and generally get a preview that feels like a photo gallery rather than a thumbnail strip.

Same job as the plain Preview Image: look at your results before you commit to saving them. The difference is the front end, and for anyone doing batch work with a dozen images in the preview, the DOM rendering is noticeably nicer to live with.

How it works

Two halves. The backend does what every ComfyUI preview does: flattens the incoming batch or list of image tensors into individual frames and writes them as PNGs - to ComfyUI's temp folder, not your output folder, so throwaway previews don't pile up where your real saves go. It also embeds the workflow and prompt metadata into those temp PNGs, which is the same trick the stock node uses: drag a temp preview back onto the canvas and the graph that made it reconstructs.

The front-end half is where the "DOM" part kicks in. A JavaScript widget replaces the default image display with a grid built out of actual HTML elements - free resizing, aspect-ratio probing on cached images, and image URLs served straight from ComfyUI's /view endpoint. It's built on the Eclipse DOM-preview infrastructure, the same one the pack's subgraph previews use.

The input and outputs that matter

  • images (required) - the batch or list of images to preview. It happily flattens nested lists and batches of tensors, so you can throw nearly anything image-shaped at it.

Outputs:

  • IMAGE - the images passed through as a list. This is an output node in the ComfyUI sense, so it always runs and the execution cache works backward from it. The pass-through means you can preview at a checkpoint in your graph without breaking the chain - wire the output onward and keep the workflow flowing.

When you'd use it

When you're iterating on a batch and the default preview doesn't keep up, or when you want the preview to sit comfortably in a crowded graph at whatever size fits. Because it's an output node that passes images through, it's a natural drop-in wherever you'd place a plain Preview Image but want the richer widget.

Installing it

Ships in ComfyUI_Eclipse. Manager (search "Eclipse") or:

cd ComfyUI/custom_nodes
git clone https://github.com/r-vage/ComfyUI_Eclipse
pip install -r ComfyUI_Eclipse/requirements.txt

then restart. This pack was previously RvTools_v2 and dropped its legacy nodes in v4.0.0, so resurrecting old workflows may need the bundled migration tool first.

Common issues

Preview nodes are the most reliable things in ComfyUI, so there's not much to trip on. If the preview shows nothing, check that you're actually feeding it images (an empty batch logs a warning and returns an empty result). One thing to keep in mind: this writes to temp, not output - if you generated something you want to keep, swap in the Save Images node, because temp previews are scratch and don't survive forever. That's by design, and it's the same rule as the stock Preview Image.

CategoryπŸŒ’ Eclipse/ Image/Save & Preview

Inputs (1)

NameTypeDefaultDescription
imagesIMAGEBatch of images to preview

Outputs (1)

NameTypeDescription
IMAGEIMAGEβ€”