Contextual Zoom

This example demonstrates how to implement contextual zooming in Svelte Flow. You can zoom to specific nodes or areas of the flow using the fitView function. This is useful for focusing on particular parts of your flow or implementing navigation features.


<script lang="ts">
  import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
  import ZoomNode from './ZoomNode.svelte';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
 
  const nodeTypes = {
    zoom: ZoomNode,
  };
</script>
 
<SvelteFlow bind:nodes {nodeTypes} bind:edges fitView>
  <Background />
</SvelteFlow>