diff --git a/apps/svelte-examples/package.json b/apps/svelte-examples/package.json
index 931f512d6..a8c22b317 100644
--- a/apps/svelte-examples/package.json
+++ b/apps/svelte-examples/package.json
@@ -34,12 +34,15 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.0.4",
+    "@threlte/core": "^6.1.0",
     "@types/dagre": "^0.7.48",
+    "@types/three": "^0.155.1",
     "@xyflow/svelte": "0.0.24",
     "@xyflow/system": "^0.0.8",
     "elkjs": "^0.8.2",
     "html-to-image": "^1.11.11",
     "svelte-feather-icons": "^4.0.1",
+    "three": "^0.158.0",
     "xy-tsconfig": "workspace:*"
   }
 }
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/+page.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/+page.svelte
new file mode 100644
index 000000000..b9031bc23
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
+
+  import './tailwind.css';
+  import '@xyflow/svelte/dist/style.css';
+
+  import { initialNodes, initialEdges } from './nodes-and-edges';
+  import ColorPickerNode from './ColorPickerNode.svelte';
+  import SliderNode from './SliderNode.svelte';
+  import ThrelteNode from './ThrelteNode.svelte';
+  import SwitcherNode from './SwitcherNode.svelte';
+
+  const nodes = writable<Node[]>(initialNodes);
+  const edges = writable<Edge[]>(initialEdges);
+
+  const nodeTypes = {
+    colorpicker: ColorPickerNode,
+    slider: SliderNode,
+    hero: ThrelteNode,
+    switcher: SwitcherNode
+  };
+</script>
+
+<div class="h-screen">
+  <SvelteFlow {nodes} {nodeTypes} {edges} fitView>
+    <Background />
+  </SvelteFlow>
+</div>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/ColorPickerNode.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ColorPickerNode.svelte
new file mode 100644
index 000000000..1e30710dd
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ColorPickerNode.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  let value = $flowState.color;
+  $: {
+    $flowState.color = value;
+  }
+</script>
+
+<NodeWrapper {label}>
+  <div class="flex items-center space-x-2">
+    <input bind:value class="nodrag border-md w-6 h-6" type="color" />
+    <p>{value}</p>
+  </div>
+  <Handle type="source" position={Position.Right} />
+</NodeWrapper>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/NodeWrapper.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/NodeWrapper.svelte
new file mode 100644
index 000000000..bd17bd696
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/NodeWrapper.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let label: string;
+</script>
+
+<div
+  class="flex flex-col border border-solid border-gray-200 h-full rounded-2xl bg-white/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]"
+>
+  <div
+    class="text-xs px-3 py-2 border-b border-solid border-gray-200 font-mono font-semibold rounded-t-2xl family-mono text-[#0F172A]"
+  >
+    {label}
+  </div>
+  <div
+    class="relative bg-white p-3 flex rounded-b-2xl family-sans font-light text-xs text-[#757575]"
+  >
+    <slot />
+  </div>
+</div>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/SliderNode.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/SliderNode.svelte
new file mode 100644
index 000000000..7009e6715
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/SliderNode.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  let value = $flowState.zoom;
+  $: {
+    $flowState.zoom = value;
+  }
+
+  const min = 0;
+  const max = 40;
+</script>
+
+<NodeWrapper {label}>
+  <Handle type="source" position={Position.Right} />
+  <input
+    class="nodrag accent-[#ff4000]"
+    style="direction: rtl;"
+    type="range"
+    {min}
+    {max}
+    bind:value
+  />
+</NodeWrapper>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/SwitcherNode.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/SwitcherNode.svelte
new file mode 100644
index 000000000..66e57e186
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/SwitcherNode.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  const options = ['cube', 'pyramid'];
+
+  let selectedShape = $flowState.shape;
+  $: {
+    $flowState.shape = selectedShape;
+  }
+</script>
+
+<NodeWrapper {label}>
+  <Handle type="source" position={Position.Right} />
+  <div class="flex flex-col nodrag">
+    {#each options as option}
+      <label class="flex">
+        <input
+          bind:group={selectedShape}
+          class="accent-[#ff4000]"
+          type="radio"
+          value={option}
+          checked={selectedShape === option}
+        />
+        <span class="ml-2">{option}</span>
+      </label>
+    {/each}
+  </div>
+</NodeWrapper>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteNode.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteNode.svelte
new file mode 100644
index 000000000..ff3047eca
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteNode.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Canvas } from '@threlte/core';
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+  import ThrelteScene from './ThrelteScene.svelte';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+</script>
+
+<NodeWrapper {label}>
+  <div class="w-full h-[200px]">
+    <Canvas dpr={2}>
+      <ThrelteScene {flowState} />
+    </Canvas>
+    <Handle type="target" position={Position.Left} style="top:20px;" id="color" />
+    <Handle type="target" position={Position.Left} style="top:40px;" id="shape" />
+    <Handle type="target" position={Position.Left} style="top:60px;" id="zoom" />
+  </div>
+</NodeWrapper>
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteScene.svelte b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteScene.svelte
new file mode 100644
index 000000000..34b382ee2
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteScene.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { T, useThrelte, useFrame } from '@threlte/core';
+  import type { FlowState } from './nodes-and-edges';
+  import type { Writable } from 'svelte/store';
+
+  export let flowState: Writable<FlowState>;
+  const { camera } = useThrelte();
+
+  const randomVector: (r: number) => [x: number, y: number, z: number] = (r: number) => [
+    r / 2 - Math.random() * r,
+    r / 2 - Math.random() * r,
+    r / 2 - Math.random() * r
+  ];
+
+  const randomEuler: () => [x: number, y: number, z: number] = () => [
+    Math.random() * Math.PI,
+    Math.random() * Math.PI,
+    Math.random() * Math.PI
+  ];
+
+  const NUMBER_OF_OBJECTS = 150;
+
+  const randomAssets = Array.from({ length: NUMBER_OF_OBJECTS }, (r: number = 10) => ({
+    random: Math.random(),
+    position: randomVector(r),
+    rotation: randomEuler()
+  }));
+
+  $: $camera.position.set(0, 0, +$flowState.zoom);
+
+  let t: number;
+  useFrame(({ clock }) => {
+    t = clock.getElapsedTime();
+  });
+</script>
+
+<T.PerspectiveCamera
+  makeDefault
+  on:create={({ ref }) => {
+    ref.lookAt(0, 0, 0);
+  }}
+/>
+
+<T.AmbientLight intensity={0.5} />
+<T.DirectionalLight intensity={3} position={[0, 0, 100]} />
+
+{#each randomAssets as asset}
+  <T.Mesh
+    position={asset.position}
+    rotation={[
+      asset.rotation[0] + Math.cos((t * asset.random) / 1.5) / 2,
+      asset.rotation[1] + Math.sin(t * asset.random) / 2,
+      asset.rotation[2] + Math.cos((t * asset.random) / 1.5) / 2
+    ]}
+  >
+    {#if $flowState.shape === 'cube'}
+      <T.BoxGeometry args={[1, 1, 1]} />
+    {:else if $flowState.shape === 'pyramid'}
+      <T.TetrahedronGeometry args={[1, 0]} />
+    {/if}
+    <T.MeshLambertMaterial color={$flowState.color} />
+  </T.Mesh>
+{/each}
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/nodes-and-edges.ts b/apps/svelte-examples/src/routes/examples/misc/hero-flow/nodes-and-edges.ts
new file mode 100644
index 000000000..22ae3817b
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/nodes-and-edges.ts
@@ -0,0 +1,91 @@
+import type { Node, Edge } from '@xyflow/svelte';
+import { writable, type Writable } from 'svelte/store';
+
+export type FlowState = {
+  color: string;
+  zoom: number;
+  shape: string;
+};
+
+const flowState = writable<FlowState>({
+  color: '#ff4000',
+  zoom: 17,
+  shape: 'cube'
+});
+
+export type NodeData = {
+  flowState: Writable<FlowState>;
+  label: string;
+};
+
+export const initialNodes: Node[] = [
+  {
+    id: 'hero',
+    type: 'hero',
+    position: { x: 390, y: 50 },
+    data: {
+      flowState,
+      label: 'output'
+    },
+    class: 'w-[200px] lg:w-[300px]'
+  },
+  {
+    id: 'color',
+    type: 'colorpicker',
+    position: { x: 50, y: 0 },
+    data: {
+      flowState,
+      label: 'shape color'
+    },
+    class: 'w-[150px]'
+  },
+  {
+    id: 'shape',
+    type: 'switcher',
+    position: { x: 0, y: 125 },
+    data: {
+      flowState,
+      label: 'shape type'
+    },
+    class: 'w-[150px]'
+  },
+  {
+    id: 'zoom',
+    type: 'slider',
+    position: { x: 40, y: 280 },
+    data: {
+      flowState,
+      label: 'zoom level'
+    },
+    class: 'w-[150px]'
+  }
+];
+
+const edgeStyle = 'stroke:#D2D2D2; stroke-width:2;';
+
+export const initialEdges: Edge[] = [
+  {
+    id: 'color->hero',
+    source: 'color',
+    target: 'hero',
+    targetHandle: 'color',
+    style: edgeStyle,
+    animated: true
+  },
+  {
+    id: 'shape->hero',
+    source: 'shape',
+    target: 'hero',
+    targetHandle: 'shape',
+    style: edgeStyle,
+    animated: true
+  },
+  {
+    id: 'zoom->hero',
+    source: 'zoom',
+    target: 'hero',
+    targetHandle: 'zoom',
+    style: edgeStyle,
+    animated: true
+  }
+];
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.config.js b/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.config.js
new file mode 100644
index 000000000..1eeabd8f0
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Needs to be important to override the default styles
+  important: true,
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};
diff --git a/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.css b/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d11ecaadd..fc2d7fe1f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -70,9 +70,15 @@ importers:
       '@dagrejs/dagre':
         specifier: ^1.0.4
         version: 1.0.4
+      '@threlte/core':
+        specifier: ^6.1.0
+        version: 6.1.0(svelte@4.2.1)(three@0.158.0)
       '@types/dagre':
         specifier: ^0.7.48
         version: 0.7.48
+      '@types/three':
+        specifier: ^0.155.1
+        version: 0.155.1
       '@xyflow/svelte':
         specifier: 0.0.24
         version: 0.0.24(svelte@4.2.1)
@@ -88,6 +94,9 @@ importers:
       svelte-feather-icons:
         specifier: ^4.0.1
         version: 4.0.1
+      three:
+        specifier: ^0.158.0
+        version: 0.158.0
       xy-tsconfig:
         specifier: workspace:*
         version: link:../../packages/xy-tsconfig
@@ -305,7 +314,7 @@ importers:
         version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@react-three/fiber':
         specifier: ^8.13.7
-        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.157.0)
+        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
       '@sindresorhus/slugify':
         specifier: ^2.2.1
         version: 2.2.1
