Panning and Zooming

The default pan and zoom behavior of Svelte Flow is inspired by slippy maps . You pan by dragging your pointer and zoom by scrolling. You can customize this behavior easily with the interaction and keyboard props on the <SvelteFlow /> component.

Viewport configurations

Here we will list and explain some configurations that other tools use.

Default viewport controls

As mentioned above, the <SvelteFlow /> default controls are as follows:

pan: pointer drag
zoom: pinch or scroll
select: shift + pointer drag

Design tool viewport controls

If you prefer figma/sketch/design tool controls you can set panOnScroll and selectionOnDrag to true and panOnDrag to false:

pan: scroll, middle / right mouse drag, space + pointer drag
zoom: pinch or cmd + scroll
select: pointer drag

In this example we also set selectionMode="partial" to be able to add nodes to a selection that are only partially selected.