diff --git a/dev/demo/query-creator.html b/dev/demo/query-creator.html
new file mode 100644
index 0000000..7893395
--- /dev/null
+++ b/dev/demo/query-creator.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Query creator demo</title>
+    <meta charset="utf-8" />
+    <style type="text/css" rel="stylesheet">
+      * {
+      outline: none;
+      }
+      td {
+      cursor: pointer;
+      }
+      input {
+      display: block;
+      width: 80%;
+      }
+    </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>
+  </body>
+  <script src="query-creator.js"></script>
+</html>
diff --git a/dev/demo/query-creator.js b/dev/demo/query-creator.js
new file mode 100644
index 0000000..0b3e07c
--- /dev/null
+++ b/dev/demo/query-creator.js
@@ -0,0 +1,126 @@
+(function () {
+  "use strict";
+
+  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 child = target;
+          while((child = child.previousSibling) != null) {
+            if (child.nodeType === 1)
+              i++;
+          };
+        
+          this.addToToken(i, foundry + '/' + layer + '=' + target.innerText);
+          target.style.backgroundColor = 'red';
+        }
+
+        // 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 child = target;
+            while((child = child.previousSibling) != null) {
+              if (child.nodeType === 1)
+                i++;
+            };
+
+            // Target is an orth
+            if (i >= 0) {
+
+              this.addToToken(i, 'orth=' + target.innerText);
+              target.style.backgroundColor = 'red';
+            }
+            
+          };      
+        };
+      };
+
+      event.stopPropagation();
+    },
+
+    addToToken : function (index, annotation) {
+
+      var token = this._query[index];
+
+      if (token === undefined) {
+        token = this._query[index] = [];
+      };
+
+      token.push(annotation);
+
+      // Make terms unique
+      this._query[index] = token.filter(
+        function (e, i, arr) {
+          return arr.lastIndexOf(e) === i;
+        }
+      );
+
+      this.show();
+    },
+    element : function () {
+      return this._element;
+    },
+    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) {
+        this._element = document.createElement('input');
+        this._element.setAttribute('type', 'text');
+        this._matchInfo.appendChild(this._element);
+      };
+
+      this._element.value = str;
+    }
+  };
+
+  function _createToken (token) {
+    var str = '[';
+    str += token.join(" & ");
+    return str + ']';
+  };
+
+  qc.create(document.getElementsByClassName('matchinfo')[0]);
+
+})();