diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 139bb1b..e6cdbe0 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -41,5 +41,7 @@
     <p><a onclick="KorAP.showQuery()" style="cursor:pointer">show Query!</a></p>
     <div id="query" class="info"></div>
 
+    <div id="fragment"></div>
+
   </body>
 </html>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index 87a2c74..0c66dd3 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -97,7 +97,7 @@
 ];
 
 
-require(['vc','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, domReady) {
+require(['vc','vc/fragment','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, fragmentClass, domReady) {
 
   var loc = KorAP.Locale;
   
@@ -153,7 +153,18 @@
     //get the corpus statistic (demo function)
     KorAP.API.getCorpStat = function(collQu, cb){
     	return cb(statistic);
-  }; 
-});
+    };
+
+
+    var f = fragmentClass.create();
+    f.add("author", "Peter");
+    f.add("title", "Sonstiges");
+    f.add("subTitle", "Anderes");
+    
+    document.getElementById('fragment').appendChild(
+      f.element()
+    );
+    
+  });
 });