diff --git a/src/lib/Arc.svelte b/src/lib/Arc.svelte
index 90d8d92..227b3a9 100644
--- a/src/lib/Arc.svelte
+++ b/src/lib/Arc.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.ArcConfig;
 	export let handle = new Konva.Arc(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Arrow.svelte b/src/lib/Arrow.svelte
index 8295d8e..a21b6d0 100644
--- a/src/lib/Arrow.svelte
+++ b/src/lib/Arrow.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.ArrowConfig;
 	export let handle = new Konva.Arrow(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Circle.svelte b/src/lib/Circle.svelte
index 0aa2306..18deb03 100644
--- a/src/lib/Circle.svelte
+++ b/src/lib/Circle.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.CircleConfig;
 	export let handle = new Konva.Circle(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Ellipse.svelte b/src/lib/Ellipse.svelte
index 850606f..79de850 100644
--- a/src/lib/Ellipse.svelte
+++ b/src/lib/Ellipse.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.EllipseConfig;
 	export let handle = new Konva.Ellipse(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Image.svelte b/src/lib/Image.svelte
index bdcaef5..d464f21 100644
--- a/src/lib/Image.svelte
+++ b/src/lib/Image.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.ImageConfig;
 	export let handle = new Konva.Image(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Layer.svelte b/src/lib/Layer.svelte
index 6423315..ae5e8bc 100644
--- a/src/lib/Layer.svelte
+++ b/src/lib/Layer.svelte
@@ -17,16 +17,19 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 -->
 <script lang="ts">
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import { type Writable, writable } from 'svelte/store';
 	import { Container, getParentStage, setContainerContext } from '$lib/util/manageContext';
 	import { registerEvents } from '$lib/util/events';
 	import { copyExistingKeys } from './util/copy';
+	import { OrderManager, getOrderManager, setOrderManagerContext } from './util/manageOrder';
 
 	export let config: Konva.LayerConfig = {};
 	export let handle: Konva.Layer = new Konva.Layer(config);
 
 	let inner = writable<null | Konva.Layer>(null);
+	let parentOrderManager = getOrderManager();
+	let orderManager = new OrderManager(handle);
 
 	let dispatcher = createEventDispatcher();
 
@@ -58,12 +61,15 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 	});
 
 	onDestroy(() => {
-		if (handle) {
-			handle.destroy();
-		}
+		handle.destroy();
 	});
 
 	setContainerContext(Container.Layer, inner);
+	setOrderManagerContext(orderManager);
+
+	beforeUpdate(() => {
+		if (parentOrderManager) parentOrderManager.signalComponentOrder(handle);
+	});
 </script>
 
 {#if isReady}
diff --git a/src/lib/Line.svelte b/src/lib/Line.svelte
index 4ca81f0..45b14ae 100644
--- a/src/lib/Line.svelte
+++ b/src/lib/Line.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.LineConfig;
 	export let handle = new Konva.Line(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Path.svelte b/src/lib/Path.svelte
index ee139ae..bbaedbf 100644
--- a/src/lib/Path.svelte
+++ b/src/lib/Path.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Path.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.PathConfig;
 	export let handle = new Konva.Path(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Path.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Rect.svelte b/src/lib/Rect.svelte
index abf34a3..474ffbe 100644
--- a/src/lib/Rect.svelte
+++ b/src/lib/Rect.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Rect.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.RectConfig;
 	export let handle = new Konva.Rect(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Rect.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/RegularPolygon.svelte b/src/lib/RegularPolygon.svelte
index 7c4b896..000d23d 100644
--- a/src/lib/RegularPolygon.svelte
+++ b/src/lib/RegularPolygon.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.RegularPolyg
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.RegularPolygonConfig;
 	export let handle = new Konva.RegularPolygon(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.RegularPolyg
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Ring.svelte b/src/lib/Ring.svelte
index 6f5dc10..7f08b2c 100644
--- a/src/lib/Ring.svelte
+++ b/src/lib/Ring.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ring.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.RingConfig;
 	export let handle = new Konva.Ring(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ring.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Shape.svelte b/src/lib/Shape.svelte
index fd4390c..edbb3b6 100644
--- a/src/lib/Shape.svelte
+++ b/src/lib/Shape.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Shape.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.ShapeConfig;
 	export let handle = new Konva.Shape(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Shape.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Sprite.svelte b/src/lib/Sprite.svelte
index d3042e4..8bd103c 100644
--- a/src/lib/Sprite.svelte
+++ b/src/lib/Sprite.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Sprite.html)
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.SpriteConfig;
 	export let handle = new Konva.Sprite(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Sprite.html)
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Stage.svelte b/src/lib/Stage.svelte
index 3d3d054..a7b3c7f 100644
--- a/src/lib/Stage.svelte
+++ b/src/lib/Stage.svelte
@@ -14,16 +14,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 -->
 <script lang="ts">
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, createEventDispatcher, afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { Container, setContainerContext } from '$lib/util/manageContext';
 	import { copyExistingKeys } from './util/copy';
+	import { OrderManager, setOrderManagerContext } from './util/manageOrder';
 
 	export let config: Konva.ContainerConfig;
 	export let handle: null | Konva.Stage = null;
 
 	let inner = writable<null | Konva.Stage>(null);
+	let orderManager: null | OrderManager = null;
 
 	let stage: HTMLDivElement;
 
@@ -41,6 +43,8 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 			...config
 		});
 
+		orderManager = new OrderManager(handle);
+
 		handle.on('dragend', () => {
 			copyExistingKeys(config, handle!.getAttrs());
 			config = config;
@@ -53,12 +57,11 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 	});
 
 	onDestroy(() => {
-		if (handle) {
-			handle.destroy();
-		}
+		if (handle) handle.destroy();
 	});
 
 	setContainerContext(Container.Stage, inner);
+	setOrderManagerContext(orderManager!); // The value is actually null at the point of calling but is guaranteed to be defined once it is used in the child layers
 </script>
 
 <div bind:this={stage} {...$$restProps}>
diff --git a/src/lib/Star.svelte b/src/lib/Star.svelte
index d21108c..19a5b22 100644
--- a/src/lib/Star.svelte
+++ b/src/lib/Star.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Star.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.StarConfig;
 	export let handle = new Konva.Star(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Star.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Tag.svelte b/src/lib/Tag.svelte
index 33ff01b..35b5c94 100644
--- a/src/lib/Tag.svelte
+++ b/src/lib/Tag.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Tag.html), [
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.TagConfig;
 	export let handle = new Konva.Tag(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Tag.html), [
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Text.svelte b/src/lib/Text.svelte
index bb780d0..28dc0e8 100644
--- a/src/lib/Text.svelte
+++ b/src/lib/Text.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Text.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.TextConfig;
 	export let handle = new Konva.Text(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Text.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/TextPath.svelte b/src/lib/TextPath.svelte
index 27a64f1..777023a 100644
--- a/src/lib/TextPath.svelte
+++ b/src/lib/TextPath.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.TextPath.htm
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.TextPathConfig;
 	export let handle = new Konva.TextPath(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.TextPath.htm
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/Wedge.svelte b/src/lib/Wedge.svelte
index 4981a17..eb336b3 100644
--- a/src/lib/Wedge.svelte
+++ b/src/lib/Wedge.svelte
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Wedge.html),
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.WedgeConfig;
 	export let handle = new Konva.Wedge(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Wedge.html),
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});
diff --git a/src/lib/util/manageContext.ts b/src/lib/util/manageContext.ts
index 85400d8..7547a5a 100644
--- a/src/lib/util/manageContext.ts
+++ b/src/lib/util/manageContext.ts
@@ -28,7 +28,7 @@ export enum Container {
 	Label = 3
 }
 
-type KonvaContainer = Konva.Stage | Konva.Layer | Konva.Group | Konva.Label;
+export type KonvaContainer = Konva.Stage | Konva.Layer | Konva.Group | Konva.Label;
 export type KonvaParent = Konva.Layer | Konva.Group | Konva.Label;
 
 export const CONTAINER_ERROR =
diff --git a/src/lib/util/manageOrder.ts b/src/lib/util/manageOrder.ts
new file mode 100644
index 0000000..3458931
--- /dev/null
+++ b/src/lib/util/manageOrder.ts
@@ -0,0 +1,63 @@
+/**
+ * Manages the automatic reordering of the Konva nodes according to their position in svelte
+ */
+
+import type Konva from 'konva';
+import { getContext, setContext, tick } from 'svelte';
+import type { KonvaContainer } from './manageContext';
+
+const CONTAINER_ORDER_MANAGER_KEY = 'svelte-konva-order';
+
+export function setOrderManagerContext(value: OrderManager) {
+	setContext(CONTAINER_ORDER_MANAGER_KEY, value);
+}
+
+export function getOrderManager(): OrderManager {
+	return getContext<OrderManager>(CONTAINER_ORDER_MANAGER_KEY);
+}
+
+export class OrderManager {
+	private currentOrder: Array<Konva.Node> = [];
+	private container: KonvaContainer;
+
+	constructor(container: KonvaContainer) {
+		this.container = container;
+	}
+
+	signalComponentOrder(component: Konva.Node) {
+		this.currentOrder.push(component);
+
+		// Schedule redrawing on next tick
+		tick().then(() => {
+			this.redraw();
+		});
+	}
+
+	private redraw() {
+		if (this.currentOrder.length <= 1) return;
+
+		let konvaIndexes: Array<number> = [];
+
+		this.currentOrder.map((component: Konva.Node) => {
+			konvaIndexes.push(component.index);
+		});
+
+		konvaIndexes = konvaIndexes.sort((a, b) => a - b);
+
+		// The position of the nodes inside the currentOrder const resembles the current position in svelte
+		// while the konvaIndexes array represents the indexes of all components in the currentOrder array.
+		//
+		// Therefore, the function now reassigns the available indexes from lowest to highest according to the
+		// component order inside the currentOrder Array.
+		this.currentOrder.forEach((component: Konva.Node) => {
+			component.zIndex(konvaIndexes.pop()!);
+		});
+
+		this.currentOrder = [];
+
+		const drawingNode: null | Konva.Layer | Konva.Stage =
+			this.container.getLayer() ?? this.container.getStage();
+
+		if (drawingNode) drawingNode.batchDraw();
+	}
+}
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..de6f54a
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { Stage, Layer, Star } from 'svelte-konva';
+	import { onMount } from 'svelte';
+
+	let stage: any;
+	let width: number;
+	let height: number;
+	let list: any[] = [];
+	onMount(() => {
+		for (let n = 0; n < 5; n++) {
+			list.push({
+				id: `${n}`,
+				x: Math.random() * width,
+				y: Math.random() * height,
+				rotation: Math.random() * 180,
+				scale: Math.random()
+			});
+		}
+	});
+
+	let dragItemId: string | null = null;
+
+	let handleDragStart = (e: any) => {
+		// save drag element:
+		dragItemId = e.detail.target.id();
+		// move current element to the top:
+		const item = list.find((i) => i.id === dragItemId);
+		const index = list.indexOf(item);
+		list.splice(index, 1);
+		list.push(item);
+
+		list = list;
+	};
+	let handleDragEnd = (e: any) => {
+		const item = list.find((i) => i.id === dragItemId);
+		if (!item) {
+			return;
+		}
+		item.x = e.detail.target.x();
+		item.y = e.detail.target.y();
+		dragItemId = null;
+	};
+
+	function printOrder(window: Window, dragitem: any) {
+		if (!stage) return;
+
+		let children = (window as any).Konva.stages[0].children[0].children;
+
+		children.forEach((e: any) => {
+			console.log(`kidx: ${e.id()}, sidx: ${e.attrs.id}`);
+		});
+	}
+	//$: printOrder(window, dragItemId);
+
+	let showStar = true;
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
+
+<Stage config={{ width, height }} bind:handle={stage} on:dblclick={() => (showStar = !showStar)}>
+	<Layer>
+		{#if showStar}
+			<Star
+				config={{
+					x: 200,
+					y: 200,
+					rotation: 10,
+					id: '54885',
+					numPoints: 5,
+					innerRadius: 30,
+					outerRadius: 50,
+					fill: '#89b717',
+					opacity: 0.8,
+					draggable: true,
+					scaleX: 1,
+					scaleY: 1,
+					shadowColor: 'black',
+					shadowBlur: 10,
+					shadowOffsetX: 15,
+					shadowOffsetY: 15,
+					shadowOpacity: 0.6
+				}}
+			/>
+		{/if}
+		{#each list as item (item.id)}
+			<Star
+				config={{
+					x: item.x,
+					y: item.y,
+					rotation: item.rotation,
+					id: item.id,
+					numPoints: 5,
+					innerRadius: 30,
+					outerRadius: 50,
+					fill: '#89b717',
+					opacity: 0.8,
+					draggable: true,
+					scaleX: dragItemId === item.id ? item.scale * 1.2 : item.scale,
+					scaleY: dragItemId === item.id ? item.scale * 1.2 : item.scale,
+					shadowColor: 'black',
+					shadowBlur: 10,
+					shadowOffsetX: dragItemId === item.id ? 15 : 5,
+					shadowOffsetY: dragItemId === item.id ? 15 : 5,
+					shadowOpacity: 0.6
+				}}
+				on:dragstart={handleDragStart}
+				on:dragend={handleDragEnd}
+			/>
+		{/each}
+
+		<Star
+			config={{
+				x: 200,
+				y: 200,
+				rotation: 10,
+				id: '548dfds85',
+				numPoints: 5,
+				innerRadius: 400,
+				outerRadius: 500,
+				fill: 'red',
+				opacity: 0.8,
+				draggable: true,
+				scaleX: 1,
+				scaleY: 1,
+				shadowColor: 'black',
+				shadowBlur: 10,
+				shadowOffsetX: 15,
+				shadowOffsetY: 15,
+				shadowOpacity: 0.6
+			}}
+		/>
+	</Layer>
+	<!--<Layer />-->
+</Stage>
diff --git a/src/templates/svelteKonvaComponent.hbs b/src/templates/svelteKonvaComponent.hbs
index a4914af..51a8740 100644
--- a/src/templates/svelteKonvaComponent.hbs
+++ b/src/templates/svelteKonvaComponent.hbs
@@ -15,16 +15,18 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.{{ component
 	 */
 
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy, beforeUpdate, createEventDispatcher } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { registerEvents } from '$lib/util/events';
 	import { getParentContainer, type KonvaParent } from '$lib/util/manageContext';
 	import { copyExistingKeys } from '$lib/util/copy';
+	import { getOrderManager } from './util/manageOrder';
 
 	export let config: Konva.{{ componentName }}Config;
 	export let handle = new Konva.{{componentName}}(config);
 
 	let parent: Writable<null | KonvaParent> = getParentContainer();
+	let parentOrderManager = getOrderManager();
 	let dispatcher = createEventDispatcher();
 
 	$: handle.setAttrs(config);
@@ -45,6 +47,10 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.{{ component
 		registerEvents(dispatcher, handle);
 	});
 
+	beforeUpdate(() => {
+		parentOrderManager.signalComponentOrder(handle);
+	});
+
 	onDestroy(() => {
 		handle.destroy();
 	});