diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 66bc081..cd0adfc 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -70,11 +70,37 @@
 	)
       );
       input.parentNode.insertBefore(vcname, input);
-      
+
+      /**
+       * Toggle the Virtual Collection builder
+       */
+      var vc;
       vcname.onclick = function () {
-	var vc = vcClass.render(vcExample);
 	var view = document.getElementById('vc-view');
-	view.appendChild(vc.element());
+
+	// The vc is visible
+	if (this.classList.contains('active')) {
+	  view.removeChild(vc.element());
+	  this.classList.remove('active');
+	}
+
+	// The vc is not visible
+	else {
+	  // The vc is not rendered yet
+	  if (vc === undefined) {
+	    vc = vcClass.create([
+	      ['title', 'string'],
+	      ['subTitle', 'string'],
+	      ['pubDate', 'date'],
+	      ['author', 'string']
+	    ]);
+
+	    if (KorAP.currentVC !== undefined)
+	      vc.fromJson(KorAP.currentVC);
+	  };
+	  view.appendChild(vc.element());
+	  this.classList.add('active');
+	};
       };
     };
 
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 80f6627..c816883 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -131,32 +131,25 @@
      * Create a new virtual collection.
      */
     create : function (keyList) {
-      return Object.create(this)._init(keyList);
-    },
-
-    clean : function () {
-      if (this._root.ldType() !== "non") {
-	this._root.destroy();
-	this.root(unspecDocClass.create(this));
-      };
-      return this;
+      var obj = Object.create(this)._init(keyList);
+      obj._root = unspecDocClass.create(obj);
+      return obj;
     },
 
     /**
      * Create and render a new virtual collection
      * based on a KoralQuery collection document 
      */
-    render : function (json, keyList) {
-      var obj = Object.create(this)._init(keyList);
+    fromJson : function (json) {
 
       if (json !== undefined) {
 	// Parse root document
 	if (json['@type'] == 'koral:doc') {
-	  obj._root = docClass.create(obj, json);
+	  this._root = docClass.create(this, json);
 	}
 	// parse root group
 	else if (json['@type'] == 'koral:docGroup') {
-	  obj._root = docGroupClass.create(obj, json);
+	  this._root = docGroupClass.create(this, json);
 	}
 	// Unknown collection type
 	else {
@@ -167,13 +160,21 @@
 
       else {
 	// Add unspecified object
-	obj._root = unspecDocClass.create(obj);
+	this._root = unspecDocClass.create(this);
       };
 
       // Init element and update
-      obj.update();
+      this.update();
 
-      return obj;
+      return this;
+    },
+
+    clean : function () {
+      if (this._root.ldType() !== "non") {
+	this._root.destroy();
+	this.root(unspecDocClass.create(this));
+      };
+      return this;
     },
 
     /**
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 10a49a8..5571cf7 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -335,10 +335,13 @@
       if (arguments.length === 1) {
 	var m = match.replace(/^match:/, '');
 	if (
-	  (
-	    (this._type === 'string' || this._type === 'regex') &&
-	      KorAP._validStringMatchRE.test(m)
-	  ) ||
+	  (this._type === undefined)
+	    ||
+	    (
+	      (this._type === 'string' || this._type === 'regex') &&
+		KorAP._validStringMatchRE.test(m)
+	    )
+	    ||
 	    (this._type === 'date' && KorAP._validDateMatchRE.test(m))
 	) {
 	  this._matchop = m;