diff --git a/public/js/demo/vc.html b/public/js/demo/vc.html
new file mode 100644
index 0000000..054b969
--- /dev/null
+++ b/public/js/demo/vc.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Virtual Collection demo</title>
+    <script src="../src/vc.js"></script>
+    <style>
+div {
+  padding: 2pt;
+  padding-left: 10pt;
+  border: 2px solid black;
+}
+
+span {
+  margin: 2pt;
+  padding: 2pt;
+  color: white;
+  background-color: green;
+}
+
+div.undefined {
+  background-color: red;
+  height: 12pt;
+  min-width: 100px;
+}
+    </style>
+  </head>
+  <body>
+    <div id="vc"></div>
+    <script>
+    var json = {
+      "@type":"korap:docGroup",
+      "operation":"operation:or",
+      "operands":[
+        {
+          "@type":"korap:docGroup",
+          "operation":"operation:and",
+          "operands":[
+            {
+              "@type":"korap:doc",
+              "key":"Titel",
+              "value":"Baum",
+              "match":"match:eq"
+            },
+            {
+              "@type":"korap:doc",
+              "key":"Veröffentlichungsort",
+              "value":"hihi",
+              "match":"match:eq"
+            }
+          ]
+        },
+        {
+          "@type":"korap:doc",
+          "key":"Untertitel",
+          "value":"huhu",
+          "match":"match:eq"
+        }
+      ]
+    };
+
+//      var vc = KorAP.VirtualCollection.render();
+      var vc = KorAP.VirtualCollection.render(json);
+      console.log(vc);
+      document.getElementById('vc').appendChild(vc.element());
+    </script>
+  </body>
+</html>