diff --git a/dev/demo/query-creator.html b/dev/demo/query-creator.html
index c28c16c..b904441 100644
--- a/dev/demo/query-creator.html
+++ b/dev/demo/query-creator.html
@@ -3,55 +3,49 @@
   <head>
     <title>Query creator demo</title>
     <meta charset="utf-8" />
+    <script data-main="query-creator.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+
     <style type="text/css" rel="stylesheet">
-      * {
-      outline: none;
-      }
-      td, tbody th, thead th:not(:nth-child(1)):not(:nth-child(2)) {
-        cursor: pointer;
-      }
-      td.chosen, th.chosen {
-        background-color: red;
-      }
-      input {
-        display: block;
-        width: 80%;
+      body {
+        background-color: #f6a800;
       }
     </style>
   </head>
   <body>
     <div class="matchinfo">
-      <table>
-        <thead>
-          <tr>
-            <th>Foundry</th>
-            <th>Layer</th>
-            <th>Der</th>
-            <th>älteste</th>
-            <th>lebende</th>
-            <th>Baum</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr tabindex="0">
-            <th>corenlp</th>
-            <th>p</th>
-            <td>ART</td>
-            <td>ADJA</td>
-            <td>ADJA</td>
-            <td>NN</td>
-          </tr>
-          <tr tabindex="0">
-            <th>opennlp</th>
-            <th>p</th>
-            <td>ART</td>
-            <td>ADJA</td>
-            <td>ADJA</td>
-            <td>NN</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="matchtable">
+        <table>
+          <thead>
+            <tr>
+              <th>Foundry</th>
+              <th>Layer</th>
+              <th>Der</th>
+              <th>älteste</th>
+              <th>lebende</th>
+              <th>Baum</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr tabindex="0">
+              <th>corenlp</th>
+              <th>p</th>
+              <td>ART</td>
+              <td>ADJA</td>
+              <td>ADJA</td>
+              <td>NN</td>
+            </tr>
+            <tr tabindex="0">
+              <th>opennlp</th>
+              <th>p</th>
+              <td>ART</td>
+              <td>ADJA</td>
+              <td>ADJA</td>
+              <td>NN</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </body>
-  <script src="query-creator.js"></script>
 </html>
diff --git a/dev/demo/query-creator.js b/dev/demo/query-creator.js
index ee178ce..244f719 100644
--- a/dev/demo/query-creator.js
+++ b/dev/demo/query-creator.js
@@ -1,187 +1,12 @@
-(function () {
-  "use strict";
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
 
-  var qc = {
-    create : function (matchInfo) {
-      return Object.create(this)._init(matchInfo);
-    },
-
-    // Initialize query creator
-    _init : function (matchInfo) {
-
-      // This may be probably a hint helper
-      this._query = []
-      this._matchInfo = matchInfo;
-
-      // Listen on the match table
-      this._matchInfo.addEventListener(
-        "click", this.clickOnAnno.bind(this), false
-      );
-      return this;
-    },
-
-    clickOnAnno : function (event) {
-
-      // Listen for clicks on table cells
-      if (event.target !== event.currentTarget) {
-
-        // Get target event
-        var target = event.target;
-
-        if (target.tagName == 'TD') {
-
-          // Check foundry and layer
-          var head    = target.parentNode.getElementsByTagName('th');
-          var foundry = head[0].innerText;
-          var layer   = head[1].innerText;
-
-          // Check index position:
-          var i = -2;
-          var sib = target;
-          while((sib = sib.previousSibling) != null) {
-            if (sib.nodeType === 1)
-              i++;
-          };
-
-          this.toggleInToken(target, i, foundry + '/' + layer + '=' + target.innerText);
-        }
-
-        // Get orth values
-        else if (target.tagName == 'TH') {
-
-          // The head is in the top row
-          if (target.parentNode.parentNode.tagName == 'THEAD') {
-
-            var i = -2;
-            var sib = target;
-            while ((sib = sib.previousSibling) != null) {
-              if (sib.nodeType === 1)
-                i++;
-            };
-
-            // Target is an orth
-            if (i >= 0) {
-              this.toggleInToken(target, i, 'orth=' + target.innerText);
-            }            
-          }
-
-          // The head refers to the complete row
-          else {
-
-            // Check foundry and layer
-            var head    = target.parentNode.getElementsByTagName('th');
-            var foundry = head[0].innerText;
-            var layer   = head[1].innerText;
-            var prefix = foundry + '/' + layer + '=';
-
-            // Iterate over all siblings
-            var i = 0;
-            var sib = target;
-            while ((sib = sib.nextSibling) != null) {
-              if (sib.nodeType !== 1 || sib.tagName === 'TH')
-                continue;
-              this.addToToken(i, prefix + sib.innerText);
-              sib.className = 'chosen';
-              i++;
-            };
-          };
-        };
-      };
-
-      event.stopPropagation();
-    },
-
-    // Add term to token
-    addToToken : function (index, term) {
-
-      var token = this._query[index];
-
-      // Initialize token
-      if (token === undefined) {
-        token = this._query[index] = [];
-      };
-
-      // Push to token array
-      token.push(term);
-
-      // Make terms unique
-      this._query[index] = token.filter(
-        function (e, i, arr) {
-          return arr.lastIndexOf(e) === i;
-        }
-      );
-
-      this.show();
-    },
-
-    // Remove term from token
-    removeFromToken : function (index, term) {
-      var token = this._query[index];
-
-      if (token === undefined)
-        return;
-
-      token.splice(token.indexOf(term), 1);
-
-      if (token.length > 0)
-        this._query[index] = token;
-      else
-        this._query[index] = undefined;
-
-      this.show();
-    },
-
-    // Get element representing annotation line
-    element : function () {
-      return this._element;
-    },
-
-    // Show annotation fragment
-    show : function () {
-      var str = '';
-      this._query.forEach(function (token, index) {
-        if (token !== undefined) {
-          str += _createToken(token);
-        };
-      });
-
-      // Element is not yet defined
-      if (this._element === undefined) {
-
-        // Better create a div
-        this._element = document.createElement('input');
-        this._element.setAttribute('type', 'text');
-        this._matchInfo.appendChild(this._element);
-      };
-
-      if (str === '') {
-        this._matchInfo.removeChild(this._element);
-        this._element = undefined;
-      }
-      else {
-        this._element.value = str;
-      };
-    },
-
-    // Add term to token if not yet chosen, otherwise remove
-    toggleInToken : function (node, index, term) {
-      if (node.className == 'chosen') {
-        this.removeFromToken(index, term);
-        node.className = '';
-      }
-      else {
-        this.addToToken(index, term);
-        node.className = 'chosen';
-      };
-    }
-  };
-
-  function _createToken (token) {
-    var str = '[';
-    str += token.sort().join(" & ");
-    return str + ']';
-  };
-
-  qc.create(document.getElementsByClassName('matchinfo')[0]);
-
-})();
+define(['match/querycreator', 'lib/domReady'], function (qc, domReady) {
+  domReady(function () {
+    qc.create(document.getElementsByClassName('matchtable')[0]);
+  });
+});