refactor(svelte): simplify nodes and edges store handling

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -1,22 +1,9 @@
 <script lang="ts">
-  import { onDestroy, setContext } from 'svelte';
+  import { onDestroy } from 'svelte';
   
-  import { createStore, key } from '$lib/store';
-  import type { SvelteFlowProviderProps } from './types';
-
-  type $$Props = SvelteFlowProviderProps;
-
-  export let nodes: $$Props['nodes'];
-  export let edges: $$Props['edges'];
-
-  const store = createStore({
-    nodes,
-    edges,
-  });
-
-  setContext(key, {
-    getStore: () => store
-  });
+  import { createStoreContext } from '$lib/store';
+  
+  const store = createStoreContext();
 
   onDestroy(() => {
     store.reset();

packages/svelte/src/lib/components/SvelteFlowProvider/index.ts

@@ -1,2 +1 @@
 export { default as SvelteFlowProvider } from './SvelteFlowProvider.svelte';
-export type { SvelteFlowProviderProps } from './types';

packages/svelte/src/lib/components/SvelteFlowProvider/types.ts

@@ -1,9 +0,0 @@
-import type { Writable } from 'svelte/store';
-
-import type { Edge } from '$lib/types';
-import type { createNodes } from '$lib/utils';
-
-export type SvelteFlowProviderProps = {
-  nodes: ReturnType<typeof createNodes>;
-  edges: Writable<Edge[]>;
-};

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, hasContext } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode, type CoordinateExtent, type Viewport } from '@xyflow/system';
+  import { PanOnScrollMode, type Viewport } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -13,13 +13,15 @@
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
   import { Attribution } from '$lib/components/Attribution';
-  import { useStore } from '$lib/store';
+  import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import type { EdgeTypes, NodeTypes } from '$lib/types';
+  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
 
   type $$Props = SvelteFlowProps;
 
   export let id = '1';
+  export let nodes: $$Props['nodes'];
+  export let edges: $$Props['edges'];
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
@@ -53,10 +55,10 @@
   export let style: $$Props['style'] = undefined;
   let className: $$Props['class'] = undefined;
   export { className as class };
+
   let domNode: HTMLDivElement;
