diff --git a/dev/demo/relations.html b/dev/demo/relations.html
index d651988..89abf06 100644
--- a/dev/demo/relations.html
+++ b/dev/demo/relations.html
@@ -5,43 +5,22 @@
     <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; 
-        }
-        /*
-        svg.relTree g > text > tspan {
-          text-anchor: middle;
-        }
-        */
-        g.arcs text { 
-          font-size: 9pt; 
-          fill: blue;
-        }
-        path { 
-          stroke-width: 2; 
-          stroke: black;  
-          fill: none;
-        }
-        path.anchor {
-          stroke: green;
-          z-index: 20;
-        }
-        marker > path {
-          fill-opacity:1;
-          fill: black;
-        }
-        marker {
-          overflow:visible
-        }
     </style>
     
   </head>
   <body>
-    <div id="tree"></div>
+    <div id="search">
+      <ol>
+        <li class="active action">
+          <div class="matchinfo">
+            <div class="matchtree">
+              <div id="treeRel"></div>
+              <div id="treeHier"></div>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </div>
+
   </body>
 </html>
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 17fcfb3..12d536c 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -1,10 +1,69 @@
+var treeSnippet =
+  "<span class=\"context-left\"></span>" +
+  "<span class=\"match\">" +
+  "  <span title=\"xip/c:MC\">" +
+  "    <span title=\"xip/c:TOP\">" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">Mit</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:DET\">dieser</span>" +
+  "          <span title=\"xip/c:NPA\">" +
+  "            <span title=\"xip/c:NOUN\">Methode</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:VERB\">ist</span>" +
+  "      <span title=\"xip/c:NP\">" +
+  "        <span title=\"xip/c:PRON\">es</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:AP\">" +
+  "        <span title=\"xip/c:ADV\">nun</span>" +
+  "        <span title=\"xip/c:ADJ\">möglich</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:ADV\">z. B.</span>" +
+  "      <span title=\"xip/c:NPA\">" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:NOUN\">Voice</span>" +
+  "        </span>" +
+  "      </span>" + "(" +
+  "      <span title=\"xip/c:INS\">" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" + ")" +
+  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">in</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:PRON\">der</span>" +
+  "        </span>" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:INFC\">" +
+  "        <span title=\"xip/c:INS\">" +
+  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span class=\"context-right\"></span>";
+
 requirejs.config({
-  baseUrl: '../js/src'
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
 });
 
-require(['match/relations'], function (relClass) {
+require(['match/relations', 'match/tree'], function (relClass, treeClass) {
   var rel = relClass.create();
-  document.getElementById("tree").appendChild(rel.element());
 
   /*
    * Start and end may be spans, i.e. arrays
@@ -31,6 +90,13 @@
     .addRel({ start: [5,6], end: 7, label: "g" })
     .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
   ;
-  
+
+  document.getElementById("treeRel").appendChild(rel.element());
+
+  // Todo: Probably rename to rel.draw()
   rel.show();
+
+  var tree = treeClass.create(treeSnippet);
+  document.getElementById("treeHier").appendChild(tree.element());
 });
+