diff --git a/packages/svelte/src/lib/components/Attribution/Attribution.svelte b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
index a984cdd1..03132723 100644
--- a/packages/svelte/src/lib/components/Attribution/Attribution.svelte
+++ b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
@@ -8,14 +8,18 @@
   export let position: AttributionProps['position'] = 'bottom-right';
 </script>
 
-
 {#if !proOptions?.hideAttribution}
   <Panel
-    position={position}
+    {position}
     class="svelte-flow__attribution"
     data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev"
   >
-    <a href="https://reactflow.dev/svelte" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">
+    <a
+      href="https://reactflow.dev/svelte"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Svelte Flow attribution"
+    >
       Svelte Flow
     </a>
   </Panel>
@@ -33,4 +37,4 @@
     text-decoration: none;
     color: #999;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index 0438ba05..1966d50e 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -18,12 +18,12 @@
 
 <path
   d={path}
-  id={id}
+  {id}
   fill="none"
   class="svelte-flow__edge-path"
   marker-start={markerStart}
   marker-end={markerEnd}
-  style={style}
+  {style}
 />
 
 {#if interactionWidth}
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 07b98061..5c3adaa3 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -29,8 +29,8 @@
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
   export let targetHandleId: $$Props['targetHandleId'] = undefined;
-  
-   // @ todo: support edge updates
+
+  // @ todo: support edge updates
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
   const dispatch = createEventDispatcher();
@@ -45,19 +45,13 @@
       addSelectedEdges([id]);
     }
 
-    const edge = $edges.find(e => e.id === id);
+    const edge = $edges.find((e) => e.id === id);
     dispatch('edge:click', edge);
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<g
-  class="svelte-flow__edge"
-  class:animated
-  class:selected
-  data-id={id}
-  on:click={onClick}
->
+<g class="svelte-flow__edge" class:animated class:selected data-id={id} on:click={onClick}>
   <svelte:component
     this={edgeComponent}
     {id}
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 1eceb858..76e90ecd 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -25,7 +25,7 @@
 
   const handleId = id || null;
   const dispatch = createEventDispatcher();
-  
+
   const store = useStore();
   const {
     connectionMode,
@@ -38,7 +38,7 @@
     addEdge,
     panBy,
     cancelConnection,
-    updateConnection,
+    updateConnection
   } = store;
 
   function dispatchEvent(eventName: string, params?: Connection) {
@@ -47,7 +47,7 @@
 
   function onConnectExtended(params: Connection) {
     addEdge(params);
-    dispatchEvent('connect', params)
+    dispatchEvent('connect', params);
   }
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -69,7 +69,7 @@
         cancelConnection,
         panBy,
         onConnect: onConnectExtended,
-        getTransform: () => $transform,
+        getTransform: () => $transform
       });
     }
   }
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 828adfd6..114c0917 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
   import { errorMessages, type NodeProps } from '@xyflow/system';
@@ -59,7 +58,7 @@
   });
 
   function dispatchEvent(eventName: string) {
-    const node = $nodes.find(n => n.id === id);
+    const node = $nodes.find((n) => n.id === id);
     dispatch(eventName, node);
   }
 
@@ -69,13 +68,20 @@
       addSelectedNodes([id]);
     }
 
-    dispatchEvent('node:click')
+    dispatchEvent('node:click');
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  use:drag={{ nodeId: id, isSelectable: selectable, disabled: false, handleSelector: undefined, noDragClassName: 'nodrag', store }}
+  use:drag={{
+    nodeId: id,
+    isSelectable: selectable,
+    disabled: false,
+    handleSelector: undefined,
+    noDragClassName: 'nodrag',
+    store
+  }}
   bind:this={nodeRef}
   data-id={id}
   class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
diff --git a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
index 4b9388f7..2fdb25c6 100644
--- a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+++ b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  
+
   import { createStoreContext } from '$lib/store';
