diff --git a/dev/demo/about.html b/dev/demo/about.html
index 9dd3c29..ee41571 100644
--- a/dev/demo/about.html
+++ b/dev/demo/about.html
@@ -1,10 +1,9 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <title>Tutorial demo</title>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script src="../js/src/session.js"></script>
-    <script src="../js/src/tutorial.js"></script>
+    <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
   </head>
   <body class="embedded">
     <div id="sidebar" tabindex="0" class="active">
@@ -14,13 +13,14 @@
 -->
 	<nav>
 	  <ul>
-	    <li><a href="/doc/korap">KorAP</a>
+	    <li><a href="/doc/korap" class="active">KorAP</a>
 	      <ul>
-		<li><a href="/doc/kalamar" class="active">Kalamar</a></li>
-		<li><a href="/doc/koral">Koral</a></li>
+		<!-- Versionsnummer -->
+		<li><a href="/doc/kalamar">Kalamar</a></li>
 		<li><a href="/doc/kustvakt">Kustvakt</a></li>
+		<li><a href="/doc/koral">Koral</a></li>
 		<li><a href="/doc/krill">Krill</a></li>
-		<!-- <li>Karang</li> -->
+		<li><a href="/doc/karang">Karang</a></li>
 	      </ul>
 	    </li>
 	    <li><a href="/doc/ql">Query Languages</a>
@@ -58,12 +58,19 @@
 	      </ul>
 -->
 	    </li>
+	    <li><a href="/doc/faq">FAQ</a>
 	  </ul>
 	</nav>
       </div>
     </div>
     <main class="tutorial">
-      <h2>KorAP-Tutorial</h2>
+      <h2>KorAP</h2>
+
+      <object data="../img/korap-overview.svg#korap"
+	      type="image/svg+xml"
+	      alt="KorAP-Overview"
+	      id="overview"></object>
+
       <section id="tut-intro">
 	<h3>Frontend Features</h3>
 	<p>This frontend ...</p>
diff --git a/dev/demo/all.html b/dev/demo/all.html
index a1a4cae..fcd72a5 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -1,14 +1,19 @@
  <!DOCTYPE html>
 <html>
   <head>
-    <title>CSS demo</title>
+    <title>Complete Demo</title>
     <meta charset="utf-8" />
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+    <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
   </head>
   <body>
     <div id="kalamar-bg"></div>
     <header>
       <a href="/" class="logo"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
+
+      <a href="#">Feedback</a>
+      <a href="#">Login</a>
+
       <form autocomplete="off" action="/kalamar">
 	<div id="searchbar">
 	  <input type="search"
@@ -46,8 +51,12 @@
     </header>
 
     <div id="sidebar" tabindex="0">
-      <h2>Tutorial</h2>
-      <p>Hui</p>
+      <h2>Einstellungen</h2>
+      <p>Anzahl Treffer pro Seite</p>
+      <p>Kontext:</p>
+      <p>200 Zeichen/Token - 200 Zeichen/Token</p>
+      <p>1 Satz 1 Paragraph</p>
+      <a>Deutsch|Englisch</a>
     </div>
 
     <main>
@@ -142,20 +151,13 @@
 
     <footer>
       <a href="/doc/KorAP">About</a>
+      <a href="http://korap.ids-mannheim.de/">About</a>
+      <a href="#">V 0.14</a>
     </footer>
 
-    <script src="../js/lib/dagre/dagre.min.js"></script>
-    <script src="../js/src/api.js"></script>
-    <script src="../js/src/hint.js"></script>
-    <script src="../js/src/match.js"></script>
-    <script src="../js/src/menu.js"></script>
-    <script src="../js/src/vc.js"></script>
-    <script src="../js/src/session.js"></script>
-    <script src="../js/src/tutorial.js"></script>
-    <script src="../js/src/init.js"></script>
     <script>
+      var KorAP = KorAP || {};
       KorAP.URL = 'http://localhost:3000';
     </script>
-    <script src="./all.js"></script>
   </body>
 </html>
diff --git a/dev/demo/all.js b/dev/demo/all.js
index 5ce1266..29dd405 100644
--- a/dev/demo/all.js
+++ b/dev/demo/all.js
@@ -271,8 +271,7 @@
   ]
 };
 
-
-KorAP.hintArray = {
+var hintArray = {
   "-" : [
     ["Connexor",   "cnx/",     "Constituency, Lemma, Morphology, Part-of-Speech, Syntax"],
     ["CoreNLP",    "corenlp/", "Named Entities"],
@@ -417,44 +416,48 @@
   ]
 };
 
-// Parse and show the table
-// Override getMatchInfo API call
-KorAP.API.getMatchInfo = function(match, callObj, cb) {
-  if (callObj["spans"] !== undefined && callObj["spans"] === true) {
-    cb({ "snippet": treeSnippet2 });
+
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
   }
-  else {
-    cb({ "snippet": snippet });
-  }
-};
+});
 
