diff --git a/.gitignore b/.gitignore
index af82236..353e775 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ yarn.lock
 
 node_modules
 dist
+build
 .cache
 
 env.yml
diff --git a/README.md b/README.md
index 9dcd90f..5be1bdf 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,12 @@
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)][License]
 
 
-The JavaScript-based viewer provides a minimalist, highly customisable user interface that is easily adaptable via CSS, supported by lightning-fast real-time image delivery from the FSI Server.
+The zoom viewer provides a minimalist, highly customisable user interface that is easily adaptable via CSS, supported by lightning-fast real-time image delivery from the FSI Server.
 FSI Viewer can be created and controlled as a simple HTML tag and/or via the JavaScript API.
 
 This repository contains examples on how to use and build your own applications.
 
-![Project Image](project.apng)
+[![Project Image](project.apng)][GHPages]
 
 ## Getting Started
 
diff --git a/package.json b/package.json
index b857934..aca87bd 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
     "name": "NeptuneLabs GmbH",
     "url": "https://www.neptunelabs.com/"
   },
-  "version": "23.11.24",
-  "homepage": "https://www.neptunelabs.com/fsi-viewer",
+  "version": "24.03.19",
+  "homepage": "https://neptunelabs.com/fsi-viewer",
   "repository": {
     "type": "git",
     "url": "https://github.com/neptunelabs/fsi-viewer-samples"
@@ -12,17 +12,14 @@
   "license": "Apache-2.0",
   "private": true,
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=6.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@neptunelabs/fsi-samples-framework": "^1.1.0"
-  },
-  "devDependencies": {
-    "prettier": "^3.0.1"
+    "@neptunelabs/fsi-samples-framework": "^2.0.18"
   },
   "scripts": {
-    "start": "start-sample",
-    "build": "start-sample --build"
+    "start": "workbench",
+    "build": "workbench --build"
   }
 }
diff --git a/project.yml b/project.yml
index 4f1279f..b0022af 100644
--- a/project.yml
+++ b/project.yml
@@ -2,5 +2,6 @@
 title: 'FSI Viewer'
 projectURL: https://www.neptunelabs.com/fsi-viewer/
 originAssetPath: viewer
+schema: overview-taupe
 playground:
   stackblitz: fsi-viewer-samples
