diff --git a/dev/demo/relations.html b/dev/demo/relations.html
new file mode 100644
index 0000000..6435fb9
--- /dev/null
+++ b/dev/demo/relations.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script data-main="relationsdemo.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+    <style>
+
+        tspan, text {  
+          font-size: 11pt; 
+          stroke-width: 0; 
+          line-height: 100%; 
+          stroke-opacity:0; 
+          padding-right: 3pt 
+          fill: black; 
+        } 
+        g.arcs text { 
+          font-size: 9pt; 
+          fill: blue;
+        } 
+        path { 
+          stroke-width: 2; 
+          stroke: black;  
+          fill: none;
+        }
+
+    </style>
+    
+  </head>
+  <body>
+    <div id="tree"></div>
+  </body>
+</html>
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
new file mode 100644
index 0000000..5c28f9a
--- /dev/null
+++ b/dev/demo/relationsdemo.js
@@ -0,0 +1,9 @@
+requirejs.config({
+  baseUrl: '../js/src'
+});
+
+require(['match/relations'], function (relClass) {
+  var rel = relClass.create();
+  document.getElementById("tree").appendChild(rel.element());
+  rel.show();
+});