Nodes/TBG’s ComfyUI Development Takeaways/TBG Preview Sender (WebSocket)
ComfyUI Node

TBG Preview Sender (WebSocket)

Stream ComfyUI previews to another app over the built-in websocket

By Ltamann·Created about a year ago·Updated 7 months ago· 20
TBG Preview Sender (WebSocket)
  • images
  • IMAGE
node_namerefiner_preview

ComfyUI's browser UI gets live previews through its built-in websocket, and by default that stream stays inside the web UI. If you're building a custom frontend, an app, or any tool that wants to show ComfyUI's images as they're generated - without writing files to disk and polling for them - you need to tap that websocket yourself. That's this node's entire job: it takes an image, converts it to a base64 PNG in memory, and pushes it over ComfyUI's existing websocket with a custom event type. Nothing touches disk, no external server, no polling loop.

Note the class name: TBG_Preview_Sender_WebSocked. The "WebSocked" typo is in the actual class, so if you're searching your workflow JSON or grepping code, spell it that way - it's a small thing, but it has tripped people up.

How it works

The node calls ComfyUI's PromptServer and sends a sync message with the event name tbg_preview, containing your image as a data:image/png;base64,... string plus a node_name and timestamp. Your client code - a web page, a Python websocket listener, whatever - subscribes to tbg_preview messages on the same websocket and renders the image. It sends only the first image in the batch and passes the batch through unchanged, so you can drop it anywhere in a chain without it interrupting anything.

Inputs:

  • images - any IMAGE tensor. Wire it after your VAE decode, or anywhere you want a preview tapped off.
  • node_name (optional) - a label for the message, default refiner_preview. Handy when you have several of these and want to tell which node a preview came from.

Output: IMAGE - the exact same images, passed through. It's flagged as an output node, so ComfyUI treats it as a valid terminal for that branch.

Install

Manager → search TBG Takeaways → install, restart:

cd ComfyUI/custom_nodes
git clone https://github.com/Ltamann/ComfyUI-TBG-Takeaways

Under TBG/Takeaways after restart. No deps, no downloads.

Who is this for? Specifically the person building a custom ComfyUI frontend or an automation that wants image events without disk I/O. If that's you, the tbg_preview event name and the payload format above are the whole contract. If you're just a normal workflow user, this node is useless to you - your previews already work in the UI, and there's nothing here for a pure generator graph. It's also worth knowing the package ships an older preview-node file that may not register in all versions, so if the node doesn't appear after install, check you're on a recent ComfyUI. Small, single-purpose, and genuinely handy for exactly one kind of project.

CategoryTBG/Takeaways

Inputs (2)

NameTypeDefaultDescription
imagesIMAGE
node_nameoptSTRINGrefiner_preview

Outputs (1)

NameTypeDescription
IMAGEIMAGE