@@ -544,7 +553,7 @@ importers:
         version: 13.4.19(@mdx-js/loader@2.3.0)(@mdx-js/react@2.3.0)
       '@react-three/fiber':
         specifier: ^8.13.7
-        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.157.0)
+        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
       '@stackblitz/sdk':
         specifier: ^1.9.0
         version: 1.9.0
@@ -668,7 +677,7 @@ importers:
         version: 13.4.19(@mdx-js/loader@2.3.0)(@mdx-js/react@2.3.0)
       '@react-three/fiber':
         specifier: ^8.13.7
-        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.157.0)
+        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
       '@stackblitz/sdk':
         specifier: ^1.9.0
         version: 1.9.0
@@ -792,7 +801,7 @@ importers:
         version: 13.4.19(@mdx-js/loader@2.3.0)(@mdx-js/react@2.3.0)
       '@react-three/fiber':
         specifier: ^8.13.7
-        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.157.0)
+        version: 8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
       '@stackblitz/sdk':
         specifier: ^1.9.0
         version: 1.9.0
@@ -5946,7 +5955,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@react-three/fiber@8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.157.0):
+  /@react-three/fiber@8.13.7(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
     resolution: {integrity: sha512-fH1wYi8+A2YZX8uYd9N4hfbAV+kHE565s7f62+SMNmpeynaUsN8NzXACmmJ6BpVKAKdxfvOde6dBGwG1BrWOKQ==}
     peerDependencies:
       expo: '>=43.0'
@@ -5977,7 +5986,7 @@ packages:
       react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0)
       scheduler: 0.21.0
       suspend-react: 0.1.3(react@18.2.0)
