ComfyUI Node

Save Preview Image

Make your ComfyUI dropdowns show thumbnails — without leaving the graph

By sn0w12·Created 2 years ago·Updated 2 months ago· 3
Save Preview Image
  • images
    namepreview
    overwritetrue
    subfolder

    Save Preview Image is the unglamorous half of the ComfyUI-Syntax-Highlighting pack: it exists to feed the other half. The pack gives your textboxes live syntax highlighting (weights, LoRAs, embeddings, duplicate tags) and puts small preview images on combo dropdowns - so when you pick a checkpoint, LoRA, or any combo value in a node, a thumbnail pops up to remind you what it looks like. This node is how you make those thumbnails. It's an output node with no outputs, and it does one job: take a generated image and drop it into the folder the pack reads its previews from.

    It saves you a genuinely annoying chore. Without it, making previews means generating an image, then hunting through custom_nodes in your file browser to hand-place a file with the exact right name. With it, you generate, name, and be done - all inside the graph.

    How it works

    The pack shows a preview for a combo value by looking for an image in ComfyUI/custom_nodes/ComfyUI-Syntax-Highlighting/web/images whose filename matches the combo value exactly (ignoring the extension). If you're using LoRA X and you want it previewed, you need a lora_x.png sitting in that folder. That's the entire contract.

    Save Preview Image is the author's sanctioned way to write into that folder. Feed it an IMAGE, give it a name, and it saves a PNG (workflow metadata embedded, same as the built-in Save Image node) to the preview directory. A couple of behaviors worth knowing from the source:

    • The name gets slugified - lowercased, and every non-alphanumeric character turned into an underscore. My LoRA! becomes my_lora. That's a real gotcha if your combo value has uppercase letters: the file on disk won't match, and no preview shows. Name it to match what's actually saved.
    • Batches are handled: a batch of 4 becomes name.png, name_1.png, name_2.png, name_3.png.
    • There's also a subfolder input if you want to organize previews, and an overwrite toggle. Set overwrite to false and it auto-increments instead of clobbering - useful if you're iterating and want to keep every take.

    The inputs that matter

    Only the first two, honestly:

    • images - what you're saving. Wire up the image output of a VAE Decode, a preview sampler, whatever.
    • name - the filename without extension. This is the part that has to match a combo value in the pack, so think before you type. Everything else (overwrite, subfolder) is fine at its default.

    There are no outputs, which is correct: this node terminates a branch. Put it at the end of the line.

    Installing it

    Same story as any custom node. Easiest is ComfyUI Manager: search for "Syntax Highlighting" (or ComfyUI-Syntax-Highlighting), hit install, restart. Or the manual route:

    cd ComfyUI/custom_nodes
    git clone https://github.com/sn0w12/ComfyUI-Syntax-Highlighting
    

    Restart ComfyUI. No requirements.txt, no models to download, no torch dependencies - the backend is a handful of small Python files and everything interesting is frontend JS. This is about the least invasive install in the ecosystem.

    Common issues

    • Preview not showing. Almost always a name mismatch. Remember the slugify: check the actual filename in web/images, not what you typed. After adding files, hit the Index Images button in the pack's settings (Settings → Preview Image) or restart, so the frontend picks up new previews - it caches the list.
    • Images vanishing. The default save location lives inside the pack folder. If you update or reinstall the pack through Manager, your hand-made previews can get wiped with it. That's why a custom save path is worth it once you have a collection.
    • Files going to the wrong place. The save path is configurable via the SyntaxHighlighting.preview-image-save-path setting in ComfyUI's settings JSON, defaulting to the pack's web/images. If you changed it and previews stopped appearing, that's your first suspect.

    Is this node worth installing the whole pack for? Alone, no. As the companion to the syntax highlighting and combo previews, it's the piece that makes the feature actually usable - otherwise you're hand-copying files into custom_nodes like it's 2023. If you've ever squinted at a 40-node workflow trying to remember which of five LoRAs is which, this is the pack that fixes it.

    Categoryimage

    Inputs (4)

    NameTypeDefaultDescription
    imagesIMAGEThe images to save.
    nameSTRINGpreviewThe filename to save the image as (without extension)
    overwriteBOOLEANtrueWhether to overwrite existing files with the same name
    subfolderSTRINGOptional subfolder within the output directory

    Outputs (0)

    No outputs