Skip to main content

Add Grid, Guides & Snap-to (Alignment Helpers) in GemPages v7 Editor

Feature Requests

Please add a proper visual alignment system to the GemPages v7 editor: grid overlay, guides/rulers, and snap-to alignment (edges/center/spacing). This would make layout building faster and more precise—especially for modern UX/UI, landing pages, and consistent spacing across sections.

Problem / Why it matters:
Right now, aligning elements and keeping consistent spacing often requires manual tweaking and repeated “eye-balling.” On complex pages (multi-column rows, cards, headings + CTAs), it’s easy to end up with small misalignments that hurt visual quality and perceived trust.

Requested features:

  1. Grid Overlay

  • Toggle on/off grid overlay on canvas

  • Configurable grid (e.g., 4/8/12 columns, spacing units)

  • Optional: baseline grid for typography rhythm

  1. Rulers + Guides

  • Top/left rulers (optional)

  • Drag-and-drop guides from rulers

  • Ability to lock/unlock and clear guides

  1. Snap-to / “Sticky” Alignment

  • Snap elements to:

    • container edges

    • center line (horizontal/vertical)

    • other elements’ edges/centers

    • consistent spacing (equal gaps)

  • Visual indicators while dragging (smart guides)

  • Toggle snapping on/off (or hold a key to temporarily disable)

  1. Spacing/Alignment Measurements (nice-to-have)

  • Show live distance (px) between elements while moving

  • Show padding/margin hints relative to container

How this improves UX/UI + conversion:

  • Cleaner, more consistent layouts increase perceived quality/trust.

  • Faster editing → more iteration on messaging and conversion flow.

  • Helps build “polished” pages like in Figma/Canva/Webflow with fewer manual adjustments.

Extra note: This becomes even more important as GemPages v7 adds more advanced interactions and components—alignment tools are a foundational productivity and quality feature.

Posted by Dima Chernyshov ·
1 comment

Log in to comment and vote

Comments1

  • Lucas Nguyen

    Team•

    Mar 18

    Hi @Dima Chernyshov

    This is definitely valuable, though it’s not a simple addition. There are some deeper technical constraints involved.

    Here is the technical breakdown of the specific challenges we need to solve:

    1. The Foundation: Our 12-Column Grid Architecture Our current builder isn't just a free-form canvas; it’s a structured layout grid.

      • We use the industry-standard Bootstrap-style grid. Every layout is built using Rows (containers) and Columns inside Row that follow a 12-unit logic.

      • Unlike Figma, where you can place an element at x: 143px, our elements live within a nested DOM tree. Snapping an element doesn't just mean changing its coordinates; it means calculating its relationship to its parent container and siblings.

    1. The Implementation Challenge: "Smart Snapping" Implementing "Snap-to" in a nested, responsive environment is significantly more complex than in a static graphic editor.

      • Coordinate Mapping: We have to map the mouse position relative to the viewport of every other visible element on the page in real-time.

      • Unit Reconciliation: If you drag a button (measured in px) near a column boundary (measured in %), the engine must perform instant math to "snap" the button's margin or padding to align perfectly with that percentage-based line.

      • Performance: Running "Smart Guide" calculations on every mousemove event can cause lag. We are looking into Quadtree spatial indexing or Intersection Observer optimizations to ensure the UI stays buttery smooth at 60fps.

    We’ll be exploring approaches that can work within our architecture while maintaining flexibility and performance, and will update you as soon as we have a viable direction.

    Have a nice day,
    Lucas