-      three: 0.157.0
+      three: 0.158.0
       zustand: 3.7.2(react@18.2.0)
     dev: false
 
@@ -7555,6 +7564,16 @@ packages:
       unist-util-visit: 5.0.0
     dev: false
 
+  /@threlte/core@6.1.0(svelte@4.2.1)(three@0.158.0):
+    resolution: {integrity: sha512-8Sm4Hkcs0oSB+c1WnMxWfZvbsatYkMv8VOgfsF+jzbvZUyPKtcwvbOe43Y101zhZTk//GKrdsPuwcURuFGMYVg==}
+    peerDependencies:
+      svelte: '>=4'
+      three: '>=0.133'
+    dependencies:
+      svelte: 4.2.1
+      three: 0.158.0
+    dev: false
+
   /@tootallnate/quickjs-emscripten@0.23.0:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
@@ -18766,8 +18785,8 @@ packages:
     dependencies:
       any-promise: 1.3.0
 
-  /three@0.157.0:
-    resolution: {integrity: sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==}
+  /three@0.158.0:
+    resolution: {integrity: sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==}
     dev: false
 
   /through2@2.0.5:
diff --git a/sites/svelteflow.dev/src/pages/examples/misc/hero-flow.mdx b/sites/svelteflow.dev/src/pages/examples/misc/hero-flow.mdx
new file mode 100644
index 000000000..bda1cb891
--- /dev/null
+++ b/sites/svelteflow.dev/src/pages/examples/misc/hero-flow.mdx
@@ -0,0 +1,14 @@
+---
+title: Hero Flow
+---
+
+import ExampleLayout from '@/layouts/example-with-frontmatter';
+import ExampleViewer from '@/components/example-viewer';
+
+<ExampleLayout>
+You may have noticed that the hero flow on our [our homepage](/) is actually written in React 🙈.
+For all the the non-believers, here it is written in Svelte Flow.
+
+<ExampleViewer codePath="examples/misc/hero-flow" />
+
+</ExampleLayout>
diff --git a/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx b/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
index b27231bfc..2a8f6d189 100644
--- a/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
+++ b/sites/svelteflow.dev/src/pages/examples/misc/use-svelte-flow.mdx
@@ -11,7 +11,6 @@ The `useSvelteFlow` hook gives you access to the Svelte Flow store and provides
 
 <ExampleViewer
   codePath="examples/misc/use-svelte-flow"
-  additionalFiles={['Flow.svelte', 'Sidebar.svelte']}
   activeFile="Flow.svelte"
 />