diff --git a/public/js/demo/about.html b/public/js/demo/about.html
new file mode 100644
index 0000000..8381ae5
--- /dev/null
+++ b/public/js/demo/about.html
@@ -0,0 +1,102 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Tutorial demo</title>
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+  </head>
+  <body class="embedded">
+    <div id="sidebar" tabindex="0" class="active">
+      <h2>Tutorial</h2>
+      <nav>
+	<ul>
+	  <li>About ...
+	    <ul>
+	      <li>Kalamar</li>
+	      <li>Koral</li>
+	      <li>Kustvakt</li>
+	      <li>Krill</li>
+	      <!-- <li>Karang</li> -->
+	    </ul>
+	  </li>
+	  <li>Query Languages
+	    <ul>
+	      <li>Cosmas II</li>
+	      <li>Poliqarp</li>
+	      <li>Annis QL</li>
+	      <li>CQL</li>
+	      <li>RegExp</li>
+	    </ul>
+	  </li>
+	  <li>Data
+	    <ul>
+	      <li>Corpora
+		<ul>
+		  <li>DeReKo</li>
+		</ul>
+	      </li>
+	      <li>Annotations
+		<ul>
+		  <li>Connexor</li>
+		  <li>Mate</li>
+		  <li>TreeTagger</li>
+		</ul>
+	      </li>
+	    </ul>
+	  </li>
+	  <li>API
+	    <ul>
+	      <li>KoralQuery</li>
+	      <li>Search API</li>
+	      <li>Match Information API</li>
+	      <li>User API</li>
+	    </ul>
+	  </li>
+	</ul>
+      </nav>
+    </div>
+    <main class="tutorial">
+      <h2>KorAP-Tutorial</h2>
+      <section id="tut-intro">
+	<h3>Frontend Features</h3>
+	<p>This frontend ...</p>
+      </section>
+
+      <section id="tut-examples">
+	<h3>Example Queries</h3>
+	<p><strong>Poliqarp</strong>: Find all occurrences of the lemma &quot;baum&quot; as annotated by the <a href="#">default foundry</a>.</p>
+	<pre class="query tutorial" data-query="[base=Baum]" data-query-language="poliqarp"><code>[base=Baum]</code></pre>
+      </section>
+
+      <section id="tut-caveats">
+	<h3>Caveats</h3>
+	<p>Memcheck is not perfect; it occasionally produces false positives, and there are mechanisms for suppressing these (see Suppressing errors in the Valgrind User Manual). However, it is typically right 99% of the time, so you should be wary of ignoring its error messages. After all, you wouldn’t ignore warning messages produced by a compiler, right?</p>
+	<p>The suppression mechanism is also useful if Memcheck is reporting errors in library code that you cannot change. The default suppression set hides a lot of these, but you may come across more. Memcheck cannot detect every memory error your program has. For example, it can’t detect out-of-range reads or writes to arrays that are allocated statically or on the stack. But it should detect many errors that could crash your program (eg. cause a segmentation fault).</p>
+	<p>Try to make your program so clean that Memcheck reports no errors. Once you achieve this state, it is much easier to see when changes to the program cause Memcheck to report new errors. Experience from several years of Memcheck use shows that it is possible to make even huge programs run Memcheck-clean. For example, large parts of KDE, OpenOffice.org and Firefox are Memcheck-clean, or very close to it.</p>
+      </section>
+      <section id="tut-more-information">
+	<h3>More information</h3>
+	<p>Please consult the Valgrind FAQ and the Valgrind User Manual, which have much more information. Note that the other tools in the Valgrind distribution can be invoked with the <code>--tool</code> option.</p>
+      </section>
+      <section id="tut-overview">
+	<h3>An Overview of Valgrind</h3>
+	  <p>Valgrind is an instrumentation framework for building dynamic analysis tools. It comes with a set of tools each of which performs some kind of debugging, profiling, or similar task that helps you improve your programs. Valgrind’s architecture is modular, so new tools can be created easily and without disturbing the existing structure.</p>
+	  <p>A number of useful tools are supplied as standard.</p>
+	  <ol>
+	    <li><strong>Memcheck</strong> is a memory error detector. It helps you make your programs, particularly those written in C and C++, more correct.</li>
+	    <li><strong>Cachegrind</strong> is a cache and branch-prediction profiler. It helps you make your programs run faster.</li>
+	    <li><strong>Callgrind</strong> is a call-graph generating cache profiler. It has some overlap with Cachegrind, but also gathers some information that Cachegrind does not.</li>
+	    <li><strong>Helgrind</strong> is a thread error detector. It helps you make your multi-threaded programs more correct.</li>
+	    <li><strong>DRD</strong> is also a thread error detector. It is similar to Helgrind but uses different analysis techniques and so may find different problems.</li>
+	    <li><strong>Massif</strong> is a heap profiler. It helps you make your programs use less memory.</li>
+	    <li><strong>DHAT</strong> is a different kind of heap profiler. It helps you understand issues of block lifetimes, block utilisation, and layout inefficiencies.</li>
+	    <li><strong>SGcheck</strong> is an experimental tool that can detect overruns of stack and global arrays. Its functionality is complementary to that of Memcheck: SGcheck finds problems that Memcheck can’t, and vice versa.</li>
+	    <li><strong>BBV</strong> is an experimental SimPoint basic block vector generator. It is useful to people doing computer architecture research and development.</li>
+	  </ol>
+	  <p>There are also a couple of minor tools that aren’t useful to most users: Lackey is an example tool that illustrates some instrumentation basics; and Nulgrind is the minimal Valgrind tool that does no analysis or instrumentation, and is only useful for testing purposes. Valgrind is closely tied to details of the CPU and operating system, and to a lesser extent, the compiler and basic C libraries. Nonetheless, it supports a number of widely-used platforms, listed in full at <a href="http://www.valgrind.org/">valgrind.org</a>.</p>
+	  <p>Valgrind is built via the standard Unix ./configure, make, make install process; full details are given in the README file in the distribution.</p>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/public/js/demo/all.html b/public/js/demo/all.html
index 26337fa..7809da4 100644
--- a/public/js/demo/all.html
+++ b/public/js/demo/all.html
@@ -4,13 +4,19 @@
     <title>CSS demo</title>
     <meta charset="utf-8" />
     <script src="../lib/dagre/dagre.min.js"></script>
