Guides and alignment

While you move or resize a block, the editor overlays several visual markers to help you align your elements precisely. These markers only appear during the interaction and disappear once the block is released.

Grid pattern

The canvas is structured by a grid of columns and rows that's invisible by default. During a movement, gray dotted lines appear to make this grid visible. Blocks automatically snap to this grid, ensuring consistent layout.

The main lines (every 32 columns on desktop, 24 on mobile) are more pronounced than the secondary lines.

Alignment lines

When the block being moved aligns one of its edges or its center with another block in the same section, a purple line appears to confirm the alignment. Six alignments are detected:

• Left, right, top, bottom edge.
• Horizontal center or vertical center.

This saves you from fumbling around to align two blocks pixel-perfect: just drag until you see the line appear, then release.

Equal-size markers

When your block has the same width or height as another block in the section, pink lines appear around both blocks to signal it. Handy for giving exactly the same size to several side-by-side cards.

Spacing indicators

As soon as several blocks are evenly spaced (same interval on both sides or more), black pills display the gap value in pixels. This is how you confirm that three columns are evenly spaced, or that a button is centered between two paragraphs at equal distance.

Centering in the section

If you center a block relative to its parent section's center (horizontally, vertically or both), a purple dotted line crosses the section to confirm the exact centering.