-  
+
   const store = createStoreContext();
 
   onDestroy(() => {
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
index 4a33bcc1..60921eb6 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -28,4 +28,3 @@
   interactionWidth={$$props.interactionWidth}
   style={$$props.style}
 />
-
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index 247764b6..50f282ff 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -26,4 +26,3 @@
   interactionWidth={$$props.interactionWidth}
   style={$$props.style}
 />
-
diff --git a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
index 4ea0cdcc..09421958 100644
--- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
@@ -17,4 +17,3 @@
 <Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end />
 {data?.label}
 <Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end />
-
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 6c495dd9..752c9b33 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -14,7 +14,6 @@
   <MarkerDefinition />
 </svg>
 
-
 <style>
   .svelte-flow__edges {
     width: 100%;
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index 3f54f47a..dd1ec439 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -8,19 +8,19 @@
   export let width: $$Props['width'] = 12.5;
   export let height: $$Props['height'] = 12.5;
   export let markerUnits: $$Props['markerUnits'] = 'strokeWidth';
-  export let orient: $$Props['orient']= 'auto-start-reverse';
+  export let orient: $$Props['orient'] = 'auto-start-reverse';
   export let color: $$Props['color'] = undefined;
   export let strokeWidth: $$Props['strokeWidth'] = undefined;
 </script>
 
 <marker
   class="svelte-flow__arrowhead"
-  id={id}
+  {id}
   markerWidth={`${width}`}
   markerHeight={`${height}`}
   viewBox="-10 -10 20 20"
-  markerUnits={markerUnits}
-  orient={orient}
+  {markerUnits}
+  {orient}
   refX="0"
   refY="0"
 >
@@ -43,4 +43,4 @@
       points="-5,-4 0,0 -5,4 -5,-4"
     />
   {/if}
-</marker>
\ No newline at end of file
+</marker>
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte
index 26c53926..3a1509a9 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <defs>
-  {#each $markers as marker(marker.id)}
+  {#each $markers as marker (marker.id)}
     <Marker {...marker} />
   {/each}
-</defs>
\ No newline at end of file
+</defs>
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index eee0573e..7bf598c2 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -5,7 +5,8 @@
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
-  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore();
+  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } =
+    useStore();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
@@ -38,8 +39,14 @@
       data={node.data}
       selected={node.selected}
       draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
-      selectable={!!(node.selectable || ($elementsSelectable && typeof node.selectable === 'undefined'))}
-      connectable={!!(node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined'))}
+      selectable={!!(
+        node.selectable ||
+        ($elementsSelectable && typeof node.selectable === 'undefined')
+      )}
+      connectable={!!(
+        node.connectable ||
+        ($nodesConnectable && typeof node.connectable === 'undefined')
+      )}
       positionAbsolute={node.positionAbsolute}
       positionOrigin={posOrigin}
       isParent={!!node[internalsSymbol]?.isParent}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 5c33adc7..46baa182 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -30,8 +30,8 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { SelectionMode, getEventPosition, getNodesInside  } from '@xyflow/system';
-  
+  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+
   import { useStore } from '$lib/store';
   import { getConnectedEdges } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
@@ -52,7 +52,7 @@
     selectionRectMode,
     selectionKeyPressed,
     selectionMode,
-    unselectNodesAndEdges,
+    unselectNodesAndEdges
   } = useStore();
 
   let container: HTMLDivElement;
@@ -166,7 +166,6 @@
 
     dispatch('pane:contextmenu', event);
   };
-
 </script>
 
 <div
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 786b8dc3..8443e408 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -25,7 +25,7 @@
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: Viewport = { x:0, y: 0, zoom: 1 };
+  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -66,8 +66,8 @@
     store.height.set(height);
     store.domNode.set(domNode);
 
-    store.syncNodeStores(nodes)
-    store.syncEdgeStores(edges)
+    store.syncNodeStores(nodes);
+    store.syncEdgeStores(edges);
 
     if (fitView !== undefined) {
       store.fitViewOnInit.set(fitView);
@@ -78,15 +78,15 @@
       edgeTypes,
       minZoom,
       maxZoom,
-      translateExtent,
+      translateExtent
     });
 
     return () => {
       store.reset();
-    }
+    };
   });
 