-  
-  $: flowId = id;
-  const store = useStore();
+
+  const store = hasContext(key) ? useStore() : createStoreContext();
 
   onMount(() => {
     const { width, height } = domNode.getBoundingClientRect();
@@ -64,13 +66,19 @@
     store.height.set(height);
     store.domNode.set(domNode);
 
-    updateStore({
+    store.syncNodeStores(nodes)
+    store.syncEdgeStores(edges)
+
+    if (fitView !== undefined) {
+      store.fitViewOnInit.set(fitView);
+    }
+
+    updateStore(store, {
       nodeTypes,
       edgeTypes,
       minZoom,
       maxZoom,
       translateExtent,
-      fitView
     });
 
     return () => {
@@ -78,70 +86,32 @@
     }
   });
 
+  // this updates the store for simple changes 
+  // where the prop names equals the store name
   $: {
-    const updatableProps = {
-      flowId,
+    const updatableProps: UpdatableStoreProps = {
+      flowId: id,
       connectionLineType,
       connectionRadius,
       selectionMode,
       snapGrid,
-      isValidConnection,
       defaultMarkerColor,
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
+      isValidConnection,
     };
 
-    Object.keys(updatableProps).forEach(prop => {
-      // @ts-ignore
-      if (updatableProps[prop] !== undefined) {
-        // @ts-ignore
-        store[prop].set(updatableProps[prop]);
-      }
-    })
+   updateStoreByKeys(store, updatableProps);
   }
 
-  function updateStore({ nodeTypes, edgeTypes, minZoom, maxZoom, translateExtent, fitView }: {
-    nodeTypes?: NodeTypes,
-    edgeTypes?: EdgeTypes,
-    minZoom?: number,
-    maxZoom?: number,
-    translateExtent?: CoordinateExtent,
-    fitView?: boolean
-  }) {
-    if (nodeTypes !== undefined) {
-     store.setNodeTypes(nodeTypes);
-    }
-
-    if (edgeTypes !== undefined) {
-      store.setEdgeTypes(edgeTypes);
-    }
-
-    if (minZoom !== undefined) {
-      store.setMinZoom(minZoom);
-    }
-
-    if (maxZoom !== undefined) {
-      store.setMaxZoom(maxZoom);
-    }
-
-    if (translateExtent !== undefined) {
-      store.setTranslateExtent(translateExtent)
-    }
-
-    if (fitView !== undefined) {
-      store.fitViewOnInit.set(fitView);
-    }
-  }
-
-  $: updateStore({
+  $: updateStore(store, {
     nodeTypes,
     edgeTypes,
     minZoom,
     maxZoom,
-    translateExtent,
-    fitView
-  })
+    translateExtent
+  });
 </script>
 
 <div

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -16,9 +16,12 @@ import type {
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
+import type { Writable } from 'svelte/store';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   id?: string;
+  nodes: Writable<Node[]>;
+  edges: Writable<Edge[]>;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   selectionKey?: KeyDefinition;

packages/svelte/src/lib/container/SvelteFlow/utils.ts

@@ -0,0 +1,71 @@
+import type { SvelteFlowStore } from '$lib/store/types';
+import type { EdgeTypes, NodeTypes } from '$lib/types';
+import type { CoordinateExtent } from '@xyflow/system';
+import type { Writable } from 'svelte/store';
+
+// this is helper function for updating the store
+// for props where we need to call a specific store action
+export function updateStore(
+  store: SvelteFlowStore,
+  {
+    nodeTypes,
+    edgeTypes,
+    minZoom,
+    maxZoom,
+    translateExtent
+  }: {
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
+    minZoom?: number;
+    maxZoom?: number;
+    translateExtent?: CoordinateExtent;
+  }
+) {
+  if (nodeTypes !== undefined) {
+    store.setNodeTypes(nodeTypes);
+  }
+
+  if (edgeTypes !== undefined) {
+    store.setEdgeTypes(edgeTypes);
+  }
+
+  if (minZoom !== undefined) {
+    store.setMinZoom(minZoom);
+  }
+
+  if (maxZoom !== undefined) {
+    store.setMaxZoom(maxZoom);
+  }
+
+  if (translateExtent !== undefined) {
+    store.setTranslateExtent(translateExtent);
+  }
+}
+
+const getKeys = <T extends object>(obj: T) => Object.keys(obj) as Array<keyof T>;
+
+type UnwrapWritable<T> = T extends Writable<infer U> ? U : T;
+
+// @todo there must be a better way to define the types here..
+export type UpdatableStoreProps = {
+  flowId?: UnwrapWritable<SvelteFlowStore['flowId']>;
+  connectionLineType?: UnwrapWritable<SvelteFlowStore['connectionLineType']>;
+  connectionRadius?: UnwrapWritable<SvelteFlowStore['connectionRadius']>;
+  selectionMode?: UnwrapWritable<SvelteFlowStore['selectionMode']>;
+  snapGrid?: UnwrapWritable<SvelteFlowStore['snapGrid']>;
+  defaultMarkerColor?: UnwrapWritable<SvelteFlowStore['defaultMarkerColor']>;
+  nodesDraggable?: UnwrapWritable<SvelteFlowStore['nodesDraggable']>;
+  nodesConnectable?: UnwrapWritable<SvelteFlowStore['nodesConnectable']>;
+  elementsSelectable?: UnwrapWritable<SvelteFlowStore['elementsSelectable']>;
+  isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
+};
+
+export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
+  getKeys(keys).forEach((prop) => {
+    const update = keys[prop];
+    if (update !== undefined) {
+      // @ts-ignore
+      store[prop].set(update);
+    }
+  });
+}

packages/svelte/src/lib/store/index.ts

@@ -1,4 +1,4 @@
-import { getContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { derived, get } from 'svelte/store';
 import {
   internalsSymbol,
@@ -25,19 +25,15 @@ import {
   initConnectionData,
   initialEdgeTypes,
   initialNodeTypes,
-  initialStoreState
+  getInitialStore
 } from './initial-store';
 import type { SvelteFlowStore } from './types';
+import { syncNodeStores, syncEdgeStores } from './utils';
 
 export const key = Symbol();
 
-type CreateStoreParams = Pick<SvelteFlowStore, 'nodes' | 'edges'>;
-
-export function createStore(params: CreateStoreParams): SvelteFlowStore {
-  const store = {
-    ...initialStoreState,
-    ...params
-  };
+export function createStore(): SvelteFlowStore {
+  const store = getInitialStore();
 
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
@@ -55,6 +51,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
 
   function addEdge(edgeParams: Edge | Connection) {
     const edges = get(store.edges);
+
     store.edges.set(addEdgeUtil(edgeParams, edges));
   }
 
@@ -348,6 +345,8 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     ),
 
     // actions
+    syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
+    syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
     setNodeTypes,
     setEdgeTypes,
     addEdge,
@@ -380,3 +379,13 @@ export function useStore(): SvelteFlowStore {
 
   return store.getStore();
 }
+
+export function createStoreContext() {
+  const store = createStore();
+
+  setContext(key, {
+    getStore: () => store
+  });
+
+  return store;
+}

packages/svelte/src/lib/store/initial-store.ts

@@ -20,7 +20,8 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Edge, Node } from '$lib/types';
+import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
+import { createNodes, createEdges } from './utils';
 
 export const initConnectionData = {
   connectionStartHandle: null,
@@ -42,10 +43,10 @@ export const initialEdgeTypes = {
   step: StepEdge
 };
 
-export const initialStoreState = {
+export const getInitialStore = () => ({
   flowId: writable<string | null>(null),
-  nodes: writable<Node[]>([]),
-  edges: writable<Edge[]>([]),
+  nodes: createNodes([]),
+  edges: createEdges([]),
   edgesLayouted: readable<EdgeLayouted[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
@@ -82,4 +83,4 @@ export const initialStoreState = {
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7'),
   lib: readable<string>('svelte')
-};
+});

packages/svelte/src/lib/store/types.ts

@@ -9,10 +9,12 @@ import type {
   UpdateConnection
 } from '@xyflow/system';
 
-import type { initialStoreState } from './initial-store';
+import type { getInitialStore } from './initial-store';
 import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';
 
 export type SvelteFlowStoreActions = {
+  syncNodeStores: (nodesStore: Writable<Node[]>) => void;
+  syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
   setNodeTypes: (nodeTypes: NodeTypes) => void;
   setEdgeTypes: (edgeTypes: EdgeTypes) => void;
   addEdge: (edge: Edge | Connection) => void;
@@ -33,9 +35,6 @@ export type SvelteFlowStoreActions = {
   reset(): void;
 };
 
-export type SvelteFlowStoreState = typeof initialStoreState & {
-  nodes: Writable<Node[]>;
-  edges: Writable<Edge[]>;
-};
+export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
 
 export type SvelteFlowStore = SvelteFlowStoreState & SvelteFlowStoreActions;

packages/svelte/src/lib/store/utils.ts

@@ -0,0 +1,188 @@
+import {
+  writable,
+  type Unsubscriber,
+  type Subscriber,
+  type Updater,
+  type Writable,
+  get
+} from 'svelte/store';
+import {
+  isNumeric,
+  getNodePositionWithOrigin,
+  internalsSymbol,
+  type XYZPosition
+} from '@xyflow/system';
+
+import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
+
+export function syncNodeStores(
+  nodesStore: ReturnType<typeof createNodes>,
+  userNodesStore: Writable<Node[]>
+) {
+  const nodesStoreSetter = nodesStore.set;
+  const userNodesStoreSetter = userNodesStore.set;
+
+  let val = get(userNodesStore);
+  nodesStore.set(val);
+
+  const _set = (nds: Node[]) => {
+    const updatedNodes = nodesStoreSetter(nds);
+    val = updatedNodes;
+
+    userNodesStoreSetter(val);
+
+    return updatedNodes;
+  };
+
+  nodesStore.set = userNodesStore.set = _set;
+  nodesStore.update = userNodesStore.update = (fn: (nds: Node[]) => Node[]) => _set(fn(val));
+}
+
+export function syncEdgeStores(
+  edgesStore: ReturnType<typeof createEdges>,
+  userEdgesStore: Writable<Edge[]>
+) {
+  const nodesStoreSetter = edgesStore.set;
+  const userEdgesStoreSetter = userEdgesStore.set;
+
+  let val = get(userEdgesStore);
+  edgesStore.set(val);
+
+  const _set = (eds: Edge[]) => {
+    nodesStoreSetter(eds);
+    userEdgesStoreSetter(eds);
+    val = eds;
+  };
+
+  edgesStore.set = userEdgesStore.set = _set;
+  edgesStore.update = userEdgesStore.update = (fn: (nds: Edge[]) => Edge[]) => _set(fn(val));
+}
+
+export const createNodes = (
+  nodes: Node[]
+): {
+  subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
+  update: (this: void, updater: Updater<Node[]>) => void;
+  set: (this: void, value: Node[]) => Node[];
+  setDefaultOptions: (opts: DefaultNodeOptions) => void;
+} => {
+  const { subscribe, set, update } = writable<Node[]>([]);
+  let value = nodes;
+  let defaults = {};
+
+  const _set = (nds: Node[]): Node[] => {
+    const parentNodes: Record<string, boolean> = {};
+
+    const nextNodes = nds.map((n) => {
+      const node: Node = { ...defaults, ...n, positionAbsolute: n.position };
+      const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1 : 0);
+
+      if (node.parentNode) {
+        parentNodes[node.parentNode] = true;
+      }
+
+      Object.defineProperty(node, internalsSymbol, {
+        value: {
+          handleBounds: node?.[internalsSymbol]?.handleBounds,
+          z
+        }
+      });
+
+      return node;
+    });
+
+    const nodesWithPositions = nextNodes.map((node) => {
+      if (node.parentNode && !parentNodes[node.parentNode]) {
+        throw new Error(`Parent node ${node.parentNode} not found`);
+      }
+
+      if (node.parentNode || parentNodes?.[node.id]) {
+        const { x, y, z } = calculateXYZPosition(node, nextNodes, {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0
+        });
+
+        node.positionAbsolute = {
+          x,
+          y
+        };
+
+        node[internalsSymbol]!.z = z;
+
+        if (parentNodes?.[node.id]) {
+          node[internalsSymbol]!.isParent = true;
+        }
+      }
+
+      return node;
+    });
+
+    value = nodesWithPositions;
+
+    set(value);
+
+    return value;
+  };
+
+  const _update: typeof update = (fn: (nds: Node[]) => Node[]) => _set(fn(value));
+
+  const setDefaultOptions = (options: DefaultNodeOptions) => {
+    defaults = options;
+  };
+
+  _set(value);
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update,
+    setDefaultOptions
+  };
+};
+
+export const createEdges = (
+  edges: Edge[],
+  defaultOptions?: DefaultEdgeOptions
+): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
+  const { subscribe, set, update } = writable<Edge[]>([]);
+  let value = edges;
+  let defaults = defaultOptions || {};
+
+  const _set: typeof set = (eds: Edge[]) => {
+    const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
+    value = nextEdges;
+    set(value);
+  };
+
+  const _update: typeof update = (fn: (eds: Edge[]) => Edge[]) => _set(fn(value));
+
+  const setDefaultOptions = (options: DefaultEdgeOptions) => {
+    defaults = options;
+  };
+
+  _set(value);
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update,
+    setDefaultOptions
+  };
+};
+
+function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition): XYZPosition {
+  if (!node.parentNode) {
+    return result;
+  }
+  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin);
+
+  return calculateXYZPosition(parentNode, nodes, {
+    x: (result.x ?? 0) + parentNodePosition.x,
+    y: (result.y ?? 0) + parentNodePosition.y,
+    z:
+      (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0)
+        ? parentNode[internalsSymbol]?.z ?? 0
+        : result.z ?? 0
+  });
+}

packages/svelte/src/lib/utils/index.ts

@@ -1,4 +1,3 @@
-import { writable, type Writable } from 'svelte/store';
 import {
   isNodeBase,
   isEdgeBase,
@@ -6,14 +5,10 @@ import {
   getOutgoersBase,
   getIncomersBase,
   updateEdgeBase,
-  getConnectedEdgesBase,
-  isNumeric,
-  getNodePositionWithOrigin,
-  internalsSymbol,
-  type XYZPosition
+  getConnectedEdgesBase
 } from '@xyflow/system';
 
-import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
+import type { Edge, Node } from '$lib/types';
 
 export const isNode = isNodeBase<Node, Edge>;
 export const isEdge = isEdgeBase<Node, Edge>;
@@ -22,126 +17,3 @@ export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;
 export const updateEdge = updateEdgeBase<Edge>;
 export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
-
-export const createNodes = (
-  nodes: Node[],
-  defaultOptions?: DefaultNodeOptions
-): Writable<Node[]> & { setDefaultOptions: (opts: DefaultNodeOptions) => void } => {
-  const { subscribe, set, update } = writable<Node[]>([]);
-  let value = nodes;
-  let defaults = defaultOptions || {};
-
-  const _set: typeof set = (nds: Node[]) => {
-    const parentNodes: Record<string, boolean> = {};
-
-    const nextNodes = nds.map((n) => {
-      const node: Node = { ...defaults, ...n, positionAbsolute: n.position };
-      const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1 : 0);
-
-      if (node.parentNode) {
-        parentNodes[node.parentNode] = true;
-      }
-
-      Object.defineProperty(node, internalsSymbol, {
-        value: {
-          handleBounds: node?.[internalsSymbol]?.handleBounds,
-          z
-        }
-      });
-
-      return node;
-    });
-
-    const nodesWithPositions = nextNodes.map((node) => {
-      if (node.parentNode && !parentNodes[node.parentNode]) {
-        throw new Error(`Parent node ${node.parentNode} not found`);
-      }
-
-      if (node.parentNode || parentNodes?.[node.id]) {
-        const { x, y, z } = calculateXYZPosition(node, nextNodes, {
-          ...node.position,
-          z: node[internalsSymbol]?.z ?? 0
-        });
-
-        node.positionAbsolute = {
-          x,
-          y
-        };
-
-        node[internalsSymbol]!.z = z;
-
-        if (parentNodes?.[node.id]) {
-          node[internalsSymbol]!.isParent = true;
-        }
-      }
-
-      return node;
-    });
-
-    value = nodesWithPositions;
-
-    set(value);
-  };
-
-  const _update: typeof update = (fn: (nds: Node[]) => Node[]) => _set(fn(value));
-
-  const setDefaultOptions = (options: DefaultNodeOptions) => {
-    defaults = options;
-  };
-
-  _set(value);
-
-  return {
-    subscribe,
-    set: _set,
-    update: _update,
-    setDefaultOptions
-  };
-};
-
-export const createEdges = (
-  edges: Edge[],
-  defaultOptions?: DefaultEdgeOptions
-): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
-  const { subscribe, set, update } = writable<Edge[]>([]);
-  let value = edges;
-  let defaults = defaultOptions || {};
-
-  const _set: typeof set = (eds: Edge[]) => {
-    const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
-    value = nextEdges;
-    set(value);
-  };
-
-  const _update: typeof update = (fn: (eds: Edge[]) => Edge[]) => _set(fn(value));
-
-  const setDefaultOptions = (options: DefaultEdgeOptions) => {
-    defaults = options;
-  };
-
-  _set(value);
-
-  return {
-    subscribe,
-    set: _set,
-    update: _update,
-    setDefaultOptions
-  };
-};
-
-function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition): XYZPosition {
-  if (!node.parentNode) {
-    return result;
-  }
-  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
-  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin);
-
-  return calculateXYZPosition(parentNode, nodes, {
-    x: (result.x ?? 0) + parentNodePosition.x,
-    y: (result.y ?? 0) + parentNodePosition.y,
-    z:
-      (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0)
-        ? parentNode[internalsSymbol]?.z ?? 0
-        : result.z ?? 0
-  });
-}

