Comfy-Org / Comfy-Org/ComfyUI_frontend

Feature: Alignment guides and snap-to-grid/node centers for precise node alignment

Open
#8,098 0 comments 0 reactions 0 assignees View on GitHub
area:nodes area:ui enhancement
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues and checked the recent builds/commits

### What problem are you experiencing?

Currently, it is very difficult to align nodes precisely either horizontally or vertically. When building complex node graphs, lack of alignment can make the workflows look messy and less readable — and constantly moving nodes by eye never feels 'right' for users who want perfectly tidy layouts. There are no visual guides to help determine when a node is aligned with another, either by edge or by center, and no option to snap while dragging.

### When does this problem occur?

This problem occurs whenever I'm arranging or reorganizing nodes on the canvas and want perfectly straight rows/columns or precisely lined-up edges or centers. It's especially noticeable when multiple nodes should form a structured or symmetrical layout and equally bad when importing or restyling an existing workflow.

### How often do you encounter this problem?

Multiple times per day

### How much does this problem affect your workflow?

Significantly slows down my work

### Current workarounds

Currently, I have to very carefully drag nodes and then rely on visual guesswork or use workaround hacks like grid backgrounds. For edge/center alignment, sometimes I try to measure using rough grid steps, but it is always off by a few pixels. There is no way to ensure that nodes are exactly aligned without a lot of trial-and-error, which gets tedious with bigger graphs.

### Ideas for solutions (Optional)

**Feature proposal:**
- Show visual guidelines (lines) when dragging a node, whenever its left/right edge or vertical/horizontal center aligns with the corresponding edge/center of any other node within a certain distance — similar to 'smart guides' in graphics editors.
- Optionally, when the node is near a guideline (within a few px), snap the movement to that guide so alignment is perfectly precise.
- Provide a toggle in settings or toolbar to enable a 'snap to grid' mode with an adjustable grid size; when active, node positions snap perfectly to the grid.
- While a guideline/snap is active, allow holding a modifier key (Space or Ctrl, for example) to lock movement onto the guideline so the node only moves along it, not off perpendicular by accident.
- All snapping/guideline behavior should work with both edge and center alignment.
- This functionality will benefit users building large/complex graphs and anyone who wants OCD-level tidiness.

Suggestions for implementation:
- Only scan for alignment with visible/nearby nodes to avoid performance issues on very large graphs.
- Option for user to set guideline color, snap tolerance, and guideline types (edge/center/grid).
- Document shortcuts and toggles in help/FAQ section.

### Additional context

This feature would be a big quality-of-life improvement for users who value visual order in their workflows, or those who have OCD.

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-8098-Feature-Alignment-guides-and-snap-to-grid-node-centers-for-precise-node-alignment-2ea6d73d36508105bf7eef699f001cbc) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.