> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/pan-and-zoom-mode.md).

# Pan & Zoom mode

<figure><img src="/files/xiy2R6uI6asgmvwcjAZD" alt=""><figcaption></figcaption></figure>

Navigate and preview your canvas freely — useful when working on large layouts or detailed sections

## What is Pan & Zoom mode&#x20;

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><i class="fa-hand">:hand:</i></td><td><strong>Pan</strong></td><td>Drag across the canvas to move around your page without scrolling. Switch to the hand tool by clicking the hand icon in the zoom toolbar, or hold <kbd>Space</kbd> temporarily.</td></tr><tr><td><i class="fa-magnifying-glass-plus">:magnifying-glass-plus:</i></td><td><strong>Zoom</strong></td><td>Zoom in to fine-tune details or zoom out to see the full layout. Canvas loads at 100% by default when you open the editor.</td></tr></tbody></table>

## Enable Pan & Zoom mode ⚙

Two ways to turn it on.

{% stepper %}
{% step %}

#### Top bar toggle&#xD;

In the editor top bar, click the Pan & Zoom toggle to enable it directly.

<figure><img src="/files/ypMH5LY0zRcBoa1fujiu" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Editor preference

Click the **Editor preferences** icon and select **Enable pan & zoom mode**.

<figure><img src="/files/FbxyFXIDRbSmWOm9BtvR" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

Once enabled, the **Zoom toolbar** appears at the bottom center of the canvas.

<figure><img src="/files/ji6zGahTDTJjDYLhbSHg" alt=""><figcaption></figcaption></figure>

## Keyboard shortcuts

<table><thead><tr><th width="180">Action</th><th>Shortcut</th></tr></thead><tbody><tr><td>Zoom in</td><td><kbd>Ctrl</kbd> + scroll up  /  <kbd>Cmd</kbd> + scroll up</td></tr><tr><td>Zoom out</td><td><kbd>Ctrl</kbd> + scroll down  /  <kbd>Cmd</kbd> + scroll down</td></tr><tr><td>Pan (temporary)</td><td>Hold <kbd>Space</kbd> to switch to hand tool</td></tr><tr><td>Pan (scroll)</td><td>Scroll to move vertically. Click and drag in hand mode to move freely.</td></tr></tbody></table>

## Zoom menu options

<table data-header-hidden><thead><tr><th width="180">Action</th><th>Shortcut</th></tr></thead><tbody><tr><td>Zoom to fit</td><td>Scales the canvas to show your entire design in one frame. Use this before publishing to review the full layout at a glance.</td></tr><tr><td>Zoom to 100%</td><td>Returns the canvas to actual size. Use this when you need to see exactly how elements will appear on screen.</td></tr><tr><td>Snap to center top</td><td>Instantly scrolls to the top of your design while keeping your current zoom level — useful when you've scrolled far down a long page.</td></tr></tbody></table>

{% hint style="info" %}
**Tips:**

✅ Keep your browser zoom at 100% for full access to editing tools and best performance.

✅ Use Zoom to fit before publishing to quickly review your full design layout.
{% endhint %}

## Related resources

{% content-ref url="/pages/CSoNTt6swbL4QlqpYkT0" %}
[Grids guide and Snap lines](/foxify-app/foxstudio/editor-tools/grids-guide-and-snap-lines.md)
{% endcontent-ref %}

{% content-ref url="/pages/MrWM1r5L3ERggeqPdhyI" %}
[Page layers](/foxify-app/foxstudio/editor-tools/page-layers.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/pan-and-zoom-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.