diff --git a/.github/workflows/publish-pages.yml b/.github/workflows/publish-pages.yml
index c507903..0ec93a9 100644
--- a/.github/workflows/publish-pages.yml
+++ b/.github/workflows/publish-pages.yml
@@ -29,8 +29,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
@@ -39,11 +39,11 @@ jobs:
           npm install
           npm run build
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: 'dist'
+          path: 'build'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/test-on-pull.yml b/.github/workflows/test-on-pull.yml
index df83226..d6e1a64 100644
--- a/.github/workflows/test-on-pull.yml
+++ b/.github/workflows/test-on-pull.yml
@@ -10,8 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
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 7b379c6..8897bbf 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ FSI Viewer 360 can be created and controlled as a simple HTML tag and/or through
 
 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 e8e1a60..142444d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "name": "NeptuneLabs GmbH",
     "url": "https://www.neptunelabs.com/"
   },
-  "version": "23.11.24",
+  "version": "24.03.19",
   "homepage": "https://www.neptunelabs.com/fsi-viewer-360",
   "repository": {
     "type": "git",
@@ -12,15 +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"
   },
-  "devDependencies": {
-    "@neptunelabs/fsi-samples-framework": "^1.1.0",
-    "prettier": "^3.0.1"
+  "dependencies": {
+    "@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 f62b513..47e3ca7 100644
--- a/project.yml
+++ b/project.yml
@@ -2,5 +2,6 @@
 title: 'FSI Viewer 360°'
 projectURL: https://www.neptunelabs.com/fsi-viewer-360/
 originAssetPath: viewer-360
+schema: overview-taupe
 playground:
   stackblitz: fsi-viewer-360-samples
diff --git a/samples/javascript-api/README.md b/samples/javascript-api/README.md
new file mode 100644
index 0000000..6a02ce1
--- /dev/null
+++ b/samples/javascript-api/README.md
@@ -0,0 +1,103 @@
+# 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 a spin 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. The view will then be zoomed, reset and the auto-rotation is started.
+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 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) {
+        showTeaser = false
+
+        setTimeout(() => {
+          instance.spinToTarget(12, 1, 80)
+        }, 400)
+
+        setTimeout(() => {
+          instance.spinToTarget(0, 1, 80)
+        }, 1000)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      dir: 'images/samples/Shoe/View2',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      // listen for finished loading FSI Viewer and becomes interactive
+      onReady: show
+    })
+    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.
diff --git a/samples/javascript-api/config.yml b/samples/javascript-api/config.yml
new file mode 100644
index 0000000..8af65d4
--- /dev/null
+++ b/samples/javascript-api/config.yml
@@ -0,0 +1,29 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript Viewer API with a simple demo.
+  order: 98
+  facts:
+    - JS built FSI Viewer
+    - JS API Demonstration
+schema: bootstrap-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/javascript-api/container.html b/samples/javascript-api/container.html
new file mode 100644
index 0000000..8b8a796
--- /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-1.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..c350167
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..35ac0b3
--- /dev/null
+++ b/samples/javascript-api/script.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+
+    let showTeaser = true
+
+    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) {
+        showTeaser = false
+
+        setTimeout(() => {
+          instance.spinToTarget(12, 1, 80)
+        }, 400)
+
+        setTimeout(() => {
+          instance.spinToTarget(0, 1, 80)
+        }, 1000)
+      }
+    }
+
+    const instance = $FSI.createNode("fsi-viewer", {
+      dir: 'images/samples/Shoe/View2',
+      debug: false,
+      plugins: 'fullScreen',
+      skin: 'example',
+      width: '640',
+      height: '427',
+      // listen for finished loading FSI Viewer and becomes interactive
+      onReady: show
+    })
+    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..f9ffe67
--- /dev/null
+++ b/samples/javascript-api/style.css
@@ -0,0 +1,46 @@
+.productContainer {
+  position: relative;
+  height: 427px;
+  width: 640px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.productContainer .img {
+  z-index: 10;
+  position: absolute;
+}
+
+.productContainer .zoomContainer{
+  padding: 0px;
+  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/multi-axis-hotspots/config.yml b/samples/multi-axis-hotspots/config.yml
index 4a0cb2d..4340d9e 100644
--- a/samples/multi-axis-hotspots/config.yml
+++ b/samples/multi-axis-hotspots/config.yml
@@ -7,27 +7,20 @@ overview:
     - Multi-Axis Spin
     - Hotspots
   order: 4
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: NeptuneLabs GmbH
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-        touchZoom: true
-      bootstrap:
-        icons: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: misc-menu.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: NeptuneLabs GmbH
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+    touchZoom: true
+  bootstrap:
+    icons: true
+
diff --git a/samples/multi-axis-hotspots/index.html b/samples/multi-axis-hotspots/container.html
similarity index 100%
rename from samples/multi-axis-hotspots/index.html
rename to samples/multi-axis-hotspots/container.html
diff --git a/samples/pdp/config.yml b/samples/pdp/config.yml
index 27dd830..2bd6e40 100644
--- a/samples/pdp/config.yml
+++ b/samples/pdp/config.yml
@@ -7,34 +7,26 @@ overview:
     - Custom Skin
     - Product variants
   order: 1
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/clothing-menu.yml
-      highlight: DEAL OF THE DAY
-      featured:
-        template: data/clothing-featured.yml
-      footer:
-        credits:
-          photos:
-            - author: NeptuneLabs GmbH
-              link: https://www.neptunelabs.com/
-            - author: Photobac
-            - 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
-        touchZoom: 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
+  featured:
+    data: clothing-featured.yml
+  footer:
+    credits:
+      photos:
+        - author: NeptuneLabs GmbH
+          link: https://www.neptunelabs.com/
+        - author: Photobac
+        - 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
+    touchZoom: true
+  bootstrap:
+    icons: true
diff --git a/samples/pdp/index.html b/samples/pdp/container.html
similarity index 100%
rename from samples/pdp/index.html
rename to samples/pdp/container.html
diff --git a/samples/poi/config.yml b/samples/poi/config.yml
index 1663eab..cdb0d0c 100644
--- a/samples/poi/config.yml
+++ b/samples/poi/config.yml
@@ -7,28 +7,20 @@ overview:
     - Points Of Interest
     - Thumbnail Labels
   order: 3
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/misc-menu.yml
-      highlight: HIGHLIGHT OF THE DAY
-      footer:
-        credits:
-          photos:
-            - author: 360ties GmbH
-          viewer:
-            link: https://www.neptunelabs.com/fsi-viewer/
-      fsi:
-        viewer: true
-        touchZoom: true
-        thumbBar: true
-      bootstrap:
-        icons: true
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data:misc-menu.yml
+  highlight: HIGHLIGHT OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: 360ties GmbH
+      viewer:
+        link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+    touchZoom: true
+    thumbBar: true
+  bootstrap:
+    icons: true
diff --git a/samples/poi/index.html b/samples/poi/container.html
similarity index 100%
rename from samples/poi/index.html
rename to samples/poi/container.html
diff --git a/samples/react/README.md b/samples/react/README.md
new file mode 100644
index 0000000..103df3f
--- /dev/null
+++ b/samples/react/README.md
@@ -0,0 +1,27 @@
+# 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='fsi-viewer-section'>
+  <FSIComponent tagName="fsi-viewer" id={"Viewer_2D"} width={"100%"} height={"500px"}
+                dir={"/images/samples/shoe-spin/"}
+                plugins={"FullScreen,Resize,autoSpin"} autoSpin_speed={"10"} />
+</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/config.yml b/samples/react/config.yml
new file mode 100644
index 0000000..f6f7a9e
--- /dev/null
+++ b/samples/react/config.yml
@@ -0,0 +1,25 @@
+overview:
+  title: React Test
+  image: logo.png
+  description: Shows how FSI components can be implemented in React.
+  order: 10
+  facts:
+    - Sample component containing FSI Viewer 360
+    - FSI Component
+schema: react-taupe
+sample:
+  menu:
+    data: clothing-menu.yml
+  highlight: REACT OF THE DAY
+  footer:
+    credits:
+      photos:
+        - author: 360°
+          link: https://www.neptunelabs.com
+          platform: NeptuneLabs
+      viewer:
+          link: https://www.neptunelabs.com/fsi-viewer/
+  fsi:
+    viewer: true
+  bootstrap:
+    icons: true
diff --git a/samples/react/fsi-component.js b/samples/react/fsi-component.js
new file mode 100644
index 0000000..71027ba
--- /dev/null
+++ b/samples/react/fsi-component.js
@@ -0,0 +1,78 @@
+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:"black-flat"
+    }
+  }
+
+  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/logo.png b/samples/react/logo.png
new file mode 100644
index 0000000..448fec3
Binary files /dev/null and b/samples/react/logo.png differ
diff --git a/samples/react/sample.js b/samples/react/sample.js
new file mode 100644
index 0000000..0c746ef
--- /dev/null
+++ b/samples/react/sample.js
@@ -0,0 +1,37 @@
+const Sample = () => {
+  return (
+    <div className="container mx-auto">
+      <div className="row row-cols-1 g-3 px-5 py-3">
+        <div className="col-lg-8">
+          <div className='fsi-viewer-section'>
+            <FSIComponent tagName="fsi-viewer" id={"Viewer_2D"} width={"100%"} height={"500px"}
+                          dir={"/images/samples/shoe-spin/"}
+                          plugins={"FullScreen,Resize,autoSpin"} autoSpin_speed={"10"} />
+          </div>
+        </div>
+        <div className="col-lg-4">
+          <div className="p-3 text-left">
+            <h2 className="display-5">Camu</h2>
+            <p>Sneaker, Camouflage Suede</p>
+            <p>
+              <i className="bi bi-star-fill"></i>
+              <i className="bi bi-star-fill"></i>
+              <i className="bi bi-star-fill"></i>
+              <i className="bi bi-star-fill"></i>
+              <i className="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 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/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'