-  // this updates the store for simple changes 
+  // this updates the store for simple changes
   // where the prop names equals the store name
   $: {
     const updatableProps: UpdatableStoreProps = {
@@ -99,10 +99,10 @@
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
-      isValidConnection,
+      isValidConnection
     };
 
-   updateStoreByKeys(store, updatableProps);
+    updateStoreByKeys(store, updatableProps);
   }
 
   $: updateStore(store, {
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 6ed50181..a6ae47df 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -64,6 +64,7 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
   getKeys(keys).forEach((prop) => {
     const update = keys[prop];
     if (update !== undefined) {
+      // @todo: how to fix this TS error?
       // @ts-ignore
       store[prop].set(update);
     }
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
index 2892cfed..01da8419 100644
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -1,23 +1,23 @@
-<script lang="ts"> 
+<script lang="ts">
   import { PanOnScrollMode } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
 
-  type $$Props = ZoomProps; 
+  type $$Props = ZoomProps;
 
   export let initialViewport: $$Props['initialViewport'];
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let panOnScrollMode: $$Props['panOnScrollMode'];
-  export let preventScrolling: $$Props['preventScrolling'];;
-  export let zoomOnScroll: $$Props['zoomOnScroll'];;
-  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];;
-  export let zoomOnPinch: $$Props['zoomOnPinch'];;
+  export let preventScrolling: $$Props['preventScrolling'];
+  export let zoomOnScroll: $$Props['zoomOnScroll'];
+  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];
+  export let zoomOnPinch: $$Props['zoomOnPinch'];
   export let panOnDrag: $$Props['panOnDrag'];
-  export let panOnScroll: $$Props['panOnScroll'];;
+  export let panOnScroll: $$Props['panOnScroll'];
 
   const {
     transform,
@@ -29,35 +29,38 @@
     translateExtent,
     lib
   } = useStore();
-  
+
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
 </script>
 
-<div class="svelte-flow__zoom" use:zoom={{
-  transform,
-  minZoom: $minZoom,
-  maxZoom: $maxZoom,
-  initialViewport: viewPort,
-  dragging,
-  panZoom,
-  onPanZoomStart: onMoveStart,
-  onPanZoom: onMove,
-  onPanZoomEnd: onMoveEnd,
-  zoomOnScroll,
-  zoomOnDoubleClick,
-  zoomOnPinch,
-  panOnScroll,
-  panOnDrag,
-  panOnScrollSpeed: 0.5,
-  panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
-  zoomActivationKeyPressed: false,
-  preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
-  noPanClassName: 'nopan',
-  noWheelClassName: 'nowheel',
-  userSelectionActive: $selectionKeyPressed,
-  translateExtent: $translateExtent,
-  lib: $lib
-}}>
+<div
+  class="svelte-flow__zoom"
+  use:zoom={{
+    transform,
+    minZoom: $minZoom,
+    maxZoom: $maxZoom,
+    initialViewport: viewPort,
+    dragging,
+    panZoom,
+    onPanZoomStart: onMoveStart,
+    onPanZoom: onMove,
+    onPanZoomEnd: onMoveEnd,
+    zoomOnScroll,
+    zoomOnDoubleClick,
+    zoomOnPinch,
+    panOnScroll,
+    panOnDrag,
+    panOnScrollSpeed: 0.5,
+    panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
+    zoomActivationKeyPressed: false,
+    preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
+    noPanClassName: 'nopan',
+    noWheelClassName: 'nowheel',
+    userSelectionActive: $selectionKeyPressed,
+    translateExtent: $translateExtent,
+    lib: $lib
+  }}
+>
   <slot />
 </div>
 
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index 4ef0c66b..7984d2e8 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -20,7 +20,7 @@
   import { useStore } from '$lib/store';
   import { BackgroundVariant, type BackgroundProps } from './types';
 
-  type $$Props = BackgroundProps; 
+  type $$Props = BackgroundProps;
 
   export let variant: $$Props['variant'] = BackgroundVariant.Dots;
   export let gap: $$Props['gap'] = 20;
@@ -47,7 +47,11 @@
     : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 </script>
 
-<svg class={cc(['svelte-flow__background', className])} {style} data-testid="svelte-flow__background">
+<svg
+  class={cc(['svelte-flow__background', className])}
+  {style}
+  data-testid="svelte-flow__background"
+>
   <pattern
     id={patternId}
     x={$transform[0] % scaledGap[0]}
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index e9e7b79c..b978fd6f 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -18,7 +18,15 @@
   export let showInteractive: $$Props['showInteractive'] = true;
 
   const {
-    zoomIn, zoomOut, fitView, transform, minZoom, maxZoom, nodesDraggable, nodesConnectable, elementsSelectable
+    zoomIn,
+    zoomOut,
+    fitView,
+    transform,
+    minZoom,
+    maxZoom,
+    nodesDraggable,
+    nodesConnectable,
+    elementsSelectable
   } = useStore();
 
   $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
@@ -45,7 +53,7 @@
     elementsSelectable.set(isInteractive);
   };
 </script>
- 
+
 <Panel class="svelte-flow__controls" {position} data-testid="svelte-flow__controls">
   {#if showZoom}
     <ControlButton
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index b8749ef8..4dee7680 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -12,12 +12,12 @@
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
   import MinimapNode from './MinimapNode.svelte';
-  import interactive from './interactive'
+  import interactive from './interactive';
   import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
 
   type $$Props = MiniMapProps;
 
-  let position: $$Props['position']  = 'bottom-right';
+  let position: $$Props['position'] = 'bottom-right';
   let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
   let style: $$Props['style'] = '';
   let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
@@ -32,7 +32,7 @@
   let width: $$Props['width'] = undefined;
   let height: $$Props['height'] = undefined;
   let pannable: $$Props['pannable'] = true;
-  let zoomable: $$Props['zoomable'] = true;  
+  let zoomable: $$Props['zoomable'] = true;
   let inversePan: $$Props['inversePan'] = undefined;
   let zoomStep: $$Props['zoomStep'] = undefined;
 
@@ -41,8 +41,16 @@
 
   const defaultWidth = 200;
   const defaultHeight = 150;
-  const { nodes, transform, width: containerWidth, height: containerHeight, flowId, panZoom, translateExtent } = useStore();
-  
+  const {
+    nodes,
+    transform,
+    width: containerWidth,
+    height: containerHeight,
+    flowId,
+    panZoom,
+    translateExtent
+  } = useStore();
+
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
@@ -56,8 +64,7 @@
     width: $containerWidth / $transform[2],
     height: $containerHeight / $transform[2]
   };
-  $: boundingRect =
-    $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
+  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
   $: elementWidth = width ?? defaultWidth;
   $: elementHeight = height ?? defaultHeight;
   $: scaledWidth = boundingRect.width / elementWidth;
@@ -97,7 +104,7 @@
         inversePan,
         zoomStep,
         pannable,
-        zoomable,
+        zoomable
       }}
     >
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
@@ -122,9 +129,9 @@
       {/each}
       <path
         class="svelte-flow__minimap-mask"
