From 24350a70e73e654b546eab54e7b7c74d6af25a31 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Thu, 4 Sep 2025 11:23:25 +0200
Subject: [PATCH 1/3] feat(Minimap): add nodeComponent prop

---
 .../src/components/Header/Header.svelte       |  1 +
 .../examples/custom-minimap/+page.svelte      | 48 +++++++++++++++++
 .../custom-minimap/CustomMiniMapNode.svelte   | 22 ++++++++
 .../src/lib/plugins/Minimap/Minimap.svelte    |  2 +
 .../lib/plugins/Minimap/MinimapNode.svelte    | 52 +++++++++++++------
 .../svelte/src/lib/plugins/Minimap/types.ts   | 22 ++++++++
 6 files changed, 132 insertions(+), 15 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/custom-minimap/+page.svelte
 create mode 100644 examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte

diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 1db10784..0ebe84e9 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -7,6 +7,7 @@
 		'add-node-on-drop',
 		'color-mode',
 		'custom-connection-line',
+		'custom-minimap',
 		'customnode',
 		'dagre',
 		'detached-handle',
diff --git a/examples/svelte/src/routes/examples/custom-minimap/+page.svelte b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte
new file mode 100644
index 00000000..1e9c96ca
--- /dev/null
+++ b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import {
+		SvelteFlow,
+		Background,
+		Controls,
+		MiniMap,
+		type Node,
+		type Edge,
+	} from '@xyflow/svelte';
+	
+	import '@xyflow/svelte/dist/style.css';
+	import CustomMiniMapNode from './CustomMiniMapNode.svelte';
+
+	let nodes = $state.raw<Node[]>([]);
+	let edges = $state.raw<Edge[]>([]);
+
+	function addRandomNode() {
+		const nodeId = (nodes.length + 1).toString();
+		const newNode: Node = {
+			id: nodeId,
+			data: { label: `Node: ${nodeId}` },
+			position: {
+				x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 800),
+				y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 600),
+			},
+			type: 'default'
+		};
+		nodes = [...nodes, newNode];
+	}
+</script>
+
+<SvelteFlow
+	bind:nodes
+	bind:edges
+	onlyRenderVisibleElements={true}
+>
+	<Controls />
+	<Background />
+	<MiniMap nodeComponent={CustomMiniMapNode} />
+
+	<button 
+		type="button" 
+		onclick={addRandomNode}
+		style="position: absolute; left: 10px; top: 10px; z-index: 4;"
+	>
+		add node
+	</button>
+</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte
new file mode 100644
index 00000000..082b13bc
--- /dev/null
+++ b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	let {
+		x,
+		y,
+		width,
+		height,
+		selected,
+	}: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+		selected?: boolean;
+	} = $props();
+</script>
+
+<circle 
+	cx={x + width / 2}
+	cy={y + height / 2} 
+	r={Math.min(width, height) - 2} 
+	fill={selected ? "#ff6b6b" : "#ffcc00"}
+/>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index ac346066..d2fb8263 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -27,6 +27,7 @@
     nodeClass = '',
     nodeBorderRadius = 5,
     nodeStrokeWidth = 2,
+    nodeComponent,
     bgColor,
     maskColor,
     maskStrokeColor,
@@ -127,6 +128,7 @@
             y={node.internals.positionAbsolute.y}
             {...nodeDimesions}
             selected={node.selected}
