Align Svelte Flow and React Flow learn sections

apps/example-apps/react/learn/building-a-flow-2/App.jsx

@@ -12,6 +12,7 @@ const initialNodes = [
     id: 'n2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
+    type: 'output',
   },
 ];
 

apps/example-apps/react/learn/building-a-flow-3/App.jsx

@@ -12,6 +12,7 @@ const initialNodes = [
     id: 'n2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
+    type: 'output',
   },
 ];
 const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];

apps/example-apps/react/learn/building-a-flow-4/App.jsx

@@ -12,10 +12,11 @@ const initialNodes = [
     id: 'n2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
+    type: 'output',
   },
 ];
 const initialEdges = [
-  { id: 'n1-n2', source: 'n1', target: 'n2', label: 'connects with', type: 'step' },
+  { id: 'n1-n2', source: 'n1', target: 'n2', label: 'connects with', type: 'smoothstep' },
 ];
 
 function Flow() {

apps/example-apps/svelte/guides/built-in-components/background/App.svelte → apps/example-apps/svelte/learn/background/App.svelte

@@ -33,7 +33,7 @@
 <SvelteFlow bind:nodes bind:edges fitView colorMode="system">
   <Background {variant} />
   <Panel position="top-left">
-    <div>variant:</div>
+    <div style:color="var(--xy-node-color-default)">variant:</div>
     <button
       onclick={() => {
         variant = BackgroundVariant.Dots;

apps/example-apps/svelte/guides/concepts/Flow.svelte → apps/example-apps/svelte/learn/basic-terms/Flow.svelte

@@ -105,7 +105,7 @@
 >
   <Background patternColor="#aaa" gap={16} />
   <Panel position="bottom-left">
-    <div style:font-family="monospace">
+    <div class="viewport-logger">
       <div>x: {viewport.current.x.toFixed(2)}</div>
       <div>y: {viewport.current.y.toFixed(2)}</div>
       <div>zoom: {viewport.current.zoom.toFixed(2)}</div>

apps/example-apps/svelte/guides/concepts/index.css → apps/example-apps/svelte/learn/basic-terms/index.css

@@ -1,5 +1,3 @@
-@import url('./xy-theme.css');
-
 html,
 body {
   margin: 0;
@@ -198,3 +196,10 @@ input[type='number']::-webkit-inner-spin-button {
 .svelte-flow__minimap .annotation {
   display: none;
 }
+
+.viewport-logger {
+  font-family: monospace;
+  color: var(--xy-node-color-default);
+  padding: 5px;
+  border-radius: 3px;
+}

apps/example-apps/svelte/guides/getting-started/a/App.svelte → apps/example-apps/svelte/learn/building-a-flow-1/App.svelte

@@ -1,10 +1,11 @@
 <script>
-  import { SvelteFlow, Background } from '@xyflow/svelte';
+  import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
   import '@xyflow/svelte/dist/style.css';
 </script>
 
 <div style:width="100vw" style:height="100vh">
   <SvelteFlow colorMode="system">
     <Background />
+    <Controls />
   </SvelteFlow>
 </div>

apps/example-apps/svelte/learn/building-a-flow-1/index.css

@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  font-family: sans-serif;
+}

apps/example-apps/svelte/learn/building-a-flow-2/App.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  let nodes = $state.raw([
+    {
+      id: 'n1',
+      position: { x: 0, y: 0 },
+      data: { label: 'Node 1' },
+      type: 'input',
+    },
+    {
+      id: 'n2',
+      position: { x: 100, y: 100 },
+      data: { label: 'Node 2' },
+      type: 'output',
+    },
+  ]);
+</script>
+
+<div style:width="100vw" style:height="100vh">
+  <SvelteFlow bind:nodes colorMode="system" fitView>
+    <Background />
+    <Controls />
+  </SvelteFlow>
+</div>

apps/example-apps/svelte/learn/building-a-flow-2/index.css

@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  font-family: sans-serif;
+}

apps/example-apps/svelte/learn/building-a-flow-3/App.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  let nodes = $state.raw([
+    {
+      id: 'n1',
+      position: { x: 0, y: 0 },
+      data: { label: 'Node 1' },
+      type: 'input',
+    },
+    {
+      id: 'n2',
+      position: { x: 100, y: 100 },
+      data: { label: 'Node 2' },
+      type: 'output',
+    },
+  ]);
+
+  let edges = $state.raw([{ id: 'n1-n2', source: 'n1', target: 'n2' }]);
+</script>
+
+<div style:width="100vw" style:height="100vh">
+  <SvelteFlow bind:nodes bind:edges colorMode="system" fitView>
+    <Background />
+    <Controls />
+  </SvelteFlow>
+</div>

apps/example-apps/svelte/learn/building-a-flow-3/index.css

@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  font-family: sans-serif;
+}

apps/example-apps/svelte/guides/getting-started/d/App.svelte → apps/example-apps/svelte/learn/building-a-flow-4/App.svelte

@@ -1,29 +1,30 @@
 <script>
-  import { SvelteFlow, Background } from '@xyflow/svelte';
+  import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
   import '@xyflow/svelte/dist/style.css';
 
   let nodes = $state.raw([
     {
-      id: '1',
-      type: 'input',
+      id: 'n1',
       position: { x: 0, y: 0 },
-      data: { label: 'Hello' },
+      data: { label: 'Node 1' },
+      type: 'input',
     },
     {
-      id: '2',
-      type: 'output',
+      id: 'n2',
       position: { x: 100, y: 100 },
-      data: { label: 'World' },
+      data: { label: 'Node 2' },
+      type: 'output',
     },
   ]);
 
   let edges = $state.raw([
-    { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', label: 'to the' },
+    { id: 'n1-n2', source: 'n1', target: 'n2', type: 'smoothstep', label: 'connects with' },
   ]);
 </script>
 
 <div style:width="100vw" style:height="100vh">
   <SvelteFlow bind:nodes bind:edges fitView colorMode="system">
     <Background />
+    <Controls />
   </SvelteFlow>
 </div>

apps/example-apps/svelte/guides/getting-started/d/index.css → apps/example-apps/svelte/learn/building-a-flow-4/index.css

@@ -6,6 +6,5 @@ body {
 
 /* This is just here to better match the design of svelteflow.dev */
 .svelte-flow {
-  --xy-background-color: #f7f9fb;
   --xy-edge-label-background-color-default: #f7f9fb;
 }

apps/example-apps/svelte/guides/built-in-components/controls/App.svelte → apps/example-apps/svelte/learn/controls/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { SvelteFlow, Controls } from '@xyflow/svelte';
+  import { SvelteFlow, Controls, Background } from '@xyflow/svelte';
   import '@xyflow/svelte/dist/style.css';
 
   let nodes = $state.raw([
@@ -29,5 +29,6 @@
 </script>
 
 <SvelteFlow bind:nodes bind:edges fitView colorMode="system">
+  <Background />
   <Controls />
 </SvelteFlow>

apps/example-apps/svelte/guides/custom-edges-svg-path/index.css → apps/example-apps/svelte/learn/custom-edge-2/index.css

@@ -9,6 +9,5 @@ body,
 
 /* This is just here to better match the design of svelteflow.dev */
 .svelte-flow {
-  --xy-background-color: #f7f9fb;
   --xy-edge-label-background-color-default: #f7f9fb;
 }

apps/example-apps/svelte/guides/custom-edges/index.css → apps/example-apps/svelte/learn/custom-edge-path/index.css

@@ -9,6 +9,5 @@ body,
 
 /* This is just here to better match the design of svelteflow.dev */
 .svelte-flow {
-  --xy-background-color: #f7f9fb;
   --xy-edge-label-background-color-default: #f7f9fb;
 }

apps/example-apps/svelte/guides/custom-edges-button/index.css → apps/example-apps/svelte/learn/custom-edge/index.css

@@ -9,6 +9,5 @@ body,
 
 /* This is just here to better match the design of svelteflow.dev */
 .svelte-flow {
-  --xy-background-color: #f7f9fb;
   --xy-edge-label-background-color-default: #f7f9fb;
 }

apps/example-apps/svelte/learn/custom-node-2/App.svelte

@@ -0,0 +1,46 @@
+<script>
+  import { Background, SvelteFlow } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  import TextUpdaterNode from './TextUpdaterNode.svelte';
+
+  const nodeTypes = {
+    textUpdater: TextUpdaterNode,
+  };
+
+  const rfStyle = {
+    backgroundColor: '#B8CEFF',
+  };
+
+  let nodes = $state.raw([
+    {
+      id: 'node-1',
+      type: 'textUpdater',
+      position: { x: 100, y: 0 },
+      data: { value: 123 },
+    },
+    {
+      id: 'node-2',
+      type: 'output',
+      targetPosition: 'top',
+      position: { x: 0, y: 200 },
+      data: { label: 'node 2' },
+    },
+    {
+      id: 'node-3',
+      type: 'output',
+      targetPosition: 'top',
+      position: { x: 200, y: 200 },
+      data: { label: 'node 3' },
+    },
+  ]);
+
+  let edges = $state.raw([
+    { id: 'edge-1', source: 'node-1', target: 'node-2', sourceHandle: 'a' },
+    { id: 'edge-2', source: 'node-1', target: 'node-3', sourceHandle: 'b' },
+  ]);
+</script>
+
+<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView style={rfStyle} colorMode="system" >
+  <Background />
+</SvelteFlow>

apps/example-apps/svelte/learn/custom-node-2/TextUpdaterNode.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+
+  let { data }: NodeProps = $props();
+</script>
+
+<div class="text-updater-node">
+  <div>Custom Node</div>
+  <Handle type="target" position={Position.Top} />
+  <Handle type="source" position={Position.Bottom} id="a" style="left: 10px" />
+  <Handle type="source" position={Position.Bottom} id="b" />
+</div>
+
+<style>
+  .text-updater-node {
+    height: 50px;
+    border: 1px solid #eee;
+    padding: 5px;
+    border-radius: 5px;
+    background: var(--xy-node-background-color-default);
+  }
+
+  .text-updater-node label {
+    display: block;
+    color: var(--xy-node-color-default);
+    font-size: 12px;
+  }
+</style>

apps/example-apps/svelte/guides/getting-started/a/index.css → apps/example-apps/svelte/learn/custom-node-2/index.css

@@ -4,6 +4,7 @@ body {
   font-family: sans-serif;
 }
 
-.svelte-flow {
-  --xy-background-color: #f7f9fb;
+#app {
+  width: 100vw;
+  height: 100vh;
 }