diff --git a/playground/data-monster-bind/index.html b/playground/data-monster-bind/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..ce219f7000327310a1148c34d22f31ecde1ef702
--- /dev/null
+++ b/playground/data-monster-bind/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Monster-Bind</title>
+    <script src="main.mjs" type="module"></script>
+</head>
+
+<body>
+    <main>
+
+        <p>
+            Ein Updater bekommt das Element mit der ID "updater-element" <br>
+            und ersetzt den Inhalt des Elements mit dem Wert von path:a.b<br>
+        </p>
+        <div id="updater-element" style="padding: 5px;border: 1px solid #ff0000;" >
+            <p>
+                Das Input bekommt ein bind auf das Dataset mit <b>data-monster-bind="path:a.b"</b>
+                bei Änderungen wird der Wert innerhalb des Datasets geändert<br>
+            </p>
+            <form id="form1">
+                <!-- data-monster-bind added -->
+                <input type="input" data-monster-bind="path:a.b">
+            </form>
+
+
+            <p>
+                mit data-monster-replace="path:a.b" werden die Daten die im Updater<br>
+                gesetzt wurden ersetzt<br>
+                und immer wenn sich die Daten in dem Dataset verändern werden auch hier die Werte geändert<br>
+            </p>
+            <div style="padding: 5px;border: 1px solid #000;" data-monster-replace="path:a.b">original Wert im HTML</div>
+
+        </div>
+
+
+
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/playground/data-monster-bind/main.mjs b/playground/data-monster-bind/main.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..ddaabd3a5698af7b80d942348cbb14aa04138527
--- /dev/null
+++ b/playground/data-monster-bind/main.mjs
@@ -0,0 +1,32 @@
+import {Updater} from '../../source/dom/updater.mjs';
+
+/**
+ * Element in dem die Daten ersetzt werden sollen
+ */
+let updaterEelement = document.getElementById("updater-element");
+
+/**
+ * neues Updater Objekt erstellen
+ * mit einem Dataset
+ */
+let updater = new Updater(
+    updaterEelement,
+    {
+        a: {
+            b: "Daten aus dem Updater Dataset"
+        }
+    }
+);
+
+/**
+ * Events anschalten damit änderungen am Elementen mit data-monster-bind verarbeitet werden
+ */
+updater.enableEventProcessing();
+
+/**
+ * nur wenn run() ausgeführt wird, werden die Daten mit data-monster-replace ersetzt
+ */
+updater.run();
+
+
+