diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 226ee28..e2ce107 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -604,7 +604,7 @@
 
 KorAP.currentQuery = queryExample;
 
-require(['app/en', 'init'], function (lang, init) {
+require(['app/en', 'init', 'hint/foundries/cnx'], function (lang) {
   KorAP.hintArray = hintArray;
 
   // Set current virtual collection
diff --git a/dev/demo/match-table.html b/dev/demo/match-table.html
new file mode 100644
index 0000000..f687f68
--- /dev/null
+++ b/dev/demo/match-table.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Match table demo</title>
+    <meta charset="utf-8" />
+    <script data-main="match-tabledemo.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+  </head>
+  <body>
+    <main>
+      <div id="search">
+        <ol class="align-left">
+	        <li class="active">
+	          <div class="meta">xx</div>
+            <div class="match-main">
+              <div class="match-wrap">
+	              <div class="snippet startMore endMore">
+	                <span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+              </div>
+	          </div>
+	          <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+            <div class="matchinfo">
+              <div class="matchtable" id="matchtable"></div>
+            </div>
+	        </li>
+        </ol>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/dev/demo/match-tabledemo.js b/dev/demo/match-tabledemo.js
new file mode 100644
index 0000000..fe422ef
--- /dev/null
+++ b/dev/demo/match-tabledemo.js
@@ -0,0 +1,62 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+window.KorAP = window.KorAP || {};
+
+require(['match/table',
+         'lib/domReady',
+         'hint/foundries/opennlp',
+         'hint/foundries/cnx',
+         'hint/foundries/mate'
+        ], function (matchTableClass, domReady) {
+
+  var snippet = "<span title=\"cnx/l:meist\">" +
+  "  <span title=\"cnx/p:ADV\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:meist\">" +
+  "        <span title=\"mate/p:ADV\">" +
+  "          <span title=\"opennlp/p:ADV\">meist</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:deutlich\">" +
+  "  <span title=\"cnx/p:A\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:deutlich\">" +
+  "        <span title=\"mate/m:degree:pos\">" +
+  "          <span title=\"mate/p:ADJD\">" +
+  "            <span title=\"opennlp/p:ADJD\">deutlich</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:fähig\">" +
+  "  <span title=\"cnx/l:leistung\">" +
+  "    <span title=\"cnx/p:A\">" +
+  "      <span title=\"cnx/syn:@NH\">" +
+  "        <span title=\"mate/l:leistungsfähig\">" +
+  "          <span title=\"mate/m:degree:comp\">" +
+  "            <span title=\"mate/p:ADJD\">" +
+  "              <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
+  "            </span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>";
+
+  
+  domReady(function () {
+    var mt = matchTableClass.create(snippet);
+    document.getElementById('matchtable').appendChild(mt.element());
+  });
+});