+require(['init'], function (init) {
 
-/**
- * Do some things at the beginning.
- */
-document.addEventListener('DOMContentLoaded', function () {
+  KorAP.hintArray = hintArray;
 
-  // Decorate actions
-  var init = KorAP.init();
+  // Parse and show the table
+  // Override getMatchInfo API call
+  KorAP.API.getMatchInfo = function(match, callObj, cb) {
+    if (callObj["spans"] !== undefined && callObj["spans"] === true) {
+      cb({ "snippet": treeSnippet2 });
+    }
+    else {
+      cb({ "snippet": snippet });
+    }
+  };
+
+  /**
+   * Do some things at the beginning.
+   */
 
   // document.getElementById('vc-choose').click();
-
   // init.tutorial.show();
 
-/*
+  /*
+    KorAP.HintMenu.hide = function () {};
+    init.hint.show();
 
-  KorAP.HintMenu.hide = function () {};
-  init.hint.show();
-
-
-  var menu = KorAP.MatchTreeMenu.create(
-    undefined,
-    menuContent
-  );
-  menu.hide = function () {};
-  document.getElementById('menu').appendChild(menu.element());
-  menu.limit(3);
-  menu.show();
-  menu.focus();
-*/
+    var menu = KorAP.MatchTreeMenu.create(
+      undefined,
+      menuContent
+    );
+    menu.hide = function () {};
+    document.getElementById('menu').appendChild(menu.element());
+    menu.limit(3);
+    menu.show();
+    menu.focus();
+  */
 });
diff --git a/dev/demo/hint.html b/dev/demo/hint.html
index 240f370..7d93d73 100644
--- a/dev/demo/hint.html
+++ b/dev/demo/hint.html
@@ -3,229 +3,8 @@
   <head>
     <title>Hint demo</title>
     <meta charset="utf-8" />
-    <script src="../js/src/menu.js"></script>
-    <script src="../js/src/hint.js"></script>
+    <script data-main="hintdemo.js" src="../js/lib/require.js" async="async"></script>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script>
-// http://www.nlpado.de/~sebastian/software/ner_german.shtml
-// http://www.cnts.ua.ac.be/conll2003/ner/
-var namedEntities = [
-  ["I-LOC",  "I-LOC ",  "Location"],
-  ["I-MISC", "I-MISC ", "Miscellaneous"],
-  ["I-ORG",  "I-ORG ",  "Organization"],
-  ["I-PER",  "I-PER ",  "Person"]
-];
-
-// http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
-// http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
-var sttsArray = [
-  // "$.", "$(", "$,"
-  ["ADJA","ADJA ", "Attributive Adjective"],
-  ["ADJD","ADJD ", "Predicative Adjective"],
-  ["ADV","ADV ", "Adverb"],
-  ["APPO","APPO ", "Postposition"],
-  ["APPR","APPR ", "Preposition"],
-  ["APPRART","APPRART ", "Preposition with Determiner"],
-  ["APZR","APZR ","Right Circumposition"],
-  ["ART","ART ", "Determiner"],
-  ["CARD","CARD ", "Cardinal Number"],
-  ["FM","FM ", "Foreign Material"],
-  ["ITJ","ITJ ", "Interjection"],
-  ["KOKOM","KOKOM ", "Comparison Particle"],
-  ["KON","KON ", "Coordinating Conjuncion"],
-  ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
-  ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
-  ["NE","NE ", "Named Entity"],
-  ["NN","NN ", "Normal Nomina"],
-  ["PAV", "PAV ", "Pronominal Adverb"],
-  ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
-  ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
-  ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
-  ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
-  ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
-  ["PPER","PPER ", "Personal Pronoun"],
-  ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
-  ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
-  ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
-  ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
-  ["PRF","PRF ", "Reflexive Pronoun"],
-  ["PROAV","PROAV ", "Pronominal Adverb"],
-  ["PTKA","PTKA ","Particle with Adjective"],
-  ["PTKANT","PTKANT ", "Answering Particle"],
-  ["PTKNEG","PTKNEG ", "Negation Particle"],
-  ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
-  ["PTKZU","PTKZU ", "'zu' Particle"],
-  ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
-  ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
-  ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
-  ["TRUNC","TRUNC ","Truncated"],
-  ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
-  ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
-  ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
-  ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
-  ["VMFIN","VMFIN ", "Modal Finite Verb"],
-  ["VMINF","VMINF ", "Modal Infinite Verb"],
-  ["VMPP","VMPP ", "Modal Perfect Participle"],
-  ["VVFIN","VVFIN ","Finite Verb"],
-  ["VVIMP","VVIMP ", "Finite Imperative Verb"],
-  ["VVINF","VVINF ", "Infinite Verb"],
-  ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
-  ["VVPP","VVPP ", "Perfect Participle"],
-  ["XY", "XY ", "Non-Word"]
-];
-
-var mateSttsArray = sttsArray.slice(0);
-mateSttsArray.push(
-  ["<root-POS>","<root-POS>","Root Part of Speech"]
-);
-
-
-var hintArray = {
-  "-" : [
-    ["Connexor",   "cnx/",     "Constituency, Lemma, Morphology, Part-of-Speech, Syntax"],
-    ["CoreNLP",    "corenlp/", "Named Entities"],
-    ["Mate",       "mate/",     "Lemma, Morphology, Part-of-Speech"],
-    ["OpenNLP",    "opennlp/", "Part-of-Speech"],
-    ["TreeTagger", "tt/",      "Lemma, Part-of-Speech"],
-    ["Xerox Parser", "xip/",   "Constituency, Lemma, Part-of-Speech"]
-  ],
-  "corenlp/" : [
-    ["Named Entity", "ne=" , "Combined"],
-    ["Named Entity", "ne_dewac_175m_600=" , "ne_dewac_175m_600"],
-    ["Named Entity", "ne_hgc_175m_600=",    "ne_hgc_175m_600"]
-  ],
-  "corenlp/ne=" : namedEntities,
-  "corenlp/ne_dewac_175m_600=" : namedEntities,
-  "corenlp/ne_hgc_175m_600=" : namedEntities,
-  "cnx/" : [
-    ["Constituency", "c="],
-    ["Lemma", "l="],
-    ["Morphology", "m="],
-    ["Part-of-Speech", "p="],
-    ["Syntax", "syn="]
-  ],
-  "cnx/c=" : [
-    ["np", "np ", "Nominal Phrase"]
-  ],
-  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
-  "cnx/m=" : [
-    ["Abbr","Abbr ", "Nouns: Abbreviation"],
-    ["CMP","CMP ", "Adjective: Comparative"],
-    ["IMP", "IMP ", "Mood: Imperative"],
-    ["IND", "IND ", "Mood: Indicative"],
-    ["INF", "INF ", "Infinitive"],
-    ["ORD","ORD ", "Numeral: Ordinal"],
-    ["PAST", "PAST ", "Tense: past"],
-    ["PCP", "PCP ", "Participle"],
-    ["PERF", "PERF ", "Perfective Participle"],
-    ["PL","PL ", "Nouns: Plural"],
-    ["PRES", "PRES ", "Tense: present"],
-    ["PROG", "PROG ", "Progressive Participle"],
-    ["Prop","Prop ", "Nouns: Proper Noun"],
-    ["SUB", "SUB ", "Mood: Subjunctive"],
-    ["SUP","SUP ", "Adjective: Superlative"]
-  ],
-  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
-  "cnx/p=" : [
-    ["A", "A ", "Adjective"],
-    ["ADV", "ADV ", "Adverb"],
-    ["CC", "CC ", "Coordination Marker"],
-    ["CS", "CS ", "Clause Marker"],
-    ["DET", "DET ", "Determiner"],
-    ["INTERJ", "INTERJ ", "Interjection"],
-    ["N", "N ", "Noun"],
-    ["NUM", "NUM ", "Numeral"],
-    ["PREP", "PREP ", "Preposition"],
-    ["PRON", "PRON ", "Pro-Nominal"],
-    ["V", "V ", "Verb"]
-  ],
-  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/syntax.html
-  "cnx/syn=" : [
-    ["@ADVL", "@ADVL ", "Adverbial Head"],
-    ["@AUX", "@AUX ", "Auxiliary Verb"],
-    ["@CC", "@CC ", "Coordination"]
-    ["@MAIN", "@MAIN ", "Main Verb"],
-    ["@NH", "@NH ", "Nominal Head"],
-    ["@POSTMOD", "@POSTMOD ", "Postmodifier"],
-    ["@PREMARK", "@PREMARK ", "Preposed Marker"],
-    ["@PREMOD", "@POSTMOD ", "Premodifier"]
-  ],
-  "opennlp/" : [
-    ["Part-of-Speech", "p="]
-  ],
-  "opennlp/p=" : sttsArray,
-  "xip/" : [
-    ["Constituency", "c="],
-    // Inactive: ["Dependency", "d="],
-    ["Lemma", "l="],
-    ["Part-of-Speech", "p="],
-  ],
-  // "xip/c=" : [],
-  // Inactive: "xip/d=" : [],
-  // "xip/p=" : [],
-  "tt/" : [
-    ["Lemma", "l="],
-    ["Part-of-Speech", "p="]
-  ],
-  "tt/p=" : sttsArray,
-  "mate/" : [
-    // Inactive: "d" : ["d=", "Dependency"],
-    ["Lemma", "l="],
-    ["Morphology", "m="],
-    ["Part-of-Speech", "p="]
-  ],
-  // Inactive: mate/d=
-  "mate/p=" : mateSttsArray,
-  "mate/m=" : [
-    ["Case", "case:"],
-    ["Degree", "degree:"],
-    ["Gender", "gender:"],
-    ["Mood", "mood:"],
-    ["Number", "number:"],
-    ["Person", "person:"],
-    ["Tense","tense:"],
-    ["No type", "<no-type> "]
-  ],
-  "mate/m=case:" : [
-    ["acc", "acc ", "Accusative"],
-    ["dat","dat ", "Dative"],
-    ["gen", "gen ","Genitive"],
-    ["nom","nom ", "Nominative"],
-    ["*","* ", "Undefined"]
-  ],
-  "mate/m=degree:" : [
-    ["comp","comp ", "Comparative"],
-    ["pos","pos ", "Positive"],
-    ["sup","sup ", "Superative"]
-  ],
-  "mate/m=gender:" : [
-    ["fem", "fem ", "Feminium"],
-    ["masc", "masc ", "Masculinum"],
-    ["neut","neut ", "Neuter"],
-    ["*","* ","Undefined"]
-  ],
-  "mate/m=mood:" : [
-    ["imp","imp ", "Imperative"],
-    ["ind","ind ", "Indicative"],
-    ["subj","subj ", "Subjunctive"]
-  ],
-  "mate/m=number:" : [
-    ["pl","pl ","Plural"],
-    ["sg","sg ","Singular"],
-    ["*","* ","Undefined"]
-  ],
-  "mate/m=person:" : [
-    ["1","1 ", "First Person"],
-    ["2","2 ", "Second Person"],
-    ["3","3 ", "Third Person"]
-  ],
-  "mate/m=tense:" : [
-    ["past","past ", "Past"],
-    ["pres","pres ", "Present"]
-  ]
-};
-
-    </script>
   </head>
   <body>
     <header>
@@ -240,9 +19,5 @@
 	</div>
       </form>
     </header>
-    <script>
-KorAP.hintArray = hintArray;
-var input = KorAP.Hint.create();
-    </script>
   </body>
 </html>
diff --git a/dev/demo/hintdemo.js b/dev/demo/hintdemo.js
new file mode 100644
index 0000000..6c2303b
--- /dev/null
+++ b/dev/demo/hintdemo.js
@@ -0,0 +1,231 @@
+// http://www.nlpado.de/~sebastian/software/ner_german.shtml
+// http://www.cnts.ua.ac.be/conll2003/ner/
+var namedEntities = [
+  ["I-LOC",  "I-LOC ",  "Location"],
+  ["I-MISC", "I-MISC ", "Miscellaneous"],
+  ["I-ORG",  "I-ORG ",  "Organization"],
+  ["I-PER",  "I-PER ",  "Person"]
+];
+
+// http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+// http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+var sttsArray = [
+  // "$.", "$(", "$,"
+  ["ADJA","ADJA ", "Attributive Adjective"],
+  ["ADJD","ADJD ", "Predicative Adjective"],
+  ["ADV","ADV ", "Adverb"],
+  ["APPO","APPO ", "Postposition"],
+  ["APPR","APPR ", "Preposition"],
+  ["APPRART","APPRART ", "Preposition with Determiner"],
+  ["APZR","APZR ","Right Circumposition"],
+  ["ART","ART ", "Determiner"],
+  ["CARD","CARD ", "Cardinal Number"],
+  ["FM","FM ", "Foreign Material"],
+  ["ITJ","ITJ ", "Interjection"],
+  ["KOKOM","KOKOM ", "Comparison Particle"],
+  ["KON","KON ", "Coordinating Conjuncion"],
+  ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+  ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+  ["NE","NE ", "Named Entity"],
+  ["NN","NN ", "Normal Nomina"],
+  ["PAV", "PAV ", "Pronominal Adverb"],
+  ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+  ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+  ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+  ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+  ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+  ["PPER","PPER ", "Personal Pronoun"],
+  ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+  ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+  ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+  ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+  ["PRF","PRF ", "Reflexive Pronoun"],
+  ["PROAV","PROAV ", "Pronominal Adverb"],
+  ["PTKA","PTKA ","Particle with Adjective"],
+  ["PTKANT","PTKANT ", "Answering Particle"],
+  ["PTKNEG","PTKNEG ", "Negation Particle"],
+  ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+  ["PTKZU","PTKZU ", "'zu' Particle"],
+  ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+  ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+  ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+  ["TRUNC","TRUNC ","Truncated"],
+  ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+  ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+  ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+  ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+  ["VMFIN","VMFIN ", "Modal Finite Verb"],
+  ["VMINF","VMINF ", "Modal Infinite Verb"],
+  ["VMPP","VMPP ", "Modal Perfect Participle"],
+  ["VVFIN","VVFIN ","Finite Verb"],
+  ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+  ["VVINF","VVINF ", "Infinite Verb"],
+  ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+  ["VVPP","VVPP ", "Perfect Participle"],
+  ["XY", "XY ", "Non-Word"]
+];
+
+var mateSttsArray = sttsArray.slice(0);
+mateSttsArray.push(
+  ["<root-POS>","<root-POS>","Root Part of Speech"]
+);
+
+
+var hintArray = {
+  "-" : [
+    ["Connexor",   "cnx/",     "Constituency, Lemma, Morphology, Part-of-Speech, Syntax"],
+    ["CoreNLP",    "corenlp/", "Named Entities"],
+    ["Mate",       "mate/",     "Lemma, Morphology, Part-of-Speech"],
+    ["OpenNLP",    "opennlp/", "Part-of-Speech"],
+    ["TreeTagger", "tt/",      "Lemma, Part-of-Speech"],
+    ["Xerox Parser", "xip/",   "Constituency, Lemma, Part-of-Speech"]
+  ],
+  "corenlp/" : [
+    ["Named Entity", "ne=" , "Combined"],
+    ["Named Entity", "ne_dewac_175m_600=" , "ne_dewac_175m_600"],
+    ["Named Entity", "ne_hgc_175m_600=",    "ne_hgc_175m_600"]
+  ],
+  "corenlp/ne=" : namedEntities,
+  "corenlp/ne_dewac_175m_600=" : namedEntities,
+  "corenlp/ne_hgc_175m_600=" : namedEntities,
+  "cnx/" : [
+    ["Constituency", "c="],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="],
+    ["Syntax", "syn="]
+  ],
+  "cnx/c=" : [
+    ["np", "np ", "Nominal Phrase"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/m=" : [
+    ["Abbr","Abbr ", "Nouns: Abbreviation"],
+    ["CMP","CMP ", "Adjective: Comparative"],
+    ["IMP", "IMP ", "Mood: Imperative"],
+    ["IND", "IND ", "Mood: Indicative"],
+    ["INF", "INF ", "Infinitive"],
+    ["ORD","ORD ", "Numeral: Ordinal"],
+    ["PAST", "PAST ", "Tense: past"],
+    ["PCP", "PCP ", "Participle"],
+    ["PERF", "PERF ", "Perfective Participle"],
+    ["PL","PL ", "Nouns: Plural"],
+    ["PRES", "PRES ", "Tense: present"],
+    ["PROG", "PROG ", "Progressive Participle"],
+    ["Prop","Prop ", "Nouns: Proper Noun"],
+    ["SUB", "SUB ", "Mood: Subjunctive"],
+    ["SUP","SUP ", "Adjective: Superlative"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/p=" : [
+    ["A", "A ", "Adjective"],
+    ["ADV", "ADV ", "Adverb"],
+    ["CC", "CC ", "Coordination Marker"],
+    ["CS", "CS ", "Clause Marker"],
+    ["DET", "DET ", "Determiner"],
+    ["INTERJ", "INTERJ ", "Interjection"],
+    ["N", "N ", "Noun"],
+    ["NUM", "NUM ", "Numeral"],
+    ["PREP", "PREP ", "Preposition"],
+    ["PRON", "PRON ", "Pro-Nominal"],
+    ["V", "V ", "Verb"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/syntax.html
+  "cnx/syn=" : [
+    ["@ADVL", "@ADVL ", "Adverbial Head"],
+    ["@AUX", "@AUX ", "Auxiliary Verb"],
+    ["@CC", "@CC ", "Coordination"]
+    ["@MAIN", "@MAIN ", "Main Verb"],
+    ["@NH", "@NH ", "Nominal Head"],
+    ["@POSTMOD", "@POSTMOD ", "Postmodifier"],
+    ["@PREMARK", "@PREMARK ", "Preposed Marker"],
+    ["@PREMOD", "@POSTMOD ", "Premodifier"]
+  ],
+  "opennlp/" : [
+    ["Part-of-Speech", "p="]
+  ],
+  "opennlp/p=" : sttsArray,
+  "xip/" : [
+    ["Constituency", "c="],
+    // Inactive: ["Dependency", "d="],
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="],
+  ],
+  // "xip/c=" : [],
+  // Inactive: "xip/d=" : [],
+  // "xip/p=" : [],
+  "tt/" : [
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="]
+  ],
+  "tt/p=" : sttsArray,
+  "mate/" : [
+    // Inactive: "d" : ["d=", "Dependency"],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="]
+  ],
+  // Inactive: mate/d=
+  "mate/p=" : mateSttsArray,
+  "mate/m=" : [
+    ["Case", "case:"],
+    ["Degree", "degree:"],
+    ["Gender", "gender:"],
+    ["Mood", "mood:"],
+    ["Number", "number:"],
+    ["Person", "person:"],
+    ["Tense","tense:"],
+    ["No type", "<no-type> "]
+  ],
+  "mate/m=case:" : [
+    ["acc", "acc ", "Accusative"],
+    ["dat","dat ", "Dative"],
+    ["gen", "gen ","Genitive"],
+    ["nom","nom ", "Nominative"],
+    ["*","* ", "Undefined"]
+  ],
+  "mate/m=degree:" : [
+    ["comp","comp ", "Comparative"],
+    ["pos","pos ", "Positive"],
+    ["sup","sup ", "Superative"]
+  ],
+  "mate/m=gender:" : [
+    ["fem", "fem ", "Feminium"],
+    ["masc", "masc ", "Masculinum"],
+    ["neut","neut ", "Neuter"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=mood:" : [
+    ["imp","imp ", "Imperative"],
+    ["ind","ind ", "Indicative"],
+    ["subj","subj ", "Subjunctive"]
+  ],
+  "mate/m=number:" : [
+    ["pl","pl ","Plural"],
+    ["sg","sg ","Singular"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=person:" : [
+    ["1","1 ", "First Person"],
+    ["2","2 ", "Second Person"],
+    ["3","3 ", "Third Person"]
+  ],
+  "mate/m=tense:" : [
+    ["past","past ", "Past"],
+    ["pres","pres ", "Present"]
+  ]
+};
+
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+require(['hint','lib/domReady'], function (hintClass, domReady) {
+  KorAP.hintArray = hintArray;
+  domReady(function() {
+    hintClass.create();
+  });
+});
diff --git a/dev/demo/match.html b/dev/demo/match.html
index cb2e7ef..d586959 100644
--- a/dev/demo/match.html
+++ b/dev/demo/match.html
@@ -3,13 +3,9 @@
   <head>
     <title>Match demo</title>
     <meta charset="utf-8" />
-    <script src="../js/lib/dagre/dagre.min.js"></script>
-    <script src="../js/src/init.js"></script>
-    <script src="../js/src/menu.js"></script>
-    <script src="../js/src/match.js"></script>
+    <script data-main="matchdemo.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">
+    <style type="text/css" rel="stylesheet">
 
 body {
   background-color: #ffa500;
@@ -42,159 +38,5 @@
 	</li>
       </ol>
     </div>
-
-    <script>
-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>";
-
-var treeSnippet =
-  "<span class=\"context-left\"></span>" +
-  "<span class=\"match\">" +
-  "  <span title=\"xip/c:MC\">" +
-  "    <span title=\"xip/c:TOP\">" +
-  "      <span title=\"xip/c:PP\">" +
-  "        <span title=\"xip/c:PREP\">Mit</span>" +
-  "        <span title=\"xip/c:NP\">" +
-  "          <span title=\"xip/c:DET\">dieser</span>" +
-  "          <span title=\"xip/c:NPA\">" +
-  "            <span title=\"xip/c:NOUN\">Methode</span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" +
-  "      <span title=\"xip/c:VERB\">ist</span>" +
-  "      <span title=\"xip/c:NP\">" +
-  "        <span title=\"xip/c:PRON\">es</span>" +
-  "      </span>" +
-  "      <span title=\"xip/c:AP\">" +
-  "        <span title=\"xip/c:ADV\">nun</span>" +
-  "        <span title=\"xip/c:ADJ\">möglich</span>" +
-  "      </span>" +
-  "      <span title=\"xip/c:ADV\">z. B.</span>" +
-  "      <span title=\"xip/c:NPA\">" +
-  "        <span title=\"xip/c:NP\">" +
-  "          <span title=\"xip/c:NOUN\">Voice</span>" +
-  "        </span>" +
-  "      </span>" + "(" +
-  "      <span title=\"xip/c:INS\">" +
-  "        <span title=\"xip/c:NPA\">" +
-  "          <span title=\"xip/c:NP\">" +
-  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" + ")" +
-  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
-  "      <span title=\"xip/c:PP\">" +
-  "        <span title=\"xip/c:PREP\">in</span>" +
-  "        <span title=\"xip/c:NP\">" +
-  "          <span title=\"xip/c:PRON\">der</span>" +
-  "        </span>" +
-  "        <span title=\"xip/c:NPA\">" +
-  "          <span title=\"xip/c:NP\">" +
-  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" +
-  "      <span title=\"xip/c:INFC\">" +
-  "        <span title=\"xip/c:INS\">" +
-  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
-  "        </span>" +
-  "      </span>" +
-  "    </span>" +
-  "  </span>" +
-  "</span>" +
-  "<span class=\"context-right\"></span>";
-
-// Parse and show the table
-// Override getMatchInfo API call
-KorAP.API.getMatchInfo = function(match, callObj) {
-  if (callObj["spans"] !== undefined && callObj["spans"] === true) {
-    return { "snippet": treeSnippet };
-  }
-  else {
-    return { "snippet": snippet };
-  }
-};
-
-KorAP.init();
-    </script>
-
-    <!--
-    <div class="matchinfo">
-      <div class="matchtable">
-	<table>
-	  <thead>
-            <tr>
-	      <th>Foundry</th>
-	      <th>Layer</th>
-	      <th>Ich</th>
-	      <th>Du</th>
-	      <th>Er</th>
-	    </tr>
-	  </thead>
-	  <tbody>
-	    <tr tabindex="0">
-	      <th>Hallo</th>
-	      <th>X</th>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	    </tr>
-	    <tr tabindex="0">
-	      <th>geht</th>
-	      <th>y</th>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	    </tr>
-	    <tr tabindex="0">
-	      <th>es</th>
-	      <th>z</th>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
-	    </tr>
-	  </tbody>
-	</table>
-      </div>
-    </div>
-    -->
-
   </body>
 </html>
diff --git a/dev/demo/matchdemo.js b/dev/demo/matchdemo.js
new file mode 100644
index 0000000..56bf675
--- /dev/null
+++ b/dev/demo/matchdemo.js
@@ -0,0 +1,117 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+// Parse and show the table
+// Override getMatchInfo API call
+require(['init'], function () {
+
+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>";
+
+var treeSnippet =
+  "<span class=\"context-left\"></span>" +
+  "<span class=\"match\">" +
+  "  <span title=\"xip/c:MC\">" +
+  "    <span title=\"xip/c:TOP\">" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">Mit</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:DET\">dieser</span>" +
+  "          <span title=\"xip/c:NPA\">" +
+  "            <span title=\"xip/c:NOUN\">Methode</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:VERB\">ist</span>" +
+  "      <span title=\"xip/c:NP\">" +
+  "        <span title=\"xip/c:PRON\">es</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:AP\">" +
+  "        <span title=\"xip/c:ADV\">nun</span>" +
+  "        <span title=\"xip/c:ADJ\">möglich</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:ADV\">z. B.</span>" +
+  "      <span title=\"xip/c:NPA\">" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:NOUN\">Voice</span>" +
+  "        </span>" +
+  "      </span>" + "(" +
+  "      <span title=\"xip/c:INS\">" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" + ")" +
+  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">in</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:PRON\">der</span>" +
+  "        </span>" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:INFC\">" +
+  "        <span title=\"xip/c:INS\">" +
+  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span class=\"context-right\"></span>";
+
+  KorAP.API.getMatchInfo = function(match, callObj, cb) {
+    if (callObj["spans"] !== undefined && callObj["spans"] === true) {
+      return cb({ "snippet": treeSnippet });
+    }
+    else {
+      return cb({ "snippet": snippet });
+    }
+  };
+});
diff --git a/dev/demo/menu.html b/dev/demo/menu.html
index 13f7ae9..f6d18ea 100644
--- a/dev/demo/menu.html
+++ b/dev/demo/menu.html
@@ -3,7 +3,7 @@
   <head>
     <title>Menu demo</title>
     <meta charset="utf-8" />
-    <script src="../js/src/menu.js"></script>
+    <script data-main="menudemo.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">
 .info {
@@ -28,77 +28,5 @@
 	<div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
       </div>
     </main>
-
-    <script>
-KorAP.OwnMenuItem = {
-  create : function (params) {
-    return Object.create(KorAP.MenuItem).upgradeTo(KorAP.OwnMenuItem)._init(params);
-  },
-  content : function (content) {
-    if (arguments.length === 1) {
-      this._content = content;
-    };
-    return this._content;
-  },
-
-  // enter or click
-  onclick : function () {
-    console.log(this._name);
-  },
-
-  // right arrow
-  further : function () {
-    console.log("Further: " + this._name);
-  },
-  _init : function (params) {
-    if (params[0] === undefined)
-      throw new Error("Missing parameters");
-
-    this._name = params[0];
-    this._content = document.createTextNode(this._name);
-    this._lcField = ' ' + this.content().textContent.toLowerCase();
-
-    return this;
-  }
-};
-
-KorAP.OwnPrefix = {
-  create : function () {
-    return Object.create(KorAP.MenuPrefix)
-      .upgradeTo(KorAP.OwnPrefix)
-      ._init();
-  },
-  onclick : function () {
-    console.log('Prefix: ' + this.value());
-  }
-}
-
-KorAP.OwnMenu = {
-  create : function (params) {
-    return Object.create(KorAP.Menu)
-      .upgradeTo(KorAP.OwnMenu)
-      ._init(KorAP.OwnMenuItem, KorAP.OwnPrefix, params);
-  }
-};
-
-var menu = KorAP.OwnMenu.create([
-  ['Titel', 'title', 'string'],
-  ['Untertitel', 'subTitle', 'string'],
-  ['Veröffentlichungsdatum', 'pubDate', 'date'],
-  ['Länge', 'length', 'integer'],
-  ['Autor', 'author', 'string'],
-  ['Genre', 'genre', 'string'],
-  ['corpusID', 'corpusID', 'string'],
-  ['docID', 'docID', 'string'],
-  ['textID', 'textID', 'string']
-]);
-
-    document.getElementById('menu').appendChild(menu.element());
-
-    menu.limit(3);
-    menu.show('');
-    menu.focus();
-
-    </script>
   </body>
 </html>
diff --git a/dev/demo/menudemo.js b/dev/demo/menudemo.js
new file mode 100644
index 0000000..e089e89
--- /dev/null
+++ b/dev/demo/menudemo.js
@@ -0,0 +1,74 @@
+requirejs.config({
+  baseUrl: '../js/src'
+});
+
+require(['menu','menu/item', 'menu/prefix'], function (menuClass, itemClass, prefixClass) {
+  var OwnMenuItemClass = {
+    create : function (params) {
+      return Object.create(itemClass).upgradeTo(this)._init(params);
+    },
+    content : function (content) {
+      if (arguments.length === 1) {
+        this._content = content;
+      };
+      return this._content;
+    },
+
+    // enter or click
+    onclick : function () {
+      console.log(this._name);
+    },
+
+    // right arrow
+    further : function () {
+      console.log("Further: " + this._name);
+    },
+    _init : function (params) {
+      if (params[0] === undefined)
+	throw new Error("Missing parameters");
+
+      this._name = params[0];
+      this._content = document.createTextNode(this._name);
+      this._lcField = ' ' + this.content().textContent.toLowerCase();
+      
+      return this;
+    }
+  };
+
+  var OwnPrefixClass = {
+    create : function () {
+      return Object.create(prefixClass)
+	.upgradeTo(this)
+	._init();
+    },
+    onclick : function () {
+      console.log('Prefix: ' + this.value());
+    }
+  };
+
+  var OwnMenu = {
+    create : function (params) {
+      return Object.create(menuClass)
+      .upgradeTo(this)
+      ._init(OwnMenuItemClass, OwnPrefixClass, params);
+    }
+  };
+
+  var menu = OwnMenu.create([
+    ['Titel', 'title', 'string'],
+    ['Untertitel', 'subTitle', 'string'],
+    ['Veröffentlichungsdatum', 'pubDate', 'date'],
+    ['Länge', 'length', 'integer'],
+    ['Autor', 'author', 'string'],
+    ['Genre', 'genre', 'string'],
+    ['corpusID', 'corpusID', 'string'],
+    ['docID', 'docID', 'string'],
+    ['textID', 'textID', 'string']
+  ]);
+
+  document.getElementById('menu').appendChild(menu.element());
+
+  menu.limit(3);
+  menu.show('');
+  menu.focus();
+});
diff --git a/dev/demo/session.html b/dev/demo/session.html
index 034771c..5b4ae6b 100644
--- a/dev/demo/session.html
+++ b/dev/demo/session.html
@@ -3,37 +3,7 @@
   <head>
     <title>Cookie demo</title>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script src="../js/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>
+    <script data-main="sessiondemo.js" src="../js/lib/require.js" async="async"></script>
   </head>
   <body>
     <div id="number"></div>
diff --git a/dev/demo/sessiondemo.js b/dev/demo/sessiondemo.js
new file mode 100644
index 0000000..7fd9b73
--- /dev/null
+++ b/dev/demo/sessiondemo.js
@@ -0,0 +1,35 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+var cookey;
+
+function add (val) {
+  var list = document.getElementById('number');
+  list.textContent += '-' + val;
+  cookey.set('n', list.textContent);
+};
+
+function removeCookie () {
+  cookey.clear();
+};
+
+define(['session', 'lib/domReady'], function (sessionClass, domReady) {
+  domReady(function () {
+    cookey = sessionClass.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);
+	}
+      );
+    };
+  });
+})
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 353b309..9eb7648 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -3,8 +3,7 @@
   <head>
     <title>Virtual Collection demo</title>
     <meta charset="utf-8" />
-    <script src="../js/src/menu.js"></script>
-    <script src="../js/src/vc.js"></script>
+    <script data-main="vcdemo.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">
 
@@ -28,79 +27,6 @@
     <div id="vc"></div>
     <div id="menu" class="vc"></div>
 
-    <script>
-    var json = {
-      "@type":"koral:docGroup",
-      "operation":"operation:or",
-      "operands":[
-        {
-          "@type":"koral:docGroup",
-          "operation":"operation:and",
-          "operands":[
-            {
-              "@type":"koral:doc",
-              "key":"Titel",
-              "value":"Der Birnbaum",
-              "match":"match:eq"
-            },
-            {
-              "@type":"koral:doc",
-              "key":"Veröffentlichungsort",
-              "value":"Mannheim",
-              "match":"match:eq"
-            },
-            {
-              "@type":"koral:docGroup",
-              "operation":"operation:or",
-              "operands":[
-                {
-                  "@type":"koral:doc",
-                  "key":"Untertitel",
-                  "value":"Aufzucht und Pflege",
-                  "match":"match:eq"
-                },
-                {
-                  "@type":"koral:doc",
-                  "key":"Untertitel",
-                  "value":"Gedichte",
-                  "match":"match:eq",
-                  "rewrites" : [
-                    {
-                      "@type": "koral:rewrite",
-                      "src" : "policy",
-                      "operation" : "operation:injection",
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "@type":"koral:doc",
-          "key":"Veröffentlichungsdatum",
-          "type":"type:date",
-          "value":"2015-03-05",
-          "match":"match:geq"
-        }
-      ]
-    };
-    KorAP.Locale.AND = 'und';
-    KorAP.Locale.OR  = 'oder';
-
-    var vc = KorAP.VirtualCollection.render(json);
-    document.getElementById('vc').appendChild(vc.element());
-
-    function showJSON() {
-      document.getElementById("json").innerHTML = JSON.stringify(vc.root().toJson());
-    };
-
-    function showQuery() {
-      document.getElementById("query").innerHTML = vc.root().toQuery();
-    };
-
-    </script>
-
     <hr />
 
     <p><a onclick="showJSON()" style="cursor:pointer">show JSON!</a></p>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
new file mode 100644
index 0000000..b96b16c
--- /dev/null
+++ b/dev/demo/vcdemo.js
@@ -0,0 +1,81 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+var json = {
+  "@type":"koral:docGroup",
+  "operation":"operation:or",
+  "operands":[
+    {
+      "@type":"koral:docGroup",
+      "operation":"operation:and",
+      "operands":[
+        {
+          "@type":"koral:doc",
+          "key":"Titel",
+          "value":"Der Birnbaum",
+          "match":"match:eq"
+        },
+        {
+          "@type":"koral:doc",
+          "key":"Veröffentlichungsort",
+          "value":"Mannheim",
+          "match":"match:eq"
+        },
+        {
+          "@type":"koral:docGroup",
+          "operation":"operation:or",
+          "operands":[
+            {
+              "@type":"koral:doc",
+              "key":"Untertitel",
+              "value":"Aufzucht und Pflege",
+              "match":"match:eq"
+            },
+            {
+              "@type":"koral:doc",
+              "key":"Untertitel",
+              "value":"Gedichte",
+              "match":"match:eq",
+              "rewrites" : [
+                {
+                  "@type": "koral:rewrite",
+                  "src" : "policy",
+                  "operation" : "operation:injection",
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "@type":"koral:doc",
+      "key":"Veröffentlichungsdatum",
+      "type":"type:date",
+      "value":"2015-03-05",
+      "match":"match:geq"
+    }
+  ]
+};
+
+function showJSON() {
+  document.getElementById("json").innerHTML = JSON.stringify(vc.root().toJson());
+};
+
+function showQuery() {
+  document.getElementById("query").innerHTML = vc.root().toQuery();
+};
+
+require(['vc','lib/domReady'], function (vcClass, domReady) {
+  KorAP.Locale.AND = 'und';
+  KorAP.Locale.OR  = 'oder';
+
+  domReady(function() {
+    var vc = vcClass.render(json);
+    document.getElementById('vc').appendChild(vc.element());
+  });
+});