> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Camera

> Pan and zoom the viewport

The camera is represented by a `Viewport`:

```typescript theme={null}
interface Viewport {
  x: number
  y: number
  zoom: number
}
```

## Control

```tsx theme={null}
editor.setViewport({ x: 0, y: 0, zoom: 1 })
editor.zoomIn()
```

## Range

The default range is 0.1 to 8. Customize via props:

```tsx theme={null}
<Tsdraw cameraOptions={{ zoomRange: { min: 0.5, max: 4 } }} />
```

## Interaction

Users can pan via:

* **Hand tool**
* **Two-finger drag** (trackpad/touch)
* **Space + drag**

Fast pans include deceleration momentum (slide).

## Coordinates

Convert between screen (pixel) and page (canvas) space:

```typescript theme={null}
import { screenToPage, pageToScreen } from '@tsdraw/core'

const pagePoint = screenToPage(viewport, x, y)
```

## Listeners

```tsx theme={null}
<Tsdraw onCameraChange={(vp) => console.log(vp)} />
```