Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

<Controls />

Source on GitHub 

The <Controls /> component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

<script lang="ts"> import { SvelteFlow, Controls } from '@xyflow/svelte'; let nodes = $state.raw([]); let edges = $state.raw([]); </script> <SvelteFlow bind:nodes bind:edges> <Controls /> </SvelteFlow>

Props

The type for props of <Controls /> component is exported as ControlsProps. Additionally, it extends the props of <div />.

NameTypeDefault
positionPanelPosition

Position of the controls on the pane

showZoomboolean

Show button for zoom in/out

showFitViewboolean

Show button for fit view

showLockboolean

Show button for toggling interactivity

buttonBgColorstring
buttonBgColorHoverstring
buttonColorstring
buttonColorHoverstring
buttonBorderColorstring
orientation"horizontal" | "vertical"
beforeSnippet<[]>
afterSnippet<[]>
fitViewOptionsFitViewOptions
...propsHTMLAttributes<HTMLDivElement>

Notes

Last updated on