π¦ BoxSelector
Draw a box on any image, get coordinates that actually land where you drew
- image
- image
- box_metadata
BoxSelector is the part of the BoxBox pack that actually feels fun: it puts a "Select Box" button on a node, and clicking it opens a little editor where you draw a rectangle over your image, zoom in, lock an aspect ratio, and get back a clean JSON string of coordinates. It's the manual-drawing front end to the crop-and-stitch pattern that the ComfyUI crowd has been rediscovering - select a region, process that region at real resolution, paste it back so the rest of the image never moves.
This is the node that makes that workflow hands-on. You're not juggling a mask file in an external editor or digging through PNG channel previews; you draw a box like you would in Photoshop and the coordinates ride along through the whole graph. mercu-lore is an active ComfyUI node author (the same person built a Qwen-Image-Edit camera-control node), and BoxBox is his small, quietly useful contribution to that editing ecosystem.
How it works
BoxSelector takes in an image and does two things: it passes the image straight through, and it produces a box_metadata string - a JSON object holding x1, y1, x2, y2, a displayScaleFactor, and a few other fields. That string is the whole point. Wire it into BoxCrop or BoxReinsert and they know exactly where your box was.
The interesting machinery is in the frontend. Images over 1024px get downscaled server-side through a /region_selector/scale endpoint before they hit the drawing canvas, so big frames don't lag; the coordinate math then converts back to original-image space using displayScaleFactor. That's the "pixel-perfect crop" work - get this wrong and your crop lands a few hundred pixels off, which is exactly the bug class this pack's enhanced version fixed. It also remembers your last aspect ratio and restores your previous selection (blue box and all) via localStorage, and it can walk back up to 20 nodes in the graph to find the source image even when there's a Brightness or Blur node in between.
The inputs that matter
- image (required): whatever you want to draw on. LoadImage output is the classic case.
- box_metadata (optional): a string you can paste or connect to pre-load a selection. Leave it empty the first time.
Outputs are image (the untouched pass-through) and box_metadata. Feed that string into BoxCrop's box_metadata input and you're in business.
Installing it
cd ComfyUI/custom_nodes
git clone https://github.com/mercu-lore/BoxBox
Then restart ComfyUI. Easier: open ComfyUI Manager, search "BoxBox", hit Install. The requirements.txt is just torch, numpy, and Pillow - everything ComfyUI already has, so there are no extra downloads and no model files. That's rare for a custom node and it means installs basically never break.
Common issues
- The "Select Box" button doesn't show up. The frontend targets ComfyUI v0.12.2+ and uses the modern
window.comfyAPI. If you're on a much older build, update ComfyUI before you debug anything else. - You see a processing node's input, not its output, in the preview. Known, intentional limitation - the preview shows the original image when Brightness/Blur/etc. sit between LoadImage and BoxSelector. Your coordinates still apply correctly to the processed image, so the crop is right; the preview is just lying a little. If that bothers you, put BoxSelector directly on the LoadImage and let the coordinates ride.
- Nothing else in this pack renders. Selector, crop, resize, and reinsert are one package; if you cloned it and only see some of the nodes, restart ComfyUI and check Manager's "Installed" list.
Inputs (2)
| Name | Type | Default | Description |
|---|---|---|---|
| image | IMAGE | β | |
| box_metadataopt | STRING | β |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| image | IMAGE | β |
| box_metadata | STRING | β |