Create Layered Image
The closest ComfyUI gets to a drag-and-drop Photoshop canvas
- layers
- compositor
- IMAGE
- MASK
The standard ComfyUI loop - queue, stare at a PreviewImage, nudge a seed, repeat - is the wrong tool for a job that is actually about placing things. Product shot on a backdrop. A character cutout dropped over a scene. Renders composited onto a plate. For that you want to drag, resize, rotate, and see the result immediately, not retype coordinates and re-run. That's what Image Compositor 🎨 gives you: a real canvas living inside the node where you move layers around with your mouse, and only when you're happy do you hit Queue.
It's the flagship of CY-CHENYUE's ImageCompositionCy pack - a young, single-author set of nodes with a handful of stars and no community footprint to speak of. Treat it as a promising utility, not a battle-tested ecosystem. The demand is real, though: interactive compositing inside ComfyUI is a live niche (LayerForge and friends exist precisely because people got sick of positioning images by typing numbers), and this is one of the more focused takes on it.
How it works
The node is two halves that talk through JSON. The frontend (web/js/image_compositor.js) draws a 1024×1024 canvas in the node body and hands you drag-to-move, corner resize handles, a rotation handle, a right-click layer menu, and a drawing mode (press D to toggle) with brush, eraser, color picker, and opacity. Everything you do gets serialized into the composition_data string - that's the source of truth, and why your layout survives saving and reloading the workflow. When you actually run the graph, the Python backend reads the same JSON and re-renders the composite with PIL: each overlay is pasted in layer order via Image.alpha_composite, your transforms (LANCZOS resize, rotation, opacity) are applied, then the drawing layer is merged on top. Output resolution comes from the background image if you supply one; otherwise you get a 1024×1024 canvas.
Inputs and outputs
The info_schema tells you almost everything you need. input_count (INT, 1–20, default 3) sets how many overlay inputs exist - only overlay_image_1..3 are there by default, so raise it before you need more. background_image is optional and sets canvas size. overlay_image_* are your layers, and composition_data is the JSON string you should mostly leave alone. Outputs are composite (IMAGE, drawing layer included) and mask (MASK - the composite's alpha channel, handy if you're chaining another compositing step).
Install
cd ComfyUI/custom_nodes
git clone https://github.com/CY-CHENYUE/ComfyUI-ImageCompositionCy.git
cd ComfyUI-ImageCompositionCy
pip install -r requirements.txt
Then restart ComfyUI. Or use ComfyUI Manager and search "ImageCompositionCy". No model files to download; requirements.txt is just pillow, numpy and torch - all of which any working ComfyUI already has.
Gotchas
- The canvas preview is browser-side and live, but
compositeonly flows downstream when you actually run the workflow. Editing doesn't re-queue anything. - Plain LoadImage silently drops the alpha channel, and this node's whole trick is transparency - feed overlays through the pack's Load Image (Alpha) 🖼️ node if they're transparent PNGs. (Transparency mangling is the recurring complaint across the whole interactive-compositing niche, so you're not being precious.)
- It's young code. If a layout renders wrong, check whether
composition_datastill looks sane before blaming anything else.
Inputs (2)
| Name | Type | Default | Description |
|---|---|---|---|
| layers | LAYERS | Layer stack to composite; build it with Add Layer. Items are stacked by z_index, batch frames inside an item expand to consecutive layers, and item placement, opacity, and blend mode define the initial composition. Without an explicit document canvas the size is a best-effort maximum extent of the placed layers. A saved composition that matches the current inputs takes priority. | |
| compositor | COMPOSITOR | [object Object] | Layered composition saved by the compositor editor. |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| IMAGE | IMAGE | Composited image. Carries an alpha channel when the composite has transparent areas (e.g. hidden background), otherwise plain RGB. |
| MASK | MASK | Transparency of the composite (1 = fully transparent). All zeros when the composite is opaque. |