chore(svelte): update readme

packages/svelte/README.md

@@ -6,18 +6,21 @@ A highly customizable Svelte component for building interactive graphs and node-
 
 If you want to check out the current version you need to run the following command from the root directory:
 
-1. `pnpm install` - installs dependencies
+1. `pnpm install` - install dependencies
 2. `pnpm build` - needs to be done once
 3. `pnpm dev` - starts dev server
 
 You can now access the examples under http://127.0.0.1:5173
 
-## A basic flow 
+## Getting started
+
+We are working on a new website and everything so there are no docs for Svelte Flow yet. Everything is typed, so your IDE should help you a bit and you can also the [React Flow docs](https://reactflow.dev/docs) because the API is very similar. You can also check out the [Svelte Flow examples](/packages/svelte/src/routes) in this repo.
 
 A basic flow looks like this:
 
 ```svelte
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import SvelteFlow, {
     SvelteFlowProvider,
     Controls,
@@ -31,11 +34,14 @@ A basic flow looks like this:
   } from '../../lib/index';
   import { CustomNode } from './CustomNode';
 
+  // Svelte Flow is highly customizable, a node can be anything that fits in a div
   const nodeTypes: NodeTypes = {
     custom: CustomNode
   };
   
-  const nodes = createNodes([
+  // We are using writables for the nodes to sync them easily. When a user drags a node for example, Svelte Flow updates its position.
+  // This also makes it easier to update nodes in user land.
+  const nodes = writable([
     {
       id: '1',
       type: 'input',
@@ -48,9 +54,10 @@ A basic flow looks like this:
       data: { label: 'Node' },
       position: { x: 0, y: 150 }
     }
-  ], { style: 'width: 125px;' });
+  ]);
 
-  const edges = createEdges([
+  // same for edges
+  const edges = writable([
     {
       id: '1-2',
       type: 'default',
@@ -58,22 +65,21 @@ A basic flow looks like this:
       target: '2',
       label: 'Edge Text'
     }
-  ], { animated: true });
+  ]);
+
+  const snapGrid = [25, 25];
 </script>
 
-<SvelteFlowProvider
+<SvelteFlow
   {nodes}
   {edges}
+  {nodeTypes}
+  fitView
+  snapGrid={snapGrid}
+  on:node:click={(event) => console.log('on node click', event)}
 >
-  <SvelteFlow
+  <Controls />
-    {nodeTypes}
+  <Background variant={BackgroundVariant.Dots} />
-    fitView
+  <MiniMap />
-    snapGrid={[25, 25]}
+</SvelteFlow>
-    on:node:click={(event) => console.log('on node click', event)}
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-    <MiniMap />
-  </SvelteFlow>
-</SvelteFlowProvider>
 ```