diff --git a/examples/HTML/index.html b/examples/HTML/index.html
new file mode 100644
index 00000000..de0fb083
--- /dev/null
+++ b/examples/HTML/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+        <meta charset=utf-8 />
+        <title>Y Example</title>
+        <script src="../../build/browser/y.js"></script>
+        <script src="../../../y-xmpp/y-xmpp.js"></script>
+        <script src="./index.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
+<body>
+<h1> yjs HTML </h1>
+<p> Collaborative editing on HTML with <a href="https://github.com/rwth-acis/yjs/">yjs</a>
+and XMPP Connector. </p>
+
+<p> <a href="https://github.com/rwth-acis/yjs/">yjs</a> is a Framework for Real-Time collaboration on arbitrary data types.
+</p>
+</body>
+</html>
diff --git a/examples/HTML/index.js b/examples/HTML/index.js
new file mode 100644
index 00000000..1c5016e5
--- /dev/null
+++ b/examples/HTML/index.js
@@ -0,0 +1,26 @@
+
+
+connector = new Y.XMPP().join("testy-xmpp-json3", {syncMode: "syncAll"});
+connector.debug = true
+
+y = new Y(connector);
+
+window.onload = function(){
+  var textbox = document.getElementById("textfield");
+  y.observe(function(events){
+    for(var i=0; i<events.length; i++){
+      var event = events[i];
+      if(event.name === "textfield" && event.type !== "delete"){
+        y.val("textfield").bind(textbox);
+        y.val("headline").bind(document.querySelector("h1"))
+      }
+    }
+  });
+  connector.whenSynced(function(){
+    if(y.val("textfield") == null){
+      y.val("headline","headline", "mutable");
+      y.val("textfield","stuff", "mutable")
+    }
+  })
+
+};
\ No newline at end of file
