diff --git a/dev/demo/vc.html b/dev/demo/vc.html
new file mode 100644
index 0000000..353b309
--- /dev/null
+++ b/dev/demo/vc.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Virtual Collection demo</title>
+    <meta charset="utf-8" />
+    <script src="../js/src/menu.js"></script>
+    <script src="../js/src/vc.js"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+    <style type="text/css" rel="stylesheet">
+
+body {
+  background-color: #9bad0b;
+  color: white;
+  font-family: tahoma, verdana, arial;
+  font-size: 10pt;
+  margin: 20px;
+}
+
+.info {
+  background-color:white;
+  color: black;
+  padding: 1em;
+  font-family: mono;
+}
+    </style>
+  </head>
+  <body>
+    <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>
+    <div id="json" class="info"></div>
+
+    <hr />
+
+    <p><a onclick="showQuery()" style="cursor:pointer">show Query!</a></p>
+    <div id="query" class="info"></div>
+
+  </body>
+</html>