diff --git a/elements/sifrr-showcase/src/sifrrshowcase.js b/elements/sifrr-showcase/src/sifrrshowcase.js
index d240a359..89467f9a 100644
--- a/elements/sifrr-showcase/src/sifrrshowcase.js
+++ b/elements/sifrr-showcase/src/sifrrshowcase.js
@@ -22,7 +22,7 @@ const template = SifrrDom.template`<style media="screen">
       </span>
       <button class="font" type="button" name="saveFile" _click="\${this.saveFile}">Save to File</button>
       <h3 class="font head">Showcases</h3>
-      <input style="width: 100%" id="showcaseName" type="text" name="showcase" _input="\${(v) => this.store.setActiveValue({ name: v })}" value="\${this.store.getActiveValue().name}">
+      <input style="width: 100%" id="showcaseName" type="text" name="showcase" :sifrr-bind="\${this.store.bindUpdate('name')}" value="\${this.store.getActiveValue().name}">
       <button style="width: 100%" class="font" type="button" name="createVariant" _click="\${this.createShowcase}">Create new showcase</button>
       <div id="showcases" :sifrr-repeat="\${this.store.getValues()}">
         <li class="font showcase small \${this.state.active ? 'current' : ''}" draggable="true">\${this.state.name}<span>X</span></li>
@@ -61,6 +61,7 @@ class SifrrShowcase extends SifrrDom.Element {
       if (el.matches('.showcase')) this.store.setActive(this.getChildIndex(el));
       if (el.matches('.showcase span')) this.store.delete(this.getChildIndex(el.parentNode));
     });
+    this.store.fetchStore(this.url, this.onStatus.bind(this));
     if (window.Sortable) {
       const me = this;
       new window.Sortable(this.$('#showcases'), {
@@ -118,7 +119,7 @@ class SifrrShowcase extends SifrrDom.Element {
     const file = el.files[0];
     const fr = new FileReader();
     fr.onload = () => {
-      this.store.setValues(JSON.parse(fr.result).showcases);
+      this.store.setValues(JSON.parse(fr.result).values);
       this.store.setActive(JSON.parse(fr.result).active || 0);
       this.onStatus('loaded from file!');
     };
diff --git a/elements/sifrr-showcase/src/singleshowcase.js b/elements/sifrr-showcase/src/singleshowcase.js
index 3dae77e9..cebc12b3 100644
--- a/elements/sifrr-showcase/src/singleshowcase.js
+++ b/elements/sifrr-showcase/src/singleshowcase.js
@@ -68,11 +68,20 @@ class SifrrSingleShowcase extends SifrrDom.Element {
   }
 
   onUpdate() {
+    const currentTime = Date.now();
     if (this._stateFxnTimeout) clearTimeout(this._stateFxnTimeout);
-    this._stateFxnTimeout = setTimeout(this.runStateFunction.bind(this), 500);
+    if (this._lastStateRun && currentTime - this._lastStateRun < 500) {
+      this._stateFxnTimeout = setTimeout(
+        this.runStateFunction.bind(this),
+        currentTime - this._lastStateRun
+      );
+    } else {
+      this.runStateFunction();
+    }
   }
 
   runStateFunction() {
+    this._lastStateRun = Date.now();
     let state;
     try {
       state = new Function(this.$('#elState').value).call(this.element());
@@ -86,7 +95,6 @@ class SifrrSingleShowcase extends SifrrDom.Element {
 
   createNewVariant() {
     this.store.add({
-      variantId: id,
       variantName: this.state.variantName,
       style: this.state.style || '',
       code: this.state.code || '',
@@ -96,7 +104,7 @@ class SifrrSingleShowcase extends SifrrDom.Element {
 
   updateHtml(e, el) {
     const html = `<${el.value}></${el.value}>`;
-    this.state = { code: html, element: el.value };
+    this.store.setActiveValue({ code: html, element: el.value });
   }
 
   element() {
diff --git a/elements/sifrr-showcase/src/stores.js b/elements/sifrr-showcase/src/stores.js
index a0c123e6..93b7d8ce 100644
--- a/elements/sifrr-showcase/src/stores.js
+++ b/elements/sifrr-showcase/src/stores.js
@@ -20,17 +20,15 @@ showcaseStore.fetchStore = function(url, onStatus) {
       onStatus(e.message);
       storage.all().then(v => {
         onStatus('failed to load from url, loaded from storage!');
-        if (Array.isArray(v.showcases)) {
-          this.setValues(v.showcases);
+        if (Array.isArray(v.values)) {
+          this.setValues(v.values);
           this.setActive(v.active || 0);
         }
       });
     })
     .finally(() => {
       this._loaded = true;
-      this.setActiveShowcase(
-        getParam('showcase') === undefined ? v.activeShowcase : getParam('showcase')
-      );
+      this.setActive(getParam('showcase') === undefined ? 0 : getParam('showcase'));
     });
 };
 
@@ -38,28 +36,33 @@ showcaseStore.save = function(onUpdate) {
   storage.set(this.value).then(onUpdate);
 };
 
+const saveFxn = showcaseStore.save.bind(
+  showcaseStore,
+  () => showcaseStore.onStatus('saved locally!'),
+  (showcaseStore._timeout = null)
+);
 showcaseStore.onUpdate = function() {
-  setParam('showcase', this.value.active);
-  console.log(this.getActiveValue().variants);
+  if (getParam('showcase') != this.value.active) setParam('showcase', this.value.active);
   if (
     this.getActiveValue().variants &&
     this.getActiveValue().variants !== variantStore.getValues()
   ) {
-    variantStore.setValues(this.getActiveValue().variants);
+    variantStore.setValues(this.getActiveValue().variants, this.getActiveValue().activeVariant);
   }
 
+  if (this.getActiveValue().activeVariant !== variantStore.value.active) {
+    this.getActiveValue().activeVariant = variantStore.value.active;
+  }
+
+  if (!this.getValues() || this.getValues().length < 1) return;
+
   this.onStatus('saving locally!');
   if (this._timeout) clearTimeout(this._timeout);
-  this._timeout = setTimeout(() => {
-    this._timeout = null;
-    storage.set(this.value).then(() => {
-      this.onStatus('saved locally!');
-    });
-  }, 500);
+  this._timeout = setTimeout(saveFxn, 500);
 };
 
 variantStore.onUpdate = function() {
-  setParam('variant', this.value.active);
+  if (getParam('variant') != this.value.active) setParam('variant', this.value.active);
   showcaseStore.onUpdate();
 };
 
diff --git a/elements/sifrr-showcase/src/switchingstore.js b/elements/sifrr-showcase/src/switchingstore.js
index 5e86ec09..fcf7cd75 100644
--- a/elements/sifrr-showcase/src/switchingstore.js
+++ b/elements/sifrr-showcase/src/switchingstore.js
@@ -8,8 +8,9 @@ class ShowcaseStore extends Store {
     });
   }
 
-  setValues(values) {
-    this.set({ values: values || [] });
+  setValues(values, active) {
+    this.value.values = values || [];
+    this.setActive(active || 0);
   }
 
   getValues() {
@@ -28,8 +29,7 @@ class ShowcaseStore extends Store {
 
   add(v) {
     this.value.values.splice(this.value.active + 1, 0, v);
-    this.value.active = this.value.active + 1;
-    this.update();
+    this.setActive(this.value.active + 1);
   }
 
   setActive(active) {
@@ -48,8 +48,6 @@ class ShowcaseStore extends Store {
     if (this.value.values[this.value.active]) {
       Object.assign(this.value.values[this.value.active], v);
       this.update();
-    } else {
-      this.addValue(v);
     }
   }
 }
diff --git a/showcase/showcases.json b/showcase/showcases.json
index b25c71dd..bba8f736 100644
--- a/showcase/showcases.json
+++ b/showcase/showcases.json
@@ -1,47 +1,47 @@
 {
-  "current": 6,
-  "showcases": [
+  "active": 6,
+  "values": [
     {
       "element": "sifrr-code-editor",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "default - html",
       "variants": [
         {
           "variantId": 1,
           "variantName": "default - html",
           "style": "#element > * {\n}",
           "code": "<sifrr-code-editor lang='html'></sifrr-code-editor>\n",
-          "elState": "this.value = '<a>some test.. </a>';\nreturn {\n\n}"
+          "elState": "this.value = '<a>some test.. </a>';\nreturn {\n\n}",
+          "active": true
         },
         {
           "variantId": 3,
           "variantName": "js",
           "style": "#element > * {\n  \n}",
           "code": "<sifrr-code-editor lang=\"javascript\"></sifrr-code-editor>",
-          "elState": "this.value = 'var a = \"some value\";';\nreturn {\n\n}"
+          "elState": "this.value = 'var a = \"some value\";';\nreturn {\n\n}",
+          "active": false
         },
         {
           "variantId": 4,
           "variantName": "css",
           "style": "#element > * {\n  \n}",
           "code": "<sifrr-code-editor lang=\"css\"></sifrr-code-editor>",
-          "elState": "this.value = `element {\n  color: black;\n}\n`;\nreturn {\n\n}"
+          "elState": "this.value = `element {\n  color: black;\n}\n`;\nreturn {\n\n}",
+          "active": false
         },
         {
           "variantId": 5,
           "variantName": "themed",
           "style": "#element > * {\n\n}",
           "code": "<sifrr-code-editor theme=\"solarized\"></sifrr-code-editor>",
-          "elState": "this.value = '<a>some test.. </a>';\nreturn {\n\n}"
+          "elState": "this.value = '<a>some test.. </a>';\nreturn {\n\n}",
+          "active": false
         }
       ],
-      "variantId": 1,
-      "style": "#element > * {\n}",
-      "code": "<sifrr-code-editor lang='html'></sifrr-code-editor>\n",
-      "elState": "this.value = '<a>some test.. </a>';\nreturn {\n\n}",
       "name": "sifrr-code-editor",
-      "current": 0
+      "active": false,
+      "activeVariant": 0
     },
     {
       "name": "sifrr-lazy-picture",
@@ -56,11 +56,7 @@
       "element": "sifrr-lazy-picture",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "lazy loading",
-      "variantId": 2,
-      "style": "#element > * {\n  background: white;\n  height: 200px;\n  width: 200px;\n  display: block;\n}\n#element > * img {\n  width: 100%;\n  height: 100%;\n}",
-      "code": "<div style=\"height: 1000px\"></div>\n<picture is=\"sifrr-lazy-picture\">\n      <source media=\"(min-width: 800px)\" data-srcset=\"https://pbs.twimg.com/profile_images/1057899591708753921/PSpUS-Hp_400x400.jpg\">\n      <img data-src=\"https://static.adweek.com/adweek.com-prod/wp-content/uploads/files/blogs/google-logo-hed-2014.jpg\">\n</picture>",
-      "elState": "return {\n\n}"
+      "active": false
     },
     {
       "name": "sifrr-lazy-img",
@@ -70,14 +66,13 @@
           "style": "#element > * {\n  background: white;\n  height: 200px;\n  width: 200px;\n  display: block;\n}",
           "variantName": "lazy loading",
           "code": "<div style=\"height: 1000px\"></div>\n<img is=\"sifrr-lazy-img\" data-src=\"https://static.adweek.com/adweek.com-prod/wp-content/uploads/files/blogs/google-logo-hed-2014.jpg\">",
-          "elState": "return {\n\n}"
+          "elState": "return {\n\n}",
+          "active": true
         }
       ],
       "element": "sifrr-lazy-img",
-      "style": "#element > * {\n  background: white;\n  height: 200px;\n  width: 200px;\n  display: block;\n}",
-      "variantId": 1,
-      "variantName": "lazy loading",
-      "code": "<div style=\"height: 1000px\"></div>\n<img is=\"sifrr-lazy-img\" data-src=\"https://static.adweek.com/adweek.com-prod/wp-content/uploads/files/blogs/google-logo-hed-2014.jpg\">"
+      "active": false,
+      "activeVariant": 0
     },
     {
       "name": "sifrr-tab-container",
@@ -107,12 +102,7 @@
       "element": "sifrr-tab-container",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "default",
-      "variantId": 1,
-      "style": "#element > * {\n  background-color: white;\n}\n#element div {\n  padding: 10px;\n  height: 100px;\n}",
-      "code": "<sifrr-tab-container>\n  <div>\n    Tab 1\n  </div>\n  <div>\n    Tab 2\n  </div>\n</sifrr-tab-container>",
-      "elState": "this.active = 0;\nreturn {\n\n}",
-      "current": 0
+      "active": false
     },
     {
       "name": "sifrr-tab-header",
@@ -156,12 +146,7 @@
       "element": "sifrr-tab-header",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "with tab container",
-      "variantId": 3,
-      "style": "#element > sifrr-tab-header {\n  background-color: blue;\n  color: white;\n}\n#element > sifrr-tab-container {\n  background-color: white;\n}\n#element span {\n  padding: 8px;\n}",
-      "code": "<sifrr-tab-header>\n  <span>hahaha</span>\n  <span>lolsfsdfsdfsdfsfsdfsdfolol</span>\n  <span>haha</span>\n</sifrr-tab-header>\n<sifrr-tab-container>\n  <div>\n    Tab 1\n  </div>\n  <div>\n    Tab 2\n  </div>\n  <div>\n    Tab 3\n  </div>\n</sifrr-tab-container>",
-      "elState": "this.refresh({ container: this.nextElementSibling });\nreturn {\n\n}",
-      "current": 0
+      "active": false
     },
     {
       "name": "sifrr-carousel",
@@ -171,25 +156,24 @@
           "variantName": "normal",
           "style": "#element sifrr-carousel {\n  width: 600px;\n}\n#element sifrr-carousel.fullscreen {\n  width: 100%;\n}\n",
           "code": "<sifrr-carousel>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n</sifrr-carousel>",
-          "elState": "return {\n\n}"
+          "elState": "return {\n\n}",
+          "active": true
         },
         {
           "variantId": 2,
           "variantName": "centered images",
           "style": "#element sifrr-carousel {\n  width: 400px;\n}\n#element sifrr-carousel.fullscreen {\n  width: 100%;\n  height: 100%;\n}\n.cimage {\n  position: relative;\n  height: 300px;\n}\n.fullscreen .cimage {\n  position: relative;\n  height: 80vh;\n}\n.cimage img {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate3d(-50%, -50%, 0);\n  max-height: 100%;\n  max-width: 100%;\n}",
           "code": "<sifrr-carousel>\n  <div class='cimage' slot='content'>\n    <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  </div>\n  <div class='cimage' slot='content'>\n    <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg'>\n  </div>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n</sifrr-carousel>",
-          "elState": "return {\n\n}"
+          "elState": "return {\n\n}",
+          "active": false
         }
       ],
       "element": "sifrr-carousel",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "normal",
-      "variantId": 1,
-      "style": "#element sifrr-carousel {\n  width: 600px;\n}\n#element sifrr-carousel.fullscreen {\n  width: 100%;\n}\n",
-      "code": "<sifrr-carousel>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='content'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='content'>\n  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500' slot='preview'>\n  <img src='https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg' slot='preview'>\n</sifrr-carousel>",
       "elState": "return {\n\n}",
-      "current": 0
+      "active": false,
+      "activeVariant": 0
     },
     {
       "name": "sifrr-progress-round",
@@ -199,38 +183,40 @@
           "variantName": "state",
           "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
           "code": "<sifrr-progress-round></sifrr-progress-round>",
-          "elState": "return {\n  progress: 40\n}"
+          "elState": "return {\n  progress: 40\n}",
+          "active": false
         },
         {
           "variantId": 2,
           "variantName": "attribute",
           "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
           "code": "<sifrr-progress-round progress=\"70\"></sifrr-progress-round>",
-          "elState": "return {\n\n}"
+          "elState": "return {\n\n}",
+          "active": false
         },
         {
           "variantId": 4,
           "variantName": "custom stroke, dark",
           "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
           "code": "<sifrr-progress-round></sifrr-progress-round>",
-          "elState": "return {\n  stroke: '#000',\n  'stroke-width': 1,\n  progress: 67\n}"
+          "elState": "return {\n  stroke: '#000',\n  'stroke-width': 1,\n  progress: 67\n}",
+          "active": false
         },
         {
           "variantId": 3,
           "variantName": "with image progress",
           "style": "#element div {\n  width: 500px;\n  background-color: white;\n}\n\n#element .lazy {\n  position: relative;\n  height: 500px;\n  background-color: black;\n}\n\n.lazy > * {\n  position: absolute;\n  height: 500px;\n  width: 500px;\n}\n.lazy > sifrr-progress-round {\n  width: 50px;\n  height: 50px;\n  top: 225px;\n  left: 225px;\n}",
           "code": "<div style=\"height: 1000px\">Scroll down</div>\n<div class=\"lazy\">\n  <img is=\"sifrr-lazy-img\" data-src=\"https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg\">\n  <sifrr-progress-round progress=\"0\"></sifrr-progress-round>\n</div>\n<div id=\"speed\">speed in kbps</div>\n",
-          "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));"
+          "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));",
+          "active": true
         }
       ],
       "element": "sifrr-progress-round",
       "elementUrl": "",
       "isjs": true,
-      "variantName": "with image progress",
-      "variantId": 3,
-      "style": "#element div {\n  width: 500px;\n  background-color: white;\n}\n\n#element .lazy {\n  position: relative;\n  height: 500px;\n  background-color: black;\n}\n\n.lazy > * {\n  position: absolute;\n  height: 500px;\n  width: 500px;\n}\n.lazy > sifrr-progress-round {\n  width: 50px;\n  height: 50px;\n  top: 225px;\n  left: 225px;\n}",
-      "code": "<div style=\"height: 1000px\">Scroll down</div>\n<div class=\"lazy\">\n  <img is=\"sifrr-lazy-img\" data-src=\"https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg\">\n  <sifrr-progress-round progress=\"0\"></sifrr-progress-round>\n</div>\n<div id=\"speed\">speed in kbps</div>\n",
-      "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));"
+      "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));",
+      "active": true,
+      "activeVariant": 3
     },
     {
       "name": "sifrr-shimmer",
@@ -272,13 +258,9 @@
         }
       ],
       "element": "sifrr-shimmer",
-      "code": "<sifrr-shimmer></sifrr-shimmer>",
-      "variantName": "bg-color, fg-color (rando)",
-      "variantId": 5,
-      "style": "#element > * {\n  height: 50px;\n  width: 200px;\n}",
-      "elState": "const allowed = '0123456789abcdef';\nfunction randomCC() {\n  const char = Math.round(Math.random() * (allowed.length - 1));\n  return allowed[char];\n}\nfunction randomColor() {\n  let color = '#';\n  for (let i = 0; i < 6; i++) {\n    color += randomCC();\n  }\n  return color;\n}\nthis.setAttribute('bg-color', randomColor());\nthis.setAttribute('fg-color', randomColor());\n\nreturn {\n\n}",
       "elementUrl": "",
-      "isjs": true
+      "isjs": true,
+      "active": false
     },
     {
       "name": "sifrr-include",
@@ -292,55 +274,9 @@
         }
       ],
       "element": "sifrr-include",
-      "variantId": 1,
-      "variantName": "html",
-      "style": "",
-      "code": "<sifrr-include url=\"./random.html\"></sifrr-include>",
-      "elState": "",
       "elementUrl": "",
       "isjs": true,
-      "current": 0
+      "active": false
     }
-  ],
-  "currentSC": {
-    "name": "sifrr-progress-round",
-    "element": "sifrr-progress-round",
-    "elementUrl": "",
-    "isjs": true,
-    "variantName": "with image progress",
-    "variants": [
-      {
-        "variantId": 1,
-        "variantName": "state",
-        "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
-        "code": "<sifrr-progress-round></sifrr-progress-round>",
-        "elState": "return {\n  progress: 40\n}"
-      },
-      {
-        "variantId": 2,
-        "variantName": "attribute",
-        "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
-        "code": "<sifrr-progress-round progress=\"70\"></sifrr-progress-round>",
-        "elState": "return {\n\n}"
-      },
-      {
-        "variantId": 4,
-        "variantName": "custom stroke, dark",
-        "style": "#element > * {\n  height: 200px;\n  width: 200px;\n  margin: auto;\n}",
-        "code": "<sifrr-progress-round></sifrr-progress-round>",
-        "elState": "return {\n  stroke: '#000',\n  'stroke-width': 1,\n  progress: 67\n}"
-      },
-      {
-        "variantId": 3,
-        "variantName": "with image progress",
-        "style": "#element div {\n  width: 500px;\n  background-color: white;\n}\n\n#element .lazy {\n  position: relative;\n  height: 500px;\n  background-color: black;\n}\n\n.lazy > * {\n  position: absolute;\n  height: 500px;\n  width: 500px;\n}\n.lazy > sifrr-progress-round {\n  width: 50px;\n  height: 50px;\n  top: 225px;\n  left: 225px;\n}",
-        "code": "<div style=\"height: 1000px\">Scroll down</div>\n<div class=\"lazy\">\n  <img is=\"sifrr-lazy-img\" data-src=\"https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg\">\n  <sifrr-progress-round progress=\"0\"></sifrr-progress-round>\n</div>\n<div id=\"speed\">speed in kbps</div>\n",
-        "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));"
-      }
-    ],
-    "variantId": 3,
-    "style": "#element div {\n  width: 500px;\n  background-color: white;\n}\n\n#element .lazy {\n  position: relative;\n  height: 500px;\n  background-color: black;\n}\n\n.lazy > * {\n  position: absolute;\n  height: 500px;\n  width: 500px;\n}\n.lazy > sifrr-progress-round {\n  width: 50px;\n  height: 50px;\n  top: 225px;\n  left: 225px;\n}",
-    "code": "<div style=\"height: 1000px\">Scroll down</div>\n<div class=\"lazy\">\n  <img is=\"sifrr-lazy-img\" data-src=\"https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg\">\n  <sifrr-progress-round progress=\"0\"></sifrr-progress-round>\n</div>\n<div id=\"speed\">speed in kbps</div>\n",
-    "elState": "const speedEl = this.parentNode.$('#speed').firstChild;\nfunction lazyProgress(el) {\n  const progress = el.$('sifrr-progress-round');\n  const img = el.$('img');\n  img.reload()\n  const src = img.dataset.src;\n  img.dataset.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';\n  img.beforeLoad = () => {\n    Sifrr.Fetch.get(src, {\n      onProgress: ({ percent: p, speed }) => {\n        progress.state = { progress: p };\n        if (speed) speedEl.data = Math.round(speed) + ' kbps'; \n        if (p >= 100) {\n          speedEl.data = '';\n          progress.remove();\n        }\n      }\n    }).then(r => r.blob()).then(b => {\n      img.src = URL.createObjectURL(b);\n    })\n  }\n}\n\nlazyProgress(this.parentNode.$('.lazy'));"
-  }
-}
+  ]
+}
\ No newline at end of file