Skip to main content

Pan + Zoom Canvas (Move Canvas Like in Figma/Canva/Photoshop)

Feature Requests

Please add the ability to move (pan) and zoom the editor canvas. When the left panel is open, it often overlaps or squeezes the canvas area, making precise layout work harder. A simple pan/zoom system—like in Figma, Canva, Photoshop, etc.—would dramatically improve workflow speed and accuracy.

Problem / Why it matters:

  • On smaller screens (or when the left panel is expanded), parts of the canvas get covered or cramped.

  • I frequently need to inspect spacing, alignment, and typography at different scales.

  • Without quick pan/zoom, I end up scrolling awkwardly, collapsing panels, or losing the exact spot I’m editing.

Requested functionality:

  1. Canvas Zoom Controls

    • Zoom in / out (+ and - buttons)

    • Zoom percentage indicator (e.g., 50% / 100% / 125% / 200%)

    • “Fit to screen” and “Actual size (100%)”

    • Optional: “Zoom to selection”

  2. Canvas Pan / Move Tool

    • Hold Spacebar to temporarily activate a Hand tool (drag to pan)

    • Middle mouse button drag to pan (optional)

    • Trackpad support: pinch-to-zoom + two-finger pan (optional)

  3. Keyboard & Mouse Shortcuts (suggested)

    • Ctrl/Cmd + mouse wheel = zoom in/out

    • Ctrl/Cmd + 0 = fit to screen

    • Ctrl/Cmd + 1 = 100%

How this helps UX/UI + SEO workflows:

  • Faster editing = more time spent improving real UX (spacing, hierarchy, clarity) instead of fighting the editor.

  • Better precision on layout → cleaner pages, more consistent design, fewer accidental misalignments.

  • Easier to review above-the-fold and responsive details quickly, which supports conversion-focused layouts.

Extra notes:

  • This is standard in most modern editors (Figma/Canva/Photoshop), and it would be a huge productivity win inside GemPages v7—especially when working with side panels open.

Posted by Dima Chernyshov ·
1 comment

Log in to comment and vote

Comments1

  • Lucas Nguyen

    Team•

    Mar 18

    Hi @Dima Chernyshov

    Thank you for your suggestion. This is a very interesting idea, but it touches on a fundamental architectural difference between tools like Figma and a website builder like GemPages.

    Here’s a simple breakdown of why “Pan & Zoom” is not a straightforward addition:

    1. Canvas vs. Live DOM

      • Figma / Canva (canvas-based): These tools operate like a digital canvas. Every element is positioned using fixed coordinates (X, Y) on a flat surface. Zooming is simply a mathematical scale of those coordinates.

      • GemPages (DOM-based): We are rendering a live website. Elements are not just “placed” — they are structured and nested (e.g., buttons inside columns, columns inside rows), following HTML and CSS flow rules.

    1. The Responsive Constraint

      • In a web environment, zooming behaves differently from a design canvas. It often affects how the browser interprets viewport width and responsive breakpoints, rather than just scaling the visual layer. This creates conflicts with how layouts are meant to adapt across devices.


    Because of these constraints, implementing true canvas-like pan and zoom would require a significant shift in how the editor is structured at a foundational level.

    We’ll share updates as soon as we identify a viable path forward.

    Best regards,
    Lucas