-        d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${
-          -viewboxWidth - offset * 2
-        }z
+        d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${
+          viewboxHeight + offset * 2
+        }h${-viewboxWidth - offset * 2}z
       M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
         fill={maskColor}
         fill-rule="evenodd"
diff --git a/packages/svelte/src/routes/+layout.svelte b/packages/svelte/src/routes/+layout.svelte
index bc95f151..f319ea27 100644
--- a/packages/svelte/src/routes/+layout.svelte
+++ b/packages/svelte/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Header } from '../example-components/Header'
+  import { Header } from '../example-components/Header';
 </script>
 
 <div class="app">
@@ -19,4 +19,4 @@
   .flow {
     flex: 1;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
index cd410537..45db2228 100644
--- a/packages/svelte/src/routes/+page.svelte
+++ b/packages/svelte/src/routes/+page.svelte
@@ -1 +1 @@
-<div>this redirects to /overview</div>
\ No newline at end of file
+<div>this redirects to /overview</div>
diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte
index 7c3f5b86..d5f468bc 100644
--- a/packages/svelte/src/routes/customnode/+page.svelte
+++ b/packages/svelte/src/routes/customnode/+page.svelte
@@ -6,8 +6,10 @@
     Background,
     BackgroundVariant,
     MiniMap,
+    Position,
+    type Node,
     type NodeTypes,
-    Position
+    type Edge
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
 
@@ -15,8 +17,8 @@
     colorNode: CustomNode
   };
 
-  const bgColor = writable('#1A192B')
-  
+  const bgColor = writable('#1A192B');
+
   const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     nodes.update((nds) =>
       nds.map((node) => {
@@ -32,75 +34,69 @@
           ...node,
           data: {
             ...node.data,
-            color,
-          },
+            color
+          }
         };
       })
     );
   };
 
-  const nodes = writable([
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'An input node' },
-    position: { x: 0, y: 50 },
-    sourcePosition: Position.Right,
-  },
-  {
-    id: '2',
-    type: 'colorNode',
-    data: { onChange: onChange, color: $bgColor },
-    style: 'border: 1px solid #777; padding: 10px',
-    position: { x: 250, y: 50 },
-  },
-  {
-    id: '3',
-    type: 'output',
-    data: { label: 'Output A' },
-    position: { x: 650, y: 25 },
-    targetPosition: Position.Left,
-  },
-  {
-    id: '4',
-    type: 'output',
-    data: { label: 'Output B' },
-    position: { x: 650, y: 120 },
-    targetPosition: Position.Left,
-  },
+  const nodes = writable<Node[]>([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'An input node' },
+      position: { x: 0, y: 50 },
+      sourcePosition: Position.Right
+    },
+    {
+      id: '2',
+      type: 'colorNode',
+      data: { onChange: onChange, color: $bgColor },
+      style: 'border: 1px solid #777; padding: 10px',
+      position: { x: 250, y: 50 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output A' },
+      position: { x: 650, y: 25 },
+      targetPosition: Position.Left
+    },
+    {
+      id: '4',
+      type: 'output',
+      data: { label: 'Output B' },
+      position: { x: 650, y: 120 },
+      targetPosition: Position.Left
+    }
   ]);
 
-  const edges = writable([
+  const edges = writable<Edge[]>([
     {
       id: 'e1-2',
       source: '1',
       target: '2',
-      animated: true,
+      animated: true
     },
     {
       id: 'e2a-3',
       source: '2',
       sourceHandle: 'a',
       target: '3',
-      animated: true,
+      animated: true
     },
     {
       id: 'e2b-4',
       source: '2',
       sourceHandle: 'b',
       target: '4',
-      animated: true,
-    },
+      animated: true
+    }
   ]);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  {nodeTypes}
-  style="--bgcolor: {$bgColor}"
-  fitView
->
+<SvelteFlow {nodes} {edges} {nodeTypes} style="--bgcolor: {$bgColor}" fitView>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
diff --git a/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
index 1a771743..fb835834 100644
--- a/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
+++ b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
@@ -2,7 +2,7 @@
   import { Position } from '@xyflow/system';
   import { Handle } from '../../../lib/index';
 
-  export let data: { color: string, onChange: () => void } = { color: '#111', onChange: () => {} };
+  export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
   export let xPos: number = 0;
   export let yPos: number = 0;
 </script>
@@ -12,10 +12,5 @@
   Custom Color Picker Node: <strong>{data.color}</strong>
 </div>
 <input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
-<Handle
-  type="source"
-  position={Position.Right}
-  id="a"
-  style="top: 10px;"
-/>
-<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;"  />
+<Handle type="source" position={Position.Right} id="a" style="top: 10px;" />
+<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
diff --git a/packages/svelte/src/routes/drag-n-drop/Flow.svelte b/packages/svelte/src/routes/drag-n-drop/Flow.svelte
index 341f506f..7545e254 100644
--- a/packages/svelte/src/routes/drag-n-drop/Flow.svelte
+++ b/packages/svelte/src/routes/drag-n-drop/Flow.svelte
@@ -10,28 +10,26 @@
   } from '../../lib/index';
   import Sidebar from './Sidebar.svelte';
 
