From 6d248a7ca52bc02bbc588b92f76d2290e58fdb70 Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Mon, 20 Mar 2023 18:20:32 +0100
Subject: [PATCH] chore(svelte): update readme

---
 packages/svelte/README.md | 91 +++++++++++++++++++++++++++++++--------
 1 file changed, 72 insertions(+), 19 deletions(-)

diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index 55fa0009..bb200bfd 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -1,26 +1,79 @@
 # SvelteFlow
 
-A highly customizable Svelte component for building interactive graphs and node-based editors.
+A highly customizable Svelte component for building interactive graphs and node-based editors. **This package is currently under heavy development and the API is very likely to change.**
 
-## Developing
+## Getting started
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+If you want to check out the current version you need to run the following command from the root directory:
 
-```bash
-npm run dev
+1. `pnpm install` - installs dependencies
+2. `pnpm build` - needs to be done once
+3. `pnpm dev` - starts dev server
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+You can now access the examples under http://127.0.0.1:5173
+
+## A basic flow 
+
+A basic flow looks like this:
+
+```svelte
+<script lang="ts">
+  import SvelteFlow, {
+    SvelteFlowProvider,
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    Panel,
+    createNodes,
+    createEdges,
+    type NodeTypes
+  } from '../../lib/index';
+  import { CustomNode } from './CustomNode';
+
+  const nodeTypes: NodeTypes = {
+    custom: CustomNode
+  };
+  
+  const nodes = createNodes([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input Node' },
+      position: { x: 0, y: 0 }
+    },
+    {
+      id: '2',
+      type: 'custom',
+      data: { label: 'Node' },
+      position: { x: 0, y: 150 }
+    }
+  ], { style: 'width: 125px;' });
+
+  const edges = createEdges([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    }
+  ], { animated: true });
+</script>
+
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
+  <SvelteFlow
+    {nodeTypes}
+    fitView
+    snapGrid={[25, 25]}
+    on:node:click={(event) => console.log('on node click', event)}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>
 ```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.