+            nodeComponent={nodeComponent}
             color={nodeColorFunc?.(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
index a2700b82..1eb4cdeb 100644
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { ClassValue } from 'svelte/elements';
+  import type { Component } from 'svelte';
+  import type { MiniMapNodeProps } from './types';
 
   let {
     x,
@@ -12,7 +14,8 @@
     strokeColor,
     strokeWidth = 2,
     selected,
-    class: className
+    class: className,
+    nodeComponent
   }: {
     x: number;
     y: number;
@@ -25,20 +28,39 @@
     strokeWidth?: number;
     selected?: boolean;
     class?: ClassValue;
+    nodeComponent?: Component<MiniMapNodeProps>;
   } = $props();
 </script>
 
-<rect
-  class={['svelte-flow__minimap-node', className]}
-  class:selected
-  {x}
-  {y}
-  rx={borderRadius}
-  ry={borderRadius}
-  {width}
-  {height}
-  style:fill={color}
-  style:stroke={strokeColor}
-  style:stroke-width={strokeWidth}
-  shape-rendering={shapeRendering}
-/>
+{#if nodeComponent}
+  {@const CustomComponent = nodeComponent}
+  
+  <CustomComponent 
+    {x}
+    {y}
+    {width}
+    {height}
+    {borderRadius}
+    class={className}
+    {color}
+    {shapeRendering}
+    {strokeColor}
+    {strokeWidth}
+    {selected}
+  />
+{:else}
+  <rect
+    class={['svelte-flow__minimap-node', className]}
+    class:selected
+    {x}
+    {y}
+    rx={borderRadius}
+    ry={borderRadius}
+    {width}
+    {height}
+    style:fill={color}
+    style:stroke={strokeColor}
+    style:stroke-width={strokeWidth}
+    shape-rendering={shapeRendering}
+  />
+{/if}
diff --git a/packages/svelte/src/lib/plugins/Minimap/types.ts b/packages/svelte/src/lib/plugins/Minimap/types.ts
index dd6903de..550191ed 100644
--- a/packages/svelte/src/lib/plugins/Minimap/types.ts
+++ b/packages/svelte/src/lib/plugins/Minimap/types.ts
@@ -1,9 +1,29 @@
 import type { PanelPosition } from '@xyflow/system';
 import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+import type { Component } from 'svelte';
 import type { Node } from '$lib/types';
 
 export type GetMiniMapNodeAttribute = (node: Node) => string;
 
+/**
+ * The props that are passed to the MiniMapNode component
+ *
+ * @public
+ */
+export type MiniMapNodeProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  borderRadius?: number;
+  class?: ClassValue;
+  color?: string;
+  shapeRendering?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  selected?: boolean;
+};
+
 export type MiniMapProps = {
   /** Background color of minimap */
   bgColor?: string;
@@ -17,6 +37,8 @@ export type MiniMapProps = {
   nodeBorderRadius?: number;
   /** Stroke width of nodes on the minimap */
   nodeStrokeWidth?: number;
+  /** A custom component to render the nodes in the minimap. This component must render an SVG element! */
+  nodeComponent?: Component<MiniMapNodeProps>;
   /** Color of the mask representing viewport */
   maskColor?: string;
   /** Stroke color of the mask representing viewport */

From d23c3dfc551216ea52183a24e9a9f24ca35cc447 Mon Sep 17 00:00:00 2001
From: printer_scanner <abbey@xyflow.com>
Date: Thu, 4 Sep 2025 11:27:49 +0200
Subject: [PATCH 2/3] chore(changeset): add

---
 .changeset/hip-files-hunt.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/hip-files-hunt.md

diff --git a/.changeset/hip-files-hunt.md b/.changeset/hip-files-hunt.md
new file mode 100644
index 00000000..1f32c8f8
--- /dev/null
+++ b/.changeset/hip-files-hunt.md
@@ -0,0 +1,6 @@
+---
+"@xyflow/svelte": patch
+"svelte-examples": patch
+---
+
+Adds `nodeComponent` prop to Svelteflow's Minimap

From e31cb6ad09ce3026e8bd60fa0b698418e16cba51 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 4 Sep 2025 11:33:36 +0200
Subject: [PATCH 3/3] edit changeset

---
 .changeset/hip-files-hunt.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.changeset/hip-files-hunt.md b/.changeset/hip-files-hunt.md
index 1f32c8f8..aaef60ff 100644
--- a/.changeset/hip-files-hunt.md
+++ b/.changeset/hip-files-hunt.md
@@ -1,6 +1,5 @@
 ---
-"@xyflow/svelte": patch
-"svelte-examples": patch
+"@xyflow/svelte": minor
 ---
 
-Adds `nodeComponent` prop to Svelteflow's Minimap
+Pass a custom `nodeComponent` to Svelteflow's Minimap