-  const nodes = writable(
-    [
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'Input Node' },
-        position: { x: 150, y: 5 }
-      },
-      {
-        id: '2',
-        type: 'default',
-        data: { label: 'Node' },
-        position: { x: 0, y: 150 }
-      },
-      {
-        id: '3',
-        type: 'output',
-        data: { label: 'Output Node' },
-        position: { x: 300, y: 150 }
-      }
-    ]
-  );
+  const nodes = writable([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input Node' },
+      position: { x: 150, y: 5 }
+    },
+    {
+      id: '2',
+      type: 'default',
+      data: { label: 'Node' },
+      position: { x: 0, y: 150 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output Node' },
+      position: { x: 300, y: 150 }
+    }
+  ]);
 
   const edges = writable([
     {
@@ -54,7 +52,7 @@
   const onDragOver = (event: DragEvent) => {
     event.preventDefault();
 
-    console.log(event)
+    console.log(event);
 
     if (event.dataTransfer) {
       event.dataTransfer.dropEffect = 'move';
@@ -71,27 +69,21 @@
     const type = event.dataTransfer.getData('application/svelteflow');
     const position = svelteFlow.project({
       x: event.clientX,
-      y: event.clientY - 40,
+      y: event.clientY - 40
     });
     const newNode: Node = {
       id: `${Math.random()}`,
       type,
       position,
-      data: { label: `${type} node` },
+      data: { label: `${type} node` }
     };
 
-    svelteFlow.nodes.update(nds => nds.concat(newNode));
+    svelteFlow.nodes.update((nds) => nds.concat(newNode));
   };
 </script>
 
 <main>
-  <SvelteFlow
-    {nodes}
-    {edges}
-    fitView
-    on:dragover={onDragOver}
-    on:drop={onDrop}
-  >
+  <SvelteFlow {nodes} {edges} fitView on:dragover={onDragOver} on:drop={onDrop}>
     <Controls />
     <Background variant={BackgroundVariant.Dots} />
     <MiniMap />
@@ -104,4 +96,4 @@
     height: 100%;
     display: flex;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/routes/drag-n-drop/Sidebar.svelte b/packages/svelte/src/routes/drag-n-drop/Sidebar.svelte
index 532cfbed..5e3dabba 100644
--- a/packages/svelte/src/routes/drag-n-drop/Sidebar.svelte
+++ b/packages/svelte/src/routes/drag-n-drop/Sidebar.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import {
-    useSvelteFlow
-  } from '../../lib/index';
+  import { useSvelteFlow } from '../../lib/index';
 
   const onDragStart = (event: DragEvent, nodeType: string) => {
     if (!event.dataTransfer) {
@@ -17,7 +15,11 @@
 
 <aside>
   <div class="label">You can drag these nodes to the pane on the left.</div>
-  <div class="input-node node" on:dragstart={(event) => onDragStart(event, 'input')} draggable={true}>
+  <div
+    class="input-node node"
+    on:dragstart={(event) => onDragStart(event, 'input')}
+    draggable={true}
+  >
     Input Node
   </div>
   <div
@@ -38,7 +40,7 @@
 
 <style>
   .label {
-    margin: 0.5rem 0 .25rem 0;
+    margin: 0.5rem 0 0.25rem 0;
   }
 
   aside {
@@ -51,9 +53,9 @@
   .node {
     margin-bottom: 0.5rem;
     border: 1px solid #111;
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
     font-weight: 700;
     border-radius: 3px;
     cursor: grab;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/routes/edges/+page.svelte b/packages/svelte/src/routes/edges/+page.svelte
index 9879188e..00460956 100644
--- a/packages/svelte/src/routes/edges/+page.svelte
+++ b/packages/svelte/src/routes/edges/+page.svelte
@@ -13,7 +13,7 @@
       id: '1',
       type: 'input',
       data: { label: 'Input 1' },
-      position: { x: 250, y: 0 },
+      position: { x: 250, y: 0 }
     },
     { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
     { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -26,26 +26,26 @@
       id: '6',
       type: 'output',
       data: { label: 'Output 6' },
-      position: { x: 50, y: 550 },
+      position: { x: 50, y: 550 }
     },
     {
       id: '7',
       type: 'output',
       data: { label: 'Output 7' },
-      position: { x: 250, y: 550 },
+      position: { x: 250, y: 550 }
     },
     {
       id: '8',
       type: 'output',
       data: { label: 'Output 8' },
-      position: { x: 525, y: 600 },
+      position: { x: 525, y: 600 }
     },
     {
       id: '9',
       type: 'output',
       data: { label: 'Output 9' },
-      position: { x: 675, y: 500 },
-    },
+      position: { x: 675, y: 500 }
+    }
   ]);
 
   const edges = writable([
@@ -53,21 +53,21 @@
       id: 'e1-2',
       source: '1',
       target: '2',
-      label: 'bezier edge (default)',
+      label: 'bezier edge (default)'
     },
     {
       id: 'e2-2a',
       source: '2',
       target: '2a',
       type: 'smoothstep',
-      label: 'smoothstep edge',
+      label: 'smoothstep edge'
     },
     {
       id: 'e2a-2b',
       source: '2a',
       target: '2b',
       type: 'simplebezier',
-      label: 'simple bezier edge',
+      label: 'simple bezier edge'
     },
     { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
     {
@@ -75,7 +75,7 @@
       source: '3',
       target: '4',
       type: 'straight',
-      label: 'straight edge',
+      label: 'straight edge'
     },
     {
       id: 'e3-3a',
@@ -83,7 +83,7 @@
       target: '3a',
       type: 'straight',
       label: 'label only edge',
-      style: 'stroke: none',
+      style: 'stroke: none'
     },
     {
       id: 'e3-5',
@@ -91,7 +91,7 @@
       target: '5',
       animated: true,
       label: 'animated styled edge',
-      style: 'stroke: red',
+      style: 'stroke: red'
     },
     {
       id: 'e5-7',
@@ -100,20 +100,20 @@
       label: 'label with styled bg',
       labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
       markerEnd: {
-        type: MarkerType.ArrowClosed,
-      },
+        type: MarkerType.ArrowClosed
+      }
     },
     {
       id: 'e5-8',
       source: '5',
       target: '8',
-      data: { text: 'custom edge' },
+      data: { text: 'custom edge' }
     },
     {
       id: 'e5-9',
       source: '5',
       target: '9',
-      data: { text: 'custom edge 2' },
+      data: { text: 'custom edge 2' }
     },
     {
       id: 'e5-6',
@@ -128,7 +128,7 @@
         markerUnits: 'userSpaceOnUse',
         width: 20,
         height: 20,
-        strokeWidth: 2,
+        strokeWidth: 2
       },
       markerStart: {
         type: MarkerType.ArrowClosed,
@@ -136,17 +136,13 @@
         orient: 'auto-start-reverse',
         markerUnits: 'userSpaceOnUse',
         width: 20,
-        height: 20,
-      },
-    },
+        height: 20
+      }
+    }
   ]);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  fitView
->
+<SvelteFlow {nodes} {edges} fitView>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
diff --git a/packages/svelte/src/routes/interaction/+page.svelte b/packages/svelte/src/routes/interaction/+page.svelte
index c5d956e5..9eb872d7 100644
--- a/packages/svelte/src/routes/interaction/+page.svelte
+++ b/packages/svelte/src/routes/interaction/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Panel,
@@ -7,7 +7,7 @@
     MiniMap,
     type OnMoveEnd,
     type Node,
-    type Edge,
+    type Edge
   } from '../../lib/index';
 
   const nodes = writable([
@@ -15,16 +15,16 @@
       id: '1',
       type: 'input',
       data: { label: 'Node 1' },
-      position: { x: 250, y: 5 },
+      position: { x: 250, y: 5 }
     },
     { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
     { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
   ]);
 
   const edges = writable([
     { id: 'e1-2', source: '1', target: '2', animated: true },
-    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e1-3', source: '1', target: '3' }
   ]);
 
   const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
@@ -36,7 +36,6 @@
   const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
   const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
 
-
   let isSelectable = false;
   let isDraggable = false;
   let isConnectable = false;
@@ -57,13 +56,13 @@
   elementsSelectable={isSelectable}
   nodesConnectable={isConnectable}
   nodesDraggable={isDraggable}
-  zoomOnScroll={zoomOnScroll}
-  zoomOnPinch={zoomOnPinch}
-  panOnScroll={panOnScroll}
-  panOnScrollMode={panOnScrollMode}
-  zoomOnDoubleClick={zoomOnDoubleClick}
-  panOnDrag={panOnDrag}
-  onMoveEnd={onMoveEnd}
+  {zoomOnScroll}
+  {zoomOnPinch}
+  {panOnScroll}
+  {panOnScrollMode}
+  {zoomOnDoubleClick}
+  {panOnDrag}
+  {onMoveEnd}
 >
   <MiniMap />
   <Controls />
@@ -141,7 +140,9 @@
         <select
           id="panonscrollmode"
           bind:value={panOnScrollMode}
-          on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
+          on:change={(event) => {
+            panOnScrollMode = PanOnScrollMode.Free;
+          }}
           class="react-flow__panonscrollmode"
         >
           <option value="free">free</option>
diff --git a/packages/svelte/src/routes/overview/+page.svelte b/packages/svelte/src/routes/overview/+page.svelte
index dbaa81dd..17a2c9b0 100644
--- a/packages/svelte/src/routes/overview/+page.svelte
+++ b/packages/svelte/src/routes/overview/+page.svelte
@@ -34,14 +34,14 @@
       type: 'default',
       data: { label: 'Node' },
       position: { x: 0, y: 150 },
-      selectable: false,
+      selectable: false
     },
     {
       id: 'A',
       type: 'default',
       data: { label: 'Styled with class' },
       class: 'custom-style',
-      position: { x: 150, y: 150 },
+      position: { x: 150, y: 150 }
     },
     {
       id: 'D',
@@ -90,25 +90,27 @@
       id: '2-4',
       type: 'custom',
       source: '2',
-      target: '4',
+      target: '4'
     }
   ]);
 
   function updateNode() {
-    nodes.update(nds => nds.map(n => {
-      if (n.id === '1') {
-        return {
-          ...n,
-          position: { x: n.position.x + 20, y: n.position.y }
+    nodes.update((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
+          return {
+            ...n,
+            position: { x: n.position.x + 20, y: n.position.y }
+          };
         }
-      }
 
-      return n;
-    }));
+        return n;
+      })
+    );
   }
 
   $: {
-    console.log('nodes changed', $nodes)
+    console.log('nodes changed', $nodes);
   }
 </script>
 
