# Navigate the canvas with Pan & Zoom mode

![image](https://docs-assets.foxecom.app/foxify-app/Untitled%20design%20(42)_xiy2R6uI.gif)

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

## What is Pan & Zoom mode

<Cards columns="2">
<Card title="Pan">

<strong>Pan</strong>

</Card>
<Card title="Zoom">

<strong>Zoom</strong>

</Card>
</Cards>

## 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.

![image](https://docs-assets.foxecom.app/foxify-app/image_ypMH5LY0.png)

</Step>

<Step>

#### Editor preference

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

![image](https://docs-assets.foxecom.app/foxify-app/image_FbxyFXID.png)

</Step>

</Stepper>

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

![image](https://docs-assets.foxecom.app/foxify-app/image_ji6zGahT.png)

## Keyboard shortcuts

<Table widths="180,auto">

| Action | Shortcut |
| --- | --- |
| Zoom in | `Ctrl` + scroll up / `Cmd` + scroll up |
| Zoom out | `Ctrl` + scroll down / `Cmd` + scroll down |
| Pan (temporary) | Hold `Space` to switch to hand tool |
| Pan (scroll) | Scroll to move vertically. Click and drag in hand mode to move freely. |

</Table>

## Zoom menu options

<Table widths="180,auto">

| Action | Shortcut |
| --- | --- |
| Zoom to fit | Scales the canvas to show your entire design in one frame. Use this before publishing to review the full layout at a glance. |
| Zoom to 100% | Returns the canvas to actual size. Use this when you need to see exactly how elements will appear on screen. |
| Snap to center top | Instantly scrolls to the top of your design while keeping your current zoom level — useful when you've scrolled far down a long page. |

</Table>

<Hint type="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.

</Hint>

## Related resources

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/grids-guide-and-snap-lines">Grids guide and Snap lines</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/page-layers">Page layers</PageLink>