packages/svelte/src/routes/customnode/+page.svelte

@@ -2,13 +2,10 @@
   import type { ChangeEventHandler } from 'svelte/elements';
   import { writable } from 'svelte/store';
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
-    createNodes,
-    createEdges,
     type NodeTypes,
     Position
   } from '../../lib/index';
@@ -23,7 +20,7 @@
   const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     nodes.update((nds) =>
       nds.map((node) => {
-        if (node.id !== '2') {
+        if (node.type !== 'colorNode') {
           return node;
         }
 
@@ -42,7 +39,7 @@
     );
   };
 
-  const nodes = createNodes([
+  const nodes = writable([
   {
     id: '1',
     type: 'input',
@@ -73,7 +70,7 @@
   },
   ]);
 
-  const edges = createEdges([
+  const edges = writable([
     {
       id: 'e1-2',
       source: '1',
@@ -94,23 +91,20 @@
       target: '4',
       animated: true,
     },
-  ], { animated: true });
+  ]);
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  {nodeTypes}
+  style="--bgcolor: {$bgColor}"
+  fitView
 >
-  <SvelteFlow
-    {nodeTypes}
-    style="--bgcolor: {$bgColor}"
-    fitView
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+</SvelteFlow>
 
 <style>
   :global(.svelte-flow) {

packages/svelte/src/routes/drag-n-drop/+page.svelte

@@ -1,52 +1,9 @@
 <script lang="ts">
-  import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
+  import { SvelteFlowProvider } from '../../lib/index';
 
   import Flow from './Flow.svelte';
-  
-  const nodes = createNodes(
-    [
-      {
-        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 }
-      }
-    ],
-    { origin: [0.5, 0.5] }
-  );
-
-  const edges = createEdges([
-    {
-      id: '1-2',
-      type: 'default',
-      source: '1',
-      target: '2',
-      label: 'Edge Text'
-    },
-    {
-      id: '1-3',
-      type: 'smoothstep',
-      source: '1',
-      target: '3'
-    }
-  ]);
 </script>
 
-<SvelteFlowProvider
-  {nodes}
-  {edges}
->
+<SvelteFlowProvider>
   <Flow />
 </SvelteFlowProvider>

packages/svelte/src/routes/drag-n-drop/Flow.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
@@ -9,6 +10,45 @@
   } 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 edges = writable([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    },
+    {
+      id: '1-3',
+      type: 'smoothstep',
+      source: '1',
+      target: '3'
+    }
+  ]);
+
   const svelteFlow = useSvelteFlow();
 
   const onDragOver = (event: DragEvent) => {
@@ -46,6 +86,8 @@
 
 <main>
   <SvelteFlow
+    {nodes}
+    {edges}
     fitView
     on:dragover={onDragOver}
     on:drop={onDrop}

packages/svelte/src/routes/edges/+page.svelte

@@ -1,163 +1,153 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
-    createNodes,
-    createEdges,
-    type NodeTypes,
     MarkerType
   } from '../../lib/index';
 
-  const nodes = createNodes([
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'Input 1' },
-    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 } },
-  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
-  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
-  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
-  {
-    id: '6',
-    type: 'output',
-    data: { label: 'Output 6' },
-    position: { x: 50, y: 550 },
-  },
-  {
-    id: '7',
-    type: 'output',
-    data: { label: 'Output 7' },
-    position: { x: 250, y: 550 },
-  },
-  {
-    id: '8',
-    type: 'output',
-    data: { label: 'Output 8' },
-    position: { x: 525, y: 600 },
-  },
-  {
-    id: '9',
-    type: 'output',
-    data: { label: 'Output 9' },
-    position: { x: 675, y: 500 },
-  },
-]);
+  const nodes = writable([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input 1' },
+      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 } },
+    { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
+    { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+    { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+    { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+    { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+    {
+      id: '6',
+      type: 'output',
+      data: { label: 'Output 6' },
+      position: { x: 50, y: 550 },
+    },
+    {
+      id: '7',
+      type: 'output',
+      data: { label: 'Output 7' },
+      position: { x: 250, y: 550 },
+    },
+    {
+      id: '8',
+      type: 'output',
+      data: { label: 'Output 8' },
+      position: { x: 525, y: 600 },
+    },
+    {
+      id: '9',
+      type: 'output',
+      data: { label: 'Output 9' },
+      position: { x: 675, y: 500 },
+    },
+  ]);
 
-  const edges = createEdges([
-  {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-    label: 'bezier edge (default)',
-  },
-  {
-    id: 'e2-2a',
-    source: '2',
-    target: '2a',
-    type: 'smoothstep',
-    label: 'smoothstep edge',
-  },
-  {
-    id: 'e2a-2b',
-    source: '2a',
-    target: '2b',
-    type: 'simplebezier',
-    label: 'simple bezier edge',
-  },
-  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
-  {
-    id: 'e3-4',
-    source: '3',
-    target: '4',
-    type: 'straight',
-    label: 'straight edge',
-  },
-  {
-    id: 'e3-3a',
-    source: '3',
-    target: '3a',
-    type: 'straight',
-    label: 'label only edge',
-    style: 'stroke: none',
-  },
-  {
-    id: 'e3-5',
-    source: '4',
-    target: '5',
-    animated: true,
-    label: 'animated styled edge',
-    style: 'stroke: red',
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with styled bg',
-    labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
+  const edges = writable([
+    {
+      id: 'e1-2',
+      source: '1',
+      target: '2',
+      label: 'bezier edge (default)',
     },
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    data: { text: 'custom edge' },
-  },
-  {
-    id: 'e5-9',
-    source: '5',
-    target: '9',
-    data: { text: 'custom edge 2' },
-  },
-  {
-    id: 'e5-6',
-    source: '5',
-    target: '6',
-    label: 'hi',
-    labelStyle: 'background: red; font-weight: 700; padding: 5px;',
-    style: 'stroke: #ffcc0',
-    markerEnd: {
-      type: MarkerType.Arrow,
-      color: '#FFCC00',
-      markerUnits: 'userSpaceOnUse',
-      width: 20,
-      height: 20,
-      strokeWidth: 2,
+    {
+      id: 'e2-2a',
+      source: '2',
+      target: '2a',
+      type: 'smoothstep',
+      label: 'smoothstep edge',
     },
-    markerStart: {
-      type: MarkerType.ArrowClosed,
-      color: '#FFCC00',
-      orient: 'auto-start-reverse',
-      markerUnits: 'userSpaceOnUse',
-      width: 20,
-      height: 20,
+    {
+      id: 'e2a-2b',
+      source: '2a',
+      target: '2b',
+      type: 'simplebezier',
+      label: 'simple bezier edge',
     },
-  },
-]);
+    { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+    {
+      id: 'e3-4',
+      source: '3',
+      target: '4',
+      type: 'straight',
+      label: 'straight edge',
+    },
+    {
+      id: 'e3-3a',
+      source: '3',
+      target: '3a',
+      type: 'straight',
+      label: 'label only edge',
+      style: 'stroke: none',
+    },
+    {
+      id: 'e3-5',
+      source: '4',
+      target: '5',
+      animated: true,
+      label: 'animated styled edge',
+      style: 'stroke: red',
+    },
+    {
+      id: 'e5-7',
+      source: '5',
+      target: '7',
+      label: 'label with styled bg',
+      labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+      },
+    },
+    {
+      id: 'e5-8',
+      source: '5',
+      target: '8',
+      data: { text: 'custom edge' },
+    },
+    {
+      id: 'e5-9',
+      source: '5',
+      target: '9',
+      data: { text: 'custom edge 2' },
+    },
+    {
+      id: 'e5-6',
+      source: '5',
+      target: '6',
+      label: 'hi',
+      labelStyle: 'background: red; font-weight: 700; padding: 5px;',
+      style: 'stroke: #ffcc0',
+      markerEnd: {
+        type: MarkerType.Arrow,
+        color: '#FFCC00',
+        markerUnits: 'userSpaceOnUse',
+        width: 20,
+        height: 20,
+        strokeWidth: 2,
+      },
+      markerStart: {
+        type: MarkerType.ArrowClosed,
+        color: '#FFCC00',
+        orient: 'auto-start-reverse',
+        markerUnits: 'userSpaceOnUse',
+        width: 20,
+        height: 20,
+      },
+    },
+  ]);
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  fitView
 >
-  <SvelteFlow
-    fitView
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-  </SvelteFlow>
-</SvelteFlowProvider>
-
-<style>
-
-</style>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+</SvelteFlow>

packages/svelte/src/routes/interaction/+page.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
+    import { writable } from 'svelte/store';
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Panel,
-    createNodes,
-    createEdges,
     PanOnScrollMode,
     MiniMap,
     type OnMoveEnd,
@@ -12,7 +10,7 @@
     type Edge,
   } from '../../lib/index';
 
-  const nodes = createNodes([
+  const nodes = writable([
     {
       id: '1',
       type: 'input',
@@ -24,7 +22,7 @@
     { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   ]);
 
-  const edges = createEdges([
+  const edges = writable([
     { id: 'e1-2', source: '1', target: '2', animated: true },
     { id: 'e1-3', source: '1', target: '3' },
   ]);
@@ -53,163 +51,159 @@
   let captureElementClick = false;
 </script>
 
-
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  elementsSelectable={isSelectable}
+  nodesConnectable={isConnectable}
+  nodesDraggable={isDraggable}
+  zoomOnScroll={zoomOnScroll}
+  zoomOnPinch={zoomOnPinch}
+  panOnScroll={panOnScroll}
+  panOnScrollMode={panOnScrollMode}
+  zoomOnDoubleClick={zoomOnDoubleClick}
+  panOnDrag={panOnDrag}
+  onMoveEnd={onMoveEnd}
 >
-  <SvelteFlow
-    elementsSelectable={isSelectable}
-    nodesConnectable={isConnectable}
-    nodesDraggable={isDraggable}
-    zoomOnScroll={zoomOnScroll}
-    zoomOnPinch={zoomOnPinch}
-    panOnScroll={panOnScroll}
-    panOnScrollMode={panOnScrollMode}
-    zoomOnDoubleClick={zoomOnDoubleClick}
-    panOnDrag={panOnDrag}
-    onMoveEnd={onMoveEnd}
-  >
-    <MiniMap />
-    <Controls />
+  <MiniMap />
+  <Controls />
 
-    <Panel position="top-right">
-      <div>
-        <label for="draggable">
-          nodesDraggable
-          <input
-            id="draggable"
-            type="checkbox"
-            bind:checked={isDraggable}
-            class="react-flow__draggable"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="connectable">
-          nodesConnectable
-          <input
-            id="connectable"
-            type="checkbox"
-            bind:checked={isConnectable}
-            class="react-flow__connectable"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="selectable">
-          elementsSelectable
-          <input
-            id="selectable"
-            type="checkbox"
-            bind:checked={isSelectable}
-            class="react-flow__selectable"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="zoomonscroll">
-          zoomOnScroll
-          <input
-            id="zoomonscroll"
-            type="checkbox"
-            bind:checked={zoomOnScroll}
-            class="react-flow__zoomonscroll"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="zoomonpinch">
-          zoomOnPinch
-          <input
-            id="zoomonpinch"
-            type="checkbox"
-            bind:checked={zoomOnPinch}
-            class="react-flow__zoomonpinch"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="panonscroll">
-          panOnScroll
-          <input
-            id="panonscroll"
-            type="checkbox"
-            bind:checked={panOnScroll}
-            class="react-flow__panonscroll"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="panonscrollmode">
-          panOnScrollMode
-          <select
-            id="panonscrollmode"
-            bind:value={panOnScrollMode}
-            on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
-            class="react-flow__panonscrollmode"
-          >
-            <option value="free">free</option>
-            <option value="horizontal">horizontal</option>
-            <option value="vertical">vertical</option>
-          </select>
-        </label>
-      </div>
-      <div>
-        <label for="zoomondbl">
-          zoomOnDoubleClick
-          <input
-            id="zoomondbl"
-            type="checkbox"
-            bind:checked={zoomOnDoubleClick}
-            class="react-flow__zoomondbl"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="panondrag">
-          panOnDrag
-          <input
-            id="panondrag"
-            type="checkbox"
-            bind:checked={panOnDrag}
-            class="react-flow__panondrag"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="capturezoompaneclick">
-          capture onPaneClick
-          <input
-            id="capturezoompaneclick"
-            type="checkbox"
-            bind:checked={captureZoomClick}
-            class="react-flow__capturezoompaneclick"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="capturezoompanescroll">
-          capture onPaneScroll
-          <input
-            id="capturezoompanescroll"
-            type="checkbox"
-            bind:checked={captureZoomScroll}
-            class="react-flow__capturezoompanescroll"
-          />
-        </label>
-      </div>
-      <div>
-        <label for="captureelementclick">
-          capture onElementClick
-          <input
-            id="captureelementclick"
-            type="checkbox"
-            bind:checked={captureElementClick}
-            class="react-flow__captureelementclick"
-          />
-        </label>
-      </div>
-    </Panel>
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Panel position="top-right">
+    <div>
+      <label for="draggable">
+        nodesDraggable
+        <input
+          id="draggable"
+          type="checkbox"
+          bind:checked={isDraggable}
+          class="react-flow__draggable"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="connectable">
+        nodesConnectable
+        <input
+          id="connectable"
+          type="checkbox"
+          bind:checked={isConnectable}
+          class="react-flow__connectable"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="selectable">
+        elementsSelectable
+        <input
+          id="selectable"
+          type="checkbox"
+          bind:checked={isSelectable}
+          class="react-flow__selectable"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="zoomonscroll">
+        zoomOnScroll
+        <input
+          id="zoomonscroll"
+          type="checkbox"
+          bind:checked={zoomOnScroll}
+          class="react-flow__zoomonscroll"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="zoomonpinch">
+        zoomOnPinch
+        <input
+          id="zoomonpinch"
+          type="checkbox"
+          bind:checked={zoomOnPinch}
+          class="react-flow__zoomonpinch"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="panonscroll">
+        panOnScroll
+        <input
+          id="panonscroll"
+          type="checkbox"
+          bind:checked={panOnScroll}
+          class="react-flow__panonscroll"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="panonscrollmode">
+        panOnScrollMode
+        <select
+          id="panonscrollmode"
+          bind:value={panOnScrollMode}
+          on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
+          class="react-flow__panonscrollmode"
+        >
+          <option value="free">free</option>
+          <option value="horizontal">horizontal</option>
+          <option value="vertical">vertical</option>
+        </select>
+      </label>
+    </div>
+    <div>
+      <label for="zoomondbl">
+        zoomOnDoubleClick
+        <input
+          id="zoomondbl"
+          type="checkbox"
+          bind:checked={zoomOnDoubleClick}
+          class="react-flow__zoomondbl"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="panondrag">
+        panOnDrag
+        <input
+          id="panondrag"
+          type="checkbox"
+          bind:checked={panOnDrag}
+          class="react-flow__panondrag"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="capturezoompaneclick">
+        capture onPaneClick
+        <input
+          id="capturezoompaneclick"
+          type="checkbox"
+          bind:checked={captureZoomClick}
+          class="react-flow__capturezoompaneclick"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="capturezoompanescroll">
+        capture onPaneScroll
+        <input
+          id="capturezoompanescroll"
+          type="checkbox"
+          bind:checked={captureZoomScroll}
+          class="react-flow__capturezoompanescroll"
+        />
+      </label>
+    </div>
+    <div>
+      <label for="captureelementclick">
+        capture onElementClick
+        <input
+          id="captureelementclick"
+          type="checkbox"
+          bind:checked={captureElementClick}
+          class="react-flow__captureelementclick"
+        />
+      </label>
+    </div>
+  </Panel>
+</SvelteFlow>

packages/svelte/src/routes/overview/+page.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
     Panel,
-    createNodes,
-    createEdges,
-    type NodeTypes,
     SelectionMode,
+    type NodeTypes,
     type EdgeTypes
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
@@ -23,7 +22,7 @@
     custom: CustomEdge
   };
 
-  const nodes = createNodes([
+  const nodes = writable([
     {
       id: '1',
       type: 'input',
@@ -70,9 +69,9 @@
       data: { label: 'Custom Node' },
       position: { x: 150, y: 300 }
     }
-  ], { style: 'width: 125px;' });
+  ]);
 
-  const edges = createEdges([
+  const edges = writable([
     {
       id: '1-2',
       type: 'default',
@@ -93,7 +92,7 @@
       source: '2',
       target: '4',
     }
-  ], { animated: true });
+  ]);
 
   function updateNode() {
     nodes.update(nds => nds.map(n => {
@@ -113,37 +112,34 @@
   }
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  {nodeTypes}
+  {edgeTypes}
+  fitView
+  minZoom={0.1}
+  maxZoom={2.5}
+  selectionMode={SelectionMode.Full}
+  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: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); }}
 >
-  <SvelteFlow
-    {nodeTypes}
-    {edgeTypes}
-    fitView
-    minZoom={0.1}
-    maxZoom={2.5}
-    selectionMode={SelectionMode.Full}
-    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: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); }}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-    <Panel position="top-right">
-      <button on:click={updateNode}>update node pos</button>
-    </Panel>
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+  <Panel position="top-right">
+    <button on:click={updateNode}>update node pos</button>
+  </Panel>
+</SvelteFlow>
 
 <style>
   :global(.svelte-flow .custom-style) {

packages/svelte/src/routes/stress/+page.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
+    import { writable } from 'svelte/store';
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
-    createNodes,
-    createEdges,
     type Node,
     type Edge
   } from '../../lib/index';
@@ -45,20 +43,17 @@
     }
   }
 
-  const nodes = createNodes(nodeItems);
-  const edges = createEdges(edgeItems, { animated: true });
+  const nodes = writable(nodeItems);
+  const edges = writable(edgeItems);
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  fitView
+  minZoom={0.2}
 >
-  <SvelteFlow
-    fitView
-    minZoom={0.2}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+</SvelteFlow>

packages/svelte/src/routes/subflows/+page.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
+    import { writable } from 'svelte/store';
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
     MiniMap,
-    createNodes,
-    createEdges,
     type NodeTypes,
   } from '../../lib/index';
   import { DebugNode } from './DebugNode';
@@ -15,7 +13,7 @@
     default: DebugNode,
   };
 
-  const nodes = createNodes([
+  const nodes = writable([
     {
       id: '1',
       type: 'input',
@@ -92,7 +90,7 @@
     }
   ]);
 
-  const edges = createEdges([
+  const edges = writable([
     {
     id: 'e1-2',
     source: '1',
@@ -111,28 +109,25 @@
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
   { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  ], { animated: true });
+  ]);
 
   $: {
     console.log($nodes)
   }
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  {nodeTypes}
+  fitView
+  minZoom={0.1}
+  maxZoom={2.5}
 >
-  <SvelteFlow
-    {nodeTypes}
-    fitView
-    minZoom={0.1}
-    maxZoom={2.5}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+  <MiniMap />
+</SvelteFlow>
 
 <style>
   :global(.svelte-flow .svelte-flow__node.parent) {

packages/svelte/src/routes/usesvelteflow/+page.svelte

@@ -1,52 +1,9 @@
 <script lang="ts">
-  import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
+  import { SvelteFlowProvider } from '../../lib/index';
 
   import Flow from './Flow.svelte';
-  
-  const nodes = createNodes(
-    [
-      {
-        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 }
-      }
-    ],
-    { origin: [0.5, 0.5] }
-  );
-
-  const edges = createEdges([
-    {
-      id: '1-2',
-      type: 'default',
-      source: '1',
-      target: '2',
-      label: 'Edge Text'
-    },
-    {
-      id: '1-3',
-      type: 'smoothstep',
-      source: '1',
-      target: '3'
-    }
-  ]);
 </script>
 
-<SvelteFlowProvider
-  {nodes}
-  {edges}
->
+<SvelteFlowProvider>
   <Flow />
 </SvelteFlowProvider>

packages/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     Controls,
     Background,
@@ -6,10 +7,49 @@
     MiniMap,
   } 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 edges = writable([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    },
+    {
+      id: '1-3',
+      type: 'smoothstep',
+      source: '1',
+      target: '3'
+    }
+  ]);
 </script>
 
 <main>
   <SvelteFlow
+    {nodes}
+    {edges}
     fitView
   >
     <Controls />

packages/svelte/src/routes/validation/+page.svelte

@@ -1,44 +1,36 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import SvelteFlow, {
-    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
-    createNodes,
-    createEdges,
     type IsValidConnection
   } from '../../lib/index';
-  import { Position } from '@xyflow/system';
 
-  const nodes = createNodes([
+  const nodes = writable([
     { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },
     { id: 'A', type: 'default', position: { x: 250, y: 0 }, data: { label: 'A' } },
     { id: 'B', type: 'default', position: { x: 250, y: 150 }, data: { label: 'B' } },
     { id: 'C', type: 'default', position: { x: 250, y: 300 }, data: { label: 'C' } }
-  ], {
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left
-  });
+  ]);
 
-  const edges = createEdges([]);
+  const edges = writable([]);
 
-  const isValidConnection: IsValidConnection = (connection) => connection.target === 'B'
+  const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  fitView
+  minZoom={0.1}
+  maxZoom={2.5}
+  isValidConnection={isValidConnection}
 >
-  <SvelteFlow
-    fitView
-    minZoom={0.1}
-    maxZoom={2.5}
-    isValidConnection={isValidConnection}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-  </SvelteFlow>
-</SvelteFlowProvider>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+</SvelteFlow>
 
 <style>
   :global(.svelte-flow__handle.connecting) {