The designer ships with a `DesignerCanvas` component that is zoomable and panable. It has support for keyboard shortcuts and touch gestures.

Wrap your `DesignerFrame` component with the `DesignerCanvas` component to enable zooming and panning.

```tsx
<DesignerCanvas>
  <DesignerFrame />
</DesignerCanvas>
```

## ActionToolbarZoom

Use the `ActionToolbarZoom` component to add zoom in and out controls to your designer.

```tsx
import {
  ActionToolbarZoom,
  DesignerToolbar,
  DesignerToolbarGroup,
} from "@shadcn/designer"

function CustomToolbar() {
  return (
    <DesignerToolbar>
      <DesignerToolbarGroup>
        <ActionToolbarZoom />
      </DesignerToolbarGroup>
    </DesignerToolbar>
  )
}
```

## Keyboard Shortcuts

You can also use the keyboard shortcuts to zoom in and out. 

- CMD or Ctrl + + to zoom in
- CMD or Ctrl + - to zoom out
- CMD or Ctrl + 0 to reset zoom
- CMD or Ctrl + 1 to zoom to fit
- CMD or Ctrl + 2 to zoom to 100%

## Custom Zoom Controls

You can bring your own zoom controls using the `useZoom` and `useSetZoom` hooks.

```tsx
function CustomZoomControls() {
  const zoom = useZoom()
  const setZoom = useSetZoom()

  return (
    <div className="flex gap-2">
      <Button onClick={() => setZoom(zoom + 0.1)}>Zoom In</Button>
      <Button onClick={() => setZoom(zoom - 0.1)}>Zoom Out</Button>
      <Button onClick={() => setZoom(1)}>Reset</Button>
    </div>
  )
}
```

## designerAction

You can also use the `designerAction` hook to set more controlled zoom levels.

This will handle maximum and minimum zoom levels.

```tsx
function CustomZoomControls() {
  const designerAction = useDesignerAction()

  return (
    <div className="flex gap-2">
      <Button onClick={() => designerAction("ZOOM_IN")}>Zoom In</Button>
      <Button onClick={() => designerAction("ZOOM_OUT")}>Zoom Out</Button>
      <Button onClick={() => designerAction("ZOOM_RESET")}>Reset</Button>
    </div>
  )
}
```