Snapping & Guides

Smart Snapping

When you drag an element on the canvas, smart snapping automatically aligns it with nearby elements. Colored guide lines appear to show alignment:

• Edge alignment — Snaps to top, bottom, left, or right edges of nearby elements
• Center alignment — Snaps to the horizontal or vertical center of nearby elements
• Page center — Snaps to the center of the page
• Margin alignment — Snaps to the page margin boundaries

Alignment Guides

Alignment guides are temporary visual lines that appear when elements align:

• Pink/magenta lines — Show edge or center alignment with other elements
• Blue lines — Show alignment with the page center or margins
• Distance indicators — Show the pixel distance between elements

Guides appear automatically and disappear when you release the element.

Snap to Grid

Enable grid snapping to constrain element movement to grid intervals:

1. Open Canvas Settings (gear icon in the canvas toolbar)
2. Toggle Snap to Grid
3. Set the grid spacing (default: 8px)

With grid snapping enabled, elements snap to the nearest grid intersection when dragged or resized.

Equal Spacing Distribution

When you select three or more elements, you can distribute them with equal spacing:

1. Select multiple elements (Shift + click each one)
2. In the alignment toolbar, click Distribute Horizontally or Distribute Vertically
3. Elements are repositioned with equal gaps between them

Configuring Snapping

Customize snapping behavior in Canvas Settings:

• Snap distance — How close an element must be before it snaps (default: 5px)
• Snap to elements — Toggle alignment with other elements
• Snap to grid — Toggle grid-based snapping
• Snap to page — Toggle alignment with page center and margins
• Show guides — Toggle visual guide line display

Next Steps

• Grid & Rulers — Visual grid overlay and measurement
• Positioning & Alignment — Precise coordinates
• Keyboard Shortcuts — Speed up your workflow