diff --git a/dev/demo/querystoring.html b/dev/demo/querystoring.html
new file mode 100644
index 0000000..e1d51fd
--- /dev/null
+++ b/dev/demo/querystoring.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hint demo</title>
+    <meta charset="utf-8" />
+    <script data-main="querystoringdemo.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+  </head>
+  <body>
+    <header>
+      <form id="searchform" autocomplete="off" action="/kalamar">
+	<div id="searchbar">
+	  <input type="search"
+		 placeholder="Find ..."
+		 name="q"
+		 id="q-field"
+		 value="mbfhjgfghfhgfhfghfghnhvrthrjvztrhhrnvnthvft"
+		 autofocus="autofocus" />
+	  <button type="submit"><span>Go</span></button>
+	</div>
+  <div id="vc-view"></div>
+      </form>
+    </header>
+
+    <a onclick="demoAlert(14, 'This is a warning')">Alert at 14</a>
+  </body>
+</html>
diff --git a/dev/demo/querystoringdemo.js b/dev/demo/querystoringdemo.js
new file mode 100644
index 0000000..8852344
--- /dev/null
+++ b/dev/demo/querystoringdemo.js
@@ -0,0 +1,234 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+var hint = undefined;
+
+require(['plugin/server','panel/query', 'hint', 'hint/foundries/cnx','lib/domReady','api'], function (pluginClass, queryPanelClass, hintClass, hintArray, domReady) {
+  KorAP.hintArray = hintArray;
+  KorAP.Hint = null;
+
+  //TO BE ABLE TO USE THIS DEMO YOU MUST MANUALLY OVERRIDE LINE 9 IN hint/menu.js WITH hint/querystoringitem.js
+  // This is so that this demo can be looked at in the main branch. Currently it is not easy to override the item prototype class
+  // used in hint-menus. 
+
+  //TODO: Tutorial on how to add to master
+  //TODO: How to querynames.
+
+  //How to add this to master:
+  // All KorAP.Hint.functionname = function(...) {...} should be added to the hint class. setNumQueries should be called upon hintClass creation.
+  // overwrite the onclick function in hint/item.js with the one provided in hint/querystoringitem.js. The buttons need to have be stored
+  // in static references, so that they can be re-added in unReadQueries and readQueries. I recommend making them attributes of either hint
+  // or hint.menu("-").container.
+  
+  domReady(function() {
+    KorAP.URL="http://localhost:3000"
+
+    KorAP.Hint = hintClass.create();
+
+    KorAP.Hint.numStoredQueries = 0; //used for the query names.
+    /**
+     * Get and set the number of currently stored queries to what the server says. This is used to allow for
+     * the naming process of queries to always create queries with unique names until we implement custom query
+     * names.
+     */
+    KorAP.Hint.setNumQueries = function (retList) {
+      if (arguments.length === 0){ // regular function call
+        KorAP.API.getQueryList(KorAP.Hint.setNumQueries,console.log); //Ask the Server for count
+      } else if (retList !== undefined) { //call by the API (Server)
+        this.numStoredQueries = retList.length; //set the count thanks to server
+        console.log("Set counter for number of stored queries to: " + retList.length);
+      };
+    }.bind(KorAP.Hint);
+
+    KorAP.Hint.setNumQueries();
+
+    KorAP.restoreMinusMenuButton = { // Whenever used is at location 0
+      defaultTextValue : "Back",
+      onclick : function (e) {
+        console.log("back click");
+        this._menu.hint().unReadQueries();
+        this.content(); //Reset to default Text
+        //e.halt();
+      },
+      chop : function (e) {
+        this.onclick(e);
+      }
+    };
+
+    KorAP.triggerDeleteModeButton = { // Whenever used is at location 1
+      defaultTextValue : "Delete Queries",
+
+      onclick : function (e) {
+
+        if (this._menu.hint()._hintItemMode === "REGULAR") {
+          // make it so that selecting queries now deletes them later
+          this._menu.hint()._deleteTheseQueries = [];
+          this.content("Delete The Selected Queries");
+          this.menu().container().item(0).content("Cancel Deletion");
+          this._menu.hint()._hintItemMode = "DELETE SELECTION";
+
+        } else if (this._menu.hint()._hintItemMode === "DELETE SELECTION") {
+          // Delete stuff
+          this._menu.hint()._deleteTheseQueries.forEach(function (queryname){
+            KorAP.API.deleteQuery(queryname,console.log);
+          },undefined);
+          this._menu.hint()._deleteTheseQueries = [];
+          this._menu.hint()._hintItemMode = "REGULAR";
+          this.menu().container().item(0).content(); //"Back"
+          this.content("Start Deleting Queries");
+          KorAP.Hint.setNumQueries(); //Set value to something meaningful
+          KorAP.API.getQueryList(KorAP.Hint.readQueries,console.log);
+
+        } else {
+          //ERROR
+          console.log("What?");
+        };
+        this.menu("-").show();
+        //e.halt();
+      }
+    };
+
+    JSONListToQueryTemplates= function(JSONList) {
+      var queryItemTemplates = [];
+      if (JSONList !== undefined) {
+        JSONList.forEach(function(query){ 
+          queryItemTemplates.push([
+            query["name"],
+            query["koralQuery"] || query["q"],
+            query["description"] || ""
+          ])
+        }, undefined); //no "this" needed
+      };
+      return queryItemTemplates
+    };
+
+
+    KorAP.SaveButton = { // Whenever used is at location 0
+      onclick : function (e) {
+        var query = {
+          //As of now this content is completely irrelevant. Instead, all is stored thanks to the URL.
+        };
+        var newestQueryName = "query" + KorAP.Hint.numStoredQueries + "?q=" + this._menu._hint._inputField._el.value + "&desc=" + "ExampleDescr.";
+        //console.log(newestQueryName);
+        //Wenn voll CacheData löschen.
+        //Die Adresse muss sein: 
+        //     /query1?q=queryname?ql=...&desc=...
+        // See t/plugin/query_reference.t for examples
+        //putQuery will stringify it for you
+        KorAP.API.putQuery(newestQueryName,query,console.log());
+        KorAP.Hint.setNumQueries(); //Set value to something meaningful
+        //console.log(JSON.stringify(query));
+        this.menu("-").show();
+        //e.halt();
+      },
+      defaultTextValue : "Save Query"
+    };
+
+    KorAP.DisplayQueriesButton = { // Whenever used is at location 1
+      onclick : function (e) {
+        KorAP.API.getQueryList(KorAP.Hint.readQueries,console.log);
+        this.menu("-").show();
+        //e.halt();
+      },
+      defaultTextValue : "Display Stored Queries"
+    };
+
+
+    KorAP.Hint.menu("-").container().addItem(KorAP.SaveButton); //must be added to a specific context menu.
+    KorAP.Hint.menu("-").container().addItem(KorAP.DisplayQueriesButton); //must be added to a specific context menu.
+
+    KorAP.Hint.readQueries = function (JSONList) {
+      //console.log(JSONList);
+      this.menu("-").readItems(JSONListToQueryTemplates(JSONList));
+      this._hintItemMode = "REGULAR"; //alternative: "DELETE SELECTION"
+      this._deleteTheseQueries = [];
+      // add first, remove later to avoid empty lists
+      this.menu("-").container().addItem(KorAP.restoreMinusMenuButton); 
+      this.menu("-").container().addItem(KorAP.triggerDeleteModeButton);
+      this.menu("-").container().removeItemByIndex(0); //Save Button
+      this.menu("-").container().removeItemByIndex(0); //Display Button
+      this.menu("-").show();
+    }.bind(KorAP.Hint);
+
+    KorAP.Hint.unReadQueries = function () {
+      KorAP.log("unread");
+      this.menu("-").readItems(KorAP.annotationHelper["-"]);
+      this._hintItemMode = "REGULAR"; //alternative: "DELETE SELECTION"
+      this._deleteTheseQueries = [];
+      // add first, remove later to avoid empty lists
+      this.menu("-").container().addItem(KorAP.SaveButton);
+      this.menu("-").container().addItem(KorAP.DisplayQueriesButton);
+      this.menu("-").container().removeItemByIndex(0); //restoreMinusMenuButton
+      this.menu("-").container().removeItemByIndex(0); //triggerDeleteModeButton
+      this.menu("-").show();
+
+    }.bind(KorAP.Hint);
+
+
+    /**
+     * Add query panel
+     */
+    var queryPanel = queryPanelClass.create();
+
+    // Get input field
+    var sform = document.getElementById("searchform");
+    var vcView = document.getElementById('vc-view')
+    if (sform && vcView) {
+      // The views are below the query bar
+      sform.insertBefore(queryPanel.element(),vcView);
+      KorAP.Panel = KorAP.Panel || {};
+      KorAP.Panel['query'] = queryPanel;
+    }
+
+    // Load plugin server
+    KorAP.Plugin = pluginClass.create();
+    KorAP.Plugin.register
+    // Register match plugin
+    KorAP.Plugin.register({
+      'name' : 'Example New',
+      'desc' : 'Some content about cats',
+      'embed' : [{
+        'panel' : 'query',
+        'title' : 'Translate',
+        'classes' : ['translate'],
+        'onClick' : {
+          "template" : "http://localhost:3003/demo/plugin-client.html"
+        }
+      },{
+        'panel' : 'query',
+        'title' : 'Glemm',
+        'classes' : ['glemm'],
+        'onClick' : {
+          "action":"toggle",
+          "template" : "http://localhost:3003/demo/plugin-client.html"
+        }
+      }]
+    });
+
+    // Register match plugin
+    KorAP.Plugin.register({
+      'name' : 'Glimpse',
+      'desc' : 'Shorten all queries',
+      'embed' : [{
+        'panel' : 'query',
+        'title' : 'Glimpse',
+        'classes' : ['glimpse'],
+        'onClick' : {
+          "action" : "toggle",
+          "template" : "http://localhost:3003/demo/plugin-client.html"
+        }
+      }]
+    });
+    
+    console.log(KorAP.Hint);
+  });
+});
+
+function demoAlert (pos, msg) {
+  if (KorAP.hint !== undefined)
+    KorAP.Hint.alert(pos, msg);
+}