-    <script src="../src/util.js"></script>
+    <script src="../src/api.js"></script>
     <script src="../src/hint.js"></script>
     <script src="../src/match.js"></script>
     <script src="../src/menu.js"></script>
     <script src="../src/vc.js"></script>
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+    <script src="../src/util.js"></script>
     <script src="./all.js"></script>
     <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script>
+      KorAP.URL = 'http://localhost:3000';
+    </script>
   </head>
   <body>
     <div id="kalamar-bg"></div>
@@ -28,8 +34,9 @@
 	  <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i>
 -->
 	</div>
-	<div id="vc"></div>
-	in Wikipedia
+	<div id="vc-view"></div>
+	in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
+	<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
 	with <span class="select">
 <!-- Change this to js-menu -->
 	  <select name="ql" id="ql-field">
@@ -48,11 +55,16 @@
 	  <label for="q-cutoff-field"><span></span>Glimpse</label>
 
 	  <!-- Todo: open tutorial - like openTutorial() -->
-	  <a href="/about" title="Tutorial" class="tutorial"><span>Tutorial</span></a>
-
+	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
 	</div>
       </form>
     </header>
+
+    <div id="sidebar" tabindex="0">
+      <h2>Tutorial</h2>
+      <p>Hui</p>
+    </div>
+
     <main>
       <div class="resultinfo">
 	<div id="pagination">
@@ -73,10 +85,10 @@
 	      data-doc-id="WWW"
 	      data-text-id="03313"
 	      data-match-id="p102-103"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-WWW.03313-p102-103">
 	    <div>
-	      <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><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      <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>
 	      <!-- only inject via javascript! -->
 	    </div>
 	    <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
@@ -93,7 +105,7 @@
 	      data-doc-id="FFF"
 	      data-text-id="01460"
 	      data-match-id="p119-120"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-FFF.01460-p119-120">
 	    <div>
 	      <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
@@ -111,7 +123,7 @@
 	      data-doc-id="HHH"
 	      data-text-id="06056"
 	      data-match-id="p2564-2565"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
 	      id="WPD-HHH.06056-p2564-2565">
 	    <div>
 	      <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
diff --git a/public/js/demo/all.js b/public/js/demo/all.js
index dc1e051..0a72f73 100644
--- a/public/js/demo/all.js
+++ b/public/js/demo/all.js
@@ -95,6 +95,46 @@
   "</span>" +
   "<span class=\"context-right\"></span>";
 