@@ -124,14 +126,17 @@
   initialViewport={{ x: 100, y: 100, zoom: 2 }}
   snapGrid={[25, 25]}
   on:node:click={(event) => console.log('on node click', event)}
-  on:node:mouseenter={(event) => console.log('on node enter', event)} 
+  on:node:mouseenter={(event) => console.log('on node enter', event)}
   on:node:mouseleave={(event) => console.log('on node leave', event)}
   on:edge:click={(event) => console.log('edge click', event)}
   on:connect:start={(event) => console.log('on connect start', event)}
   on:connect={(event) => console.log('on connect', event)}
   on:connect:end={(event) => console.log('on connect end', event)}
   on:pane:click={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
+  on:pane:contextmenu={(event) => {
+    event.preventDefault();
+    console.log('on pane contextmenu', event);
+  }}
 >
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
diff --git a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte b/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
index 1a881428..0c41b892 100644
--- a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
+++ b/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
@@ -17,7 +17,7 @@
   const svelteFlow = useSvelteFlow();
 
   function onClick() {
-    svelteFlow.edges.update(eds => eds.filter(e => e.id !== $$props.id));
+    svelteFlow.edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
   }
 </script>
 
@@ -29,11 +29,10 @@
     class="edge-button"
     on:click={onClick}
   >
-  ✕
+    ✕
   </button>
 </EdgeLabelRenderer>
 
-
 <style>
   .edge-button {
     border-radius: 50%;
@@ -49,8 +48,8 @@
     cursor: pointer;
     background-color: #eee;
   }
-  
+
   .edge-button:hover {
-    box-shadow: 0 0 2px 1px rgba(0,0,0,0.12);
+    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/routes/stress/+page.svelte b/packages/svelte/src/routes/stress/+page.svelte
index 036540e1..83f46af1 100644
--- a/packages/svelte/src/routes/stress/+page.svelte
+++ b/packages/svelte/src/routes/stress/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
@@ -26,7 +26,7 @@
         id,
         data,
         position,
-        type: 'default',
+        type: 'default'
       };
       nodeItems.push(node);
 
@@ -34,7 +34,7 @@
         const edge = {
           id: `${source.id}-${id}`,
           source: source.id,
-          target: id,
+          target: id
         };
         edgeItems.push(edge);
       }
@@ -47,12 +47,7 @@
   const edges = writable(edgeItems);
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  fitView
-  minZoom={0.2}
->
+<SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
diff --git a/packages/svelte/src/routes/subflows/+page.svelte b/packages/svelte/src/routes/subflows/+page.svelte
index 440c6289..1cef9da2 100644
--- a/packages/svelte/src/routes/subflows/+page.svelte
+++ b/packages/svelte/src/routes/subflows/+page.svelte
@@ -1,31 +1,32 @@
 <script lang="ts">
-    import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
     type NodeTypes,
+    type Node
   } from '../../lib/index';
   import { DebugNode } from './DebugNode';
-  
+
   const nodeTypes: NodeTypes = {
-    default: DebugNode,
+    default: DebugNode
   };
 
-  const nodes = writable([
+  const nodes = writable<Node[]>([
     {
       id: '1',
       type: 'input',
       data: { label: 'Node 1' },
       position: { x: 250, y: 5 },
-      origin: [0.5, 0.5],
+      origin: [0.5, 0.5]
     },
     {
       id: '4',
       data: { label: 'Node 4' },
       position: { x: 100, y: 200 },
-      style: "width:500px; height:300px;"
+      style: 'width:500px; height:300px;'
     },
     {
       id: '4a',
@@ -34,96 +35,89 @@
       parentNode: '4',
       extent: [
         [0, 0],
-        [100, 100],
-      ],
+        [100, 100]
+      ]
     },
     {
       id: '4b',
       data: { label: 'Node 4b' },
       position: { x: 100, y: 60 },
-      style: "width: 300px; height: 200px;",
-      parentNode: '4',
+      style: 'width: 300px; height: 200px;',
+      parentNode: '4'
     },
     {
       id: '4b1',
       data: { label: 'Node 4b1' },
       position: { x: 40, y: 20 },
-      parentNode: '4b',
+      parentNode: '4b'
     },
     {
       id: '4b2',
       data: { label: 'Node 4b2' },
       position: { x: 20, y: 100 },
-      parentNode: '4b',
+      parentNode: '4b'
     },
     {
       id: '5',
       type: 'group',
       data: { label: 'Node 5' },
       position: { x: 650, y: 250 },
-      style: "width: 400px; height: 150px",
-      zIndex: 1000,
+      style: 'width: 400px; height: 150px',
+      zIndex: 1000
     },
     {
       id: '5a',
       data: { label: 'Node 5a' },
       position: { x: 0, y: 0 },
       parentNode: '5',
-      extent: 'parent',
+      extent: 'parent'
     },
     {
       id: '5b',
       data: { label: 'Node 5b' },
       position: { x: 225, y: 50 },
       parentNode: '5',
-      expandParent: true,
+      expandParent: true
     },
     {
       id: '2',
       data: { label: 'Node 2' },
-      position: { x: 100, y: 100 },
+      position: { x: 100, y: 100 }
     },
     {
       id: '3',
       data: { label: 'Node 3' },
-      position: { x: 400, y: 100 },
+      position: { x: 400, y: 100 }
     }
   ]);
 
   const edges = writable([
     {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-    // markerEnd: {
-    //   type: MarkerType.Arrow,
-    //   strokeWidth: 2,
-    //   width: 15,
-    //   height: 15,
-    //   color: '#f00',
-    // },
-  },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
-  { id: 'e3-4b', source: '3', target: '4b' },
-  { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
-  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+      id: 'e1-2',
+      source: '1',
+      target: '2'
+      // markerEnd: {
+      //   type: MarkerType.Arrow,
+      //   strokeWidth: 2,
+      //   width: 15,
+      //   height: 15,
+      //   color: '#f00',
+      // },
+    },
+    { id: 'e1-3', source: '1', target: '3' },
+    { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+    { id: 'e3-4b', source: '3', target: '4b' },
+    { id: 'e4a-4b1', source: '4a', target: '4b1' },
+    { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+    { id: 'e4b1-4b2', source: '4b1', target: '4b2' }
   ]);
 
   $: {
-    console.log($nodes)
+    console.log($nodes);
   }
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
-  {nodeTypes}
-  fitView
-  minZoom={0.1}
-  maxZoom={2.5}
->
+<SvelteFlow {nodes} {edges} {nodeTypes} fitView minZoom={0.1} maxZoom={2.5}>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
@@ -131,6 +125,6 @@
 
 <style>
   :global(.svelte-flow .svelte-flow__node.parent) {
-    background-color: rgba(220,220,255,0.4)
+    background-color: rgba(220, 220, 255, 0.4);
   }
 </style>
diff --git a/packages/svelte/src/routes/usesvelteflow/Flow.svelte b/packages/svelte/src/routes/usesvelteflow/Flow.svelte
index c0e70bf2..c89d3b2e 100644
--- a/packages/svelte/src/routes/usesvelteflow/Flow.svelte
+++ b/packages/svelte/src/routes/usesvelteflow/Flow.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
-    Controls,
-    Background,
-    BackgroundVariant,
-    MiniMap,
-  } from '../../lib/index';
+  import SvelteFlow, { Controls, Background, BackgroundVariant, MiniMap } from '../../lib/index';
   import Sidebar from './Sidebar.svelte';
 
   const nodes = writable([
@@ -47,11 +42,7 @@
 </script>
 
 <main>
-  <SvelteFlow
-    {nodes}
-    {edges}
-    fitView
-  >
+  <SvelteFlow {nodes} {edges} fitView>
     <Controls />
     <Background variant={BackgroundVariant.Dots} />
     <MiniMap />
@@ -64,4 +55,4 @@
     height: 100%;
     display: flex;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte/src/routes/usesvelteflow/Sidebar.svelte b/packages/svelte/src/routes/usesvelteflow/Sidebar.svelte
index de82de39..0ba728aa 100644
--- a/packages/svelte/src/routes/usesvelteflow/Sidebar.svelte
+++ b/packages/svelte/src/routes/usesvelteflow/Sidebar.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
-  import {
-    useSvelteFlow
-  } from '../../lib/index';
+  import { useSvelteFlow } from '../../lib/index';
 
-  const { zoomIn, zoomOut, setZoom, fitView, setCenter, setViewport, getViewport, viewport, nodes } = useSvelteFlow();
+  const {
+    zoomIn,
+    zoomOut,
+    setZoom,
+    fitView,
+    setCenter,
+    setViewport,
+    getViewport,
+    viewport,
+    nodes
+  } = useSvelteFlow();
 </script>
 
 <aside>
@@ -22,13 +30,15 @@
   {/each}
 
   <div class="label">Viewport:</div>
-  <div>x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}</div>
+  <div>
+    x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
+  </div>
 </aside>
 
 <style>
   .label {
     font-weight: 700;
-    margin: 0.5rem 0 .25rem 0;
+    margin: 0.5rem 0 0.25rem 0;
   }
 
   aside {
@@ -43,4 +53,4 @@
     margin-bottom: 0.5rem;
     font-size: 12px;
   }
-</style>
\ No newline at end of file
+</style>