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

Notes

• To extend or customize the controls, you can use the <ControlButton /> component