+var treeSnippet2 =
+  "<span class=\"context-left\"><\/span>"+
+  "<span class=\"match\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">HDTV<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:NPA\">" +
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">Samples<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">from<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">European<\/span>"+
+  "<\/span>"+
+  "<\/span> ("+
+  "<span title=\"xip\/c:INS\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">other<\/span>"+
+  "<\/span>) "+
+  "<span title=\"xip\/c:ADV\">broadcasters<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:VERB\">test<\/span> "+
+  "<span title=\"xip\/c:ADV\">transmissions<\/span> "+
+  "<span title=\"xip\/c:PREP\">in<\/span> "+
+  "<span title=\"xip\/c:NOUN\">Europe<\/span>"+
+  "<\/span>"+
+  "<span class=\"context-right\"><\/span>";
+
 var menuContent = [
     ['cnx/c', 'cnx', 'c'],
     ['mate/c', 'mate', 'c'],
@@ -379,12 +419,12 @@
 
 // Parse and show the table
 // Override getMatchInfo API call
-KorAP.API.getMatchInfo = function(match, callObj) {
+KorAP.API.getMatchInfo = function(match, callObj, cb) {
   if (callObj["spans"] !== undefined && callObj["spans"] === true) {
-    return { "snippet": treeSnippet };
+    cb({ "snippet": treeSnippet2 });
   }
   else {
-    return { "snippet": snippet };
+    cb({ "snippet": snippet });
   }
 };
 
@@ -392,19 +432,19 @@
 /**
  * Do some things at the beginning.
  */
-window.onload = function () {
+document.addEventListener('DOMContentLoaded', function () {
 
   // Decorate actions
-  KorAP.init();
+  var init = KorAP.init();
 
   var menu = KorAP.MatchTreeMenu.create(
     undefined,
     menuContent
   );
 
-  var vc = KorAP.VirtualCollection.render(vcExample);
-  document.getElementById('vc').appendChild(vc.element());
+  // document.getElementById('vc-choose').click();
 
+//  init.tutorial.show();
 
   // Don't hide!!!
   menu.hide = function () {};
@@ -412,4 +452,4 @@
   menu.limit(3);
   menu.show();
   menu.focus();
-};
+});
diff --git a/public/js/demo/matchSort.html b/public/js/demo/matchSort.html
new file mode 100644
index 0000000..860560e
--- /dev/null
+++ b/public/js/demo/matchSort.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Match demo</title>
+    <meta charset="utf-8" />
+    <link type="text/css"
+	  rel="stylesheet"
+	  href="../../css/build/kalamar.css"></link>
+    <style type="text/css"
+	   rel="stylesheet">
+body {
+  background-color: #ffa500;
+}
+    </style>
+  </head>
+  <body>
+    <div id="search">
+      <ol class="align-left">
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-match-id="p102-103"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <div>
+	    <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><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	  </div>
+	  <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	</li>
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <ol>
+	    <li data-match-id="p102-103">
+	      <div>
+		<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><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	    <li data-match-id="p108-109">
+	      <div>
+		<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><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	  </ol>
+	  <span class="matchMore">+5</span>
+	</li>
+      </ol>
+    </div>
+
+
+    <p>Sort by</p>
+    <p>click auf ein Item gibt ihm höchste Priorität, Klick auf asc/desc ändert die Sortierung, Klick auf ein aktives Feld deaktiviert. Sortiert wird nur nach Klick auf (okay) if prefix feld</p>
+    <ul class="menu sort">
+      <li class="active">CorpusID (asc|desc)</li>
+      <li class="active">Author (asc|desc)</li>
+      <li>Date</li>
+      <span class="pref right" style="right: 0; left: auto;">Sortieren</span>
+    </ul>
+
+  </body>
+</html>
diff --git a/public/js/demo/session.html b/public/js/demo/session.html
new file mode 100644
index 0000000..59cfe4f
--- /dev/null
+++ b/public/js/demo/session.html
@@ -0,0 +1,44 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Cookie demo</title>
+    <script src="../src/session.js"></script>
+    <script>
+
+var cookey;
+
+function add (val) {
+  var list = document.getElementById('number');
+  list.textContent += '-' + val;
+  cookey.set('n', list.textContent);
+};
+
+function removeCookie () {
+  cookey.clear();
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  cookey = KorAP.Session.create('peter');
+  document.getElementById('number').textContent = cookey.get('n') || '';
+
+  var elements =   document.getElementsByClassName('num');
+  for (var i = 0; i < elements.length; i++) {
+    elements[i].addEventListener(
+      'click',
+      function (e) {
+        add(this.textContent);
+      }
+    );
+  };
+});
+
+    </script>
+  </head>
+  <body>
+    <div id="number"></div>
+    <span class="num">1</span>
+    <span class="num">2</span>
+    <span class="num">3</span>
+    <div onclick="removeCookie()">remove</div>
+  </body>
+</html>