diff --git a/samples/custom-product-detail-page/config.yml b/samples/custom-product-detail-page/config.yml
index 8773f01..abe7737 100644
--- a/samples/custom-product-detail-page/config.yml
+++ b/samples/custom-product-detail-page/config.yml
@@ -7,29 +7,20 @@ overview:
     - JS built FSI Viewer
     - zoom and pan
     - custom UI
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      hero: false
-      featured: true
-      footer:
-        credits:
-          photos:
-            - author: Brandon Atchison
-              link: https://unsplash.com/@b_atchison98?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  featured: true
+  footer:
+    credits:
+      photos:
+        - author: Brandon Atchison
+          link: https://unsplash.com/@b_atchison98?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: false
diff --git a/samples/custom-product-detail-page/index.html b/samples/custom-product-detail-page/container.html
similarity index 100%
rename from samples/custom-product-detail-page/index.html
rename to samples/custom-product-detail-page/container.html
diff --git a/samples/external-buttons/config.yml b/samples/external-buttons/config.yml
index 63392c3..4180638 100644
--- a/samples/external-buttons/config.yml
+++ b/samples/external-buttons/config.yml
@@ -7,32 +7,24 @@ overview:
     - JS built FSI Viewer
     - external UI
     - zoom and pan
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/clothing-menu.yml
-      featured:
-        template: data/clothing-featured.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: Kate Skumen
-              link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      hero: false
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: true
-      jquery: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Kate Skumen
+          link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  hero: false
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
+
diff --git a/samples/external-buttons/index.html b/samples/external-buttons/container.html
similarity index 100%
rename from samples/external-buttons/index.html
rename to samples/external-buttons/container.html
diff --git a/samples/external-slider/config.yml b/samples/external-slider/config.yml
index 08f1e51..80e9554 100644
--- a/samples/external-slider/config.yml
+++ b/samples/external-slider/config.yml
@@ -7,35 +7,27 @@ overview:
     - JS built FSI Viewer
     - external slider
     - zoom and pan
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      highlight: DEAL OF THE DAY
-      featured: true
-      footer:
-        credits:
-          photos:
-            - author: Jonny Caspari
-              link: https://unsplash.com/@jonnysplsh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-            - author: max fuchs
-              link: https://unsplash.com/@designfuchs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-            - author: William Moreland
-              link: https://unsplash.com/@relentlessjpg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  highlight: DEAL OF THE DAY
+  featured: true
+  footer:
+    credits:
+      photos:
+        - author: Jonny Caspari
+          link: https://unsplash.com/@jonnysplsh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+        - author: max fuchs
+          link: https://unsplash.com/@designfuchs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+        - author: William Moreland
+          link: https://unsplash.com/@relentlessjpg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: false
diff --git a/samples/external-slider/index.html b/samples/external-slider/container.html
similarity index 100%
rename from samples/external-slider/index.html
rename to samples/external-slider/container.html
diff --git a/samples/javascript-api/README.md b/samples/javascript-api/README.md
new file mode 100644
index 0000000..ce1b345
--- /dev/null
+++ b/samples/javascript-api/README.md
@@ -0,0 +1,110 @@
+# JS API Sample
+
+FSI Viewer contains an extensive JS API with methods and callbacks that you can use.
+You can find [an overview of all available parameters in the corresponding documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods).
+
+This example is a simple demonstration of how to use these methods and callbacks.
+
+To display zoom with FSI Viewer, all you need to do is add the following script to the top of your web page:
+
+```html
+<script
+  src='https://fsi.domain.tld/fsi/viewer/applications/viewer/js/fsiviewer.js'
+</script>
+```
+This will ensure that the FSI Viewer is loaded.
+
+Normally you would need to place the *<fsi-viewer>* tag in your source code where you want the viewer to be displayed.
+
+In this example, we only want to display the viewer in place of an image when a button is clicked.
+This means that the viewer is initialised by JavaScript.
+
+To do this, we have created this part in the body:
+
+```html
+<div class="col productContainer" id="productContainer">
+  <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-13.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+  <div class="zoomContainer" id="zoomEle">
+  </div>
+  <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+</div>
+```
+`productContainer` is the div that contains all the elements.
+`zoomImg` is the image that will be displayed on load and replaced by the viewer.
+The `zoomEle` div will contain the FSI viewer.
+The `zoomBtn` button is used to switch from the image to the viewer.
+
+In the corresponding `style.css` the image and button are placed  above the viewer div with `z-index`:
+
+```css
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+}
+```
+
+The switch on button click is achieved via JS in the corresponding `script.js`:
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+    const teaserZoomPercent = 10
+
+    const show = () => {
+      // show FSI Viewer instance and hide image
+      document.getElementById('zoomEle').style.visibility = 'visible'
+      document.getElementById('zoomImg').style.display = 'none'
+      document.getElementById('zoomBtn').style.display = 'none'
+      if (showTeaser) {
+        setTimeout(() => {
+          instance.setZoom(teaserZoomPercent, true, true)
+        }, 500)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      src: 'images/samples/Shoe/View2/sneaker-both-13.jpg',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      id : 'myViewer',
+      onReady : show,
+      onViewChanged: (view) => {
+        if (showTeaser) {
+          showTeaser = false
+          setTimeout(() => {
+            // reset viewer - the user can interact with the UI
+            instance.resetView()
+          }, 800)
+        }
+      },
+    })
+    document.getElementById('zoomEle').appendChild(instance)
+  })
+
+})
+
+```
+
+A click on the `zoomBtn` element will initialise a new FSI Viewer element in the `zoomEle` element.
+
+The viewer itself is created with `$FSI.createNode("fsi-viewer",{parameters})`.
+
+We create `show` that is called when the `onReady` callback is executed (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/callbacks#onready)) we ensure a smooth transition:
+Only when the viewer is ready will the viewer element will be set to visible, while the image and button are set to `display:none`.
+
+If `showTeaser` is true, the method `setZoom` will be executed: `instance.setZoom(teaserZoomPercent, true, true)` (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods#setzoom)).
+
+For initialization, we use `$FSI.createNode` which creates the <fsi-viewer> custom tag which is appended to the `zoomEle` element.
+
+The callback `onViewChanged` (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/callbacks#onviewchanged)) listens when the zoom is finished, sets `showTeaser` to false and uses the `resetView` method (see [documentation](https://docs.neptunelabs.com/docs/fsi-viewer/js-api/public-methods#resetview)).
diff --git a/samples/javascript-api/config.yml b/samples/javascript-api/config.yml
new file mode 100644
index 0000000..a2f5b52
--- /dev/null
+++ b/samples/javascript-api/config.yml
@@ -0,0 +1,27 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript Viewer API with a simple demo.
+  order: 97
+  facts:
+    - JS built FSI Viewer
+    - JS API Demonstration
+schema: bootstrap-taupe
+sample:
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Artem Bondarchuk
+          link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/javascript-api/container.html b/samples/javascript-api/container.html
new file mode 100644
index 0000000..7d3ad31
--- /dev/null
+++ b/samples/javascript-api/container.html
@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row row-cols-1 row-cols-lg-2 g-3 pr-5 py-3">
+    <div class="col productContainer" id="productContainer">
+      <img id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/Shoe/View2/sneaker-both-13.jpg&width=640&height=397&effects=pad(CC,FFFFFF)" height="397" alt="">
+      <div class="zoomContainer" id="zoomEle">
+      </div>
+      <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+    </div>
+    <div class="col mx-auto">
+      <div class="p-3 text-left">
+        <h2 class="display-5">Camu</h2>
+        <p>Sneaker, Camouflage Suede</p>
+        <p></p>
+        <p>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-fill"></i>
+          <i class="bi bi-star-half"></i>
+          <small>(4664) Ratings</small>
+        </p>
+        <p>Sturdy, classy and minimal.</p>
+        <p>Nice shoe for any occasion. The minimal design fits a lot of outfits.</p>
+        <p>
+          <small>Dispatched in 4 working days</small>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/samples/javascript-api/logo.png b/samples/javascript-api/logo.png
new file mode 100644
index 0000000..6aa7eb4
Binary files /dev/null and b/samples/javascript-api/logo.png differ
diff --git a/samples/javascript-api/script.js b/samples/javascript-api/script.js
new file mode 100644
index 0000000..91f7dc3
--- /dev/null
+++ b/samples/javascript-api/script.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+    const teaserZoomPercent = 10
+
+    const show = () => {
+      // show FSI Viewer instance and hide image
+      document.getElementById('zoomEle').style.visibility = 'visible'
+      document.getElementById('zoomImg').style.display = 'none'
+      document.getElementById('zoomBtn').style.display = 'none'
+      if (showTeaser) {
+        setTimeout(() => {
+          instance.setZoom(teaserZoomPercent, true, true)
+        }, 500)
+      }
+    }
+
+    const instance = $FSI.createNode('fsi-viewer', {
+      src: 'images/samples/Shoe/View2/sneaker-both-13.jpg',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      id: 'myViewer',
+      onReady: show,
+      onViewChanged: (view) => {
+        if (showTeaser) {
+          showTeaser = false
+          setTimeout(() => {
+            // reset viewer - the user can interact with the UI
+            instance.resetView()
+          }, 800)
+        }
+      },
+    })
+    document.getElementById('zoomEle').appendChild(instance)
+  })
+
+})
diff --git a/samples/javascript-api/style.css b/samples/javascript-api/style.css
new file mode 100644
index 0000000..baef4ef
--- /dev/null
+++ b/samples/javascript-api/style.css
@@ -0,0 +1,46 @@
+.productContainer {
+  position: relative;
+  height: 427px;
+  width: 640px;
+  padding: 0;
+  margin: 0;
+}
+
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .zoomContainer {
+  padding: 0;
+  top: 0;
+  right: 0;
+  margin: 0;
+  position: absolute;
+  height: 427px;
+  width: 640px;
+  visibility: hidden;
+}
+
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+  bottom: 2%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  background-color: white;
+  color: #555;
+  border: 1px solid #555;
+  font-size: 16px;
+  padding: 12px 24px;
+  cursor: pointer;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.productContainer .btn:hover {
+  background-color: #33b1aa;
+  color: white;
+  border: 1px solid #33b1aa;
+}
diff --git a/samples/no-interface-version/config.yml b/samples/no-interface-version/config.yml
index 7b4074d..0805132 100644
--- a/samples/no-interface-version/config.yml
+++ b/samples/no-interface-version/config.yml
@@ -7,28 +7,20 @@ overview:
     - JS built FSI Viewer
     - zoom and pan
     - minimalist no interface version
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/clothing-menu.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: Kate Skumen
-              link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: clothing-menu.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Kate Skumen
+          link: https://unsplash.com/@skumen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/no-interface-version/index.html b/samples/no-interface-version/container.html
similarity index 100%
rename from samples/no-interface-version/index.html
rename to samples/no-interface-version/container.html
diff --git a/samples/product-zoom-modal/config.yml b/samples/product-zoom-modal/config.yml
index 1abc73c..43bcd2b 100644
--- a/samples/product-zoom-modal/config.yml
+++ b/samples/product-zoom-modal/config.yml
@@ -7,32 +7,24 @@ overview:
     - JS built FSI Viewer
     - zoom and pan
     - modal implementation
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/furniture-menu.yml
-      highlight: HIGHLIGHT OF THE DAY
-      featured:
-        template: data/furniture-featured.yml
-      categories: true
-      footer:
-        credits:
-          photos:
-            author: various artists
-            link: https://pixabay.com/
-            platform: Pixabay
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      hero: false
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: furniture-menu.yml
+  highlight: HIGHLIGHT OF THE DAY
+  featured:
+    data: furniture-featured.yml
+  categories: true
+  footer:
+    credits:
+      photos:
+        author: various artists
+        link: https://pixabay.com/
+        platform: Pixabay
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  hero: false
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/product-zoom-modal/index.html b/samples/product-zoom-modal/container.html
similarity index 100%
rename from samples/product-zoom-modal/index.html
rename to samples/product-zoom-modal/container.html
diff --git a/samples/react-test/README.md b/samples/react-test/README.md
new file mode 100644
index 0000000..b132aee
--- /dev/null
+++ b/samples/react-test/README.md
@@ -0,0 +1,25 @@
+# Using FSI Viewer with React
+
+If you want to use the FSI Viewer with React, we recommend that you create an FSI component to ensure that the viewers are initialised correctly.
+
+Simply embedding the viewers as a component may work, but will cause problems as the viewer will be initialised in the shadow DOM and changes will not be recognised.
+
+This sample shows a sample FSI component and how it is embedded. As this is a standalone sample, the embedding is slightly different.
+
+In `fsi-component.js` you will find the class that extends the React component. You can read more about this in the corresponding documentation section [Creating the FSI Component](https://docs.neptunelabs.com/docs/fsi-viewer/using-with-react).
+
+You can use this FSIComponent in two ways, either directly in the files or as a separate component.
+In `sample.js` it is directly embedded:
+
+```html
+ <div className="col">
+          <FSIComponent tagName="fsi-viewer" id={"Viewer_2D"} width={"100%"} height={"450px"}
+                        src={"images/samples/Shoe/View2/sneaker-both-13.jpg"}
+                        plugins={"FullScreen,Resize"} />
+        </div>
+```
+
+The `tagName` defines which viewer script is loaded, in this case `fsi-viewer`. The other attributes are the normal viewer parameters you would set.
+
+If you want to use this in React, unlike in this standalone example, it is important to import the FSIComponent accordingly.
+You can read more about this in the [Using the FSIComponent](https://docs.neptunelabs.com/docs/fsi-viewer/using-with-react#using-fsicomponent) section of the documentation.
diff --git a/samples/react-test/config.yml b/samples/react-test/config.yml
new file mode 100644
index 0000000..8edd354
--- /dev/null
+++ b/samples/react-test/config.yml
@@ -0,0 +1,29 @@
+overview:
+  title: React
+  image: logo.png
+  description: Shows how FSI components can be implemented in React.
+  order: 98
+  facts:
+    - Sample component containing FSI ThumbBar
+    - FSI Component
+schema: react-taupe
+sample:
+  hero:
+    data: clothing-hero.yml
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Artem Bondarchuk
+          link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/react-test/fsi-component.js b/samples/react-test/fsi-component.js
new file mode 100644
index 0000000..9dbad67
--- /dev/null
+++ b/samples/react-test/fsi-component.js
@@ -0,0 +1,76 @@
+class FSIComponent extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.ref = React.createRef();
+  }
+
+  getIgnoredProps = function(){
+    return {
+      "children":1,
+      "style":1,
+      "id":1,
+      "data-fsi-id":1
+    }
+  }
+
+  getDefaultParameters(){
+    return {
+      ref:this.ref,
+      autoInit:false,
+      skin:"white"
+    }
+  }
+
+  destroyInstance(){
+    const instance = this.ref.current;
+
+    if (typeof instance.getInitDone !== "function" || instance.getInitDone() === true) {
+      if (typeof instance.destroy === "function")
+        instance.destroy();
+    }
+  }
+
+  initInstance(){
+    const instance = this.ref.current;
+    if (typeof(instance.init) === "function" && instance.init(instance, this.getParameters()) === true){
+      if (typeof instance.start === "function") {
+        instance.start();
+      }
+    }
+  }
+
+  getParameters(){
+    return {...this.getDefaultParameters(), ...this.props, ...{tagName:null}}
+  }
+
+  /* handlers */
+  componentWillUnmount() {
+    this.destroyInstance();
+  }
+
+  shouldComponentUpdate(nextProps){
+    const toIgnore = this.getIgnoredProps();
+
+    const changedProps = Object.keys(nextProps)
+      .filter(key => {
+        return !toIgnore[key] && nextProps[key] !== this.props[key];
+      });
+
+    return (changedProps.length > 0);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.destroyInstance();
+    this.initInstance();
+  }
+
+  componentDidMount() {
+    this.initInstance();
+  }
+
+  render() {
+    return React.createElement(this.props.tagName, this.getParameters());
+  }
+}
diff --git a/samples/react-test/logo.png b/samples/react-test/logo.png
new file mode 100644
index 0000000..9a420b2
Binary files /dev/null and b/samples/react-test/logo.png differ
diff --git a/samples/react-test/sample.js b/samples/react-test/sample.js
new file mode 100644
index 0000000..ff6fa72
--- /dev/null
+++ b/samples/react-test/sample.js
@@ -0,0 +1,38 @@
+const Sample = () => {
+  return (
+
+    <div className="container">
+      <div className="row row-cols-1 row-cols-lg-2 g-3 pr-5 py-3">
+        <div className="col">
+          <FSIComponent tagName="fsi-viewer" id={"Viewer_2D"} width={"100%"} height={"450px"}
+                        src={"images/samples/Shoe/View2/sneaker-both-13.jpg"}
+                        plugins={"FullScreen,Resize"} />
+        </div>
+        <div className="col mx-auto">
+          <div className="p-3 text-left">
+            <h2 className="display-5">Camu</h2>
+            <p>Sneaker, Camouflage Suede</p>
+            <p></p>
+            <p>
+              <i className="bi bi-star-fill"></i>&nbsp;
+              <i className="bi bi-star-fill"></i>&nbsp;
+              <i className="bi bi-star-fill"></i>&nbsp;
+              <i className="bi bi-star-fill"></i>&nbsp;
+              <i className="bi bi-star-half"></i>&nbsp;
+              <small>(4664) Ratings</small>
+            </p>
+            <p>Sturdy, classy and minimal.</p>
+            <p>Nice shoe for any occasion. The minimal design fits a lot of outfits.</p>
+            <p>
+              <small>Dispatched in 4 working days</small>
+            </p>
+            <div className="btn-group py-3">
+              <button type="button" className="btn btn-lg btn-outline-dark">Add to basket</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+)
+  ;
+};
diff --git a/samples/simple-product-zoom/config.yml b/samples/simple-product-zoom/config.yml
index 8c7dfca..2474557 100644
--- a/samples/simple-product-zoom/config.yml
+++ b/samples/simple-product-zoom/config.yml
@@ -7,29 +7,22 @@ overview:
     - JS built FSI Viewer
     - zoom and pan
     - plain menu
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/clothing-menu.yml
-      featured:
-        template: data/clothing-featured.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: Artem Bondarchuk
-              link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
-              platform: Unsplash
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-      bootstrap:
-        icons: true
-  mapping:
-      html: "index.html"
-      css: "style.css"
-playground:
-  deploy: true
+  menu:
+    data: clothing-menu.yml
+  featured:
+    data: clothing-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: Artem Bondarchuk
+          link: https://unsplash.com/@artembondarchuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+          platform: Unsplash
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/simple-product-zoom/index.html b/samples/simple-product-zoom/container.html
similarity index 97%
rename from samples/simple-product-zoom/index.html
rename to samples/simple-product-zoom/container.html
index 1f7d148..a73f68f 100644
--- a/samples/simple-product-zoom/index.html
+++ b/samples/simple-product-zoom/container.html
@@ -8,7 +8,6 @@
         height="450px"
         plugins="resize,fullScreen"
         skin="example"
-        autoSpin_speed="10"
       >
       </fsi-viewer>
     </div>
diff --git a/samples/simple-product-zoom/script.js b/samples/simple-product-zoom/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/samples/starter/config.yml b/samples/starter/config.yml
index def4acf..e169c11 100644
--- a/samples/starter/config.yml
+++ b/samples/starter/config.yml
@@ -3,6 +3,7 @@ overview:
   image: logo.png
   description: Start your own demo
   order: 99
+schema: vanilla
 sample:
   mapping:
     html: 'index.html'
diff --git a/samples/starter/index.html b/samples/starter/index.html
index 42ed3a0..ed87e1c 100644
--- a/samples/starter/index.html
+++ b/samples/starter/index.html
@@ -5,10 +5,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
   <meta charset="UTF-8">
   <title>Your FSI Code</title>
-  <style type="text/css">
+  <style>
     html,body{
-      font-family:Arial,sans-serif;
-      width:100%;height:100%;
+      font-family:sans-serif;
+      width:100%; height:100%;
       margin:0;
       padding:0;
     }