diff --git a/tutorials/vueExample.js b/docs/docs/examples/46-vue-demo.mdx
similarity index 80%
rename from tutorials/vueExample.js
rename to docs/docs/examples/46-vue-demo.mdx
index bc867acd..ca138081 100644
--- a/tutorials/vueExample.js
+++ b/docs/docs/examples/46-vue-demo.mdx
@@ -1,3 +1,11 @@
+---
+title: Vue Demo
+---
+
+<SandpackEditor>
+
+```js 
+
 Vue.config.ignoredElements = ['canvas-datagrid'];
 new Vue({
     el: '#app',
@@ -11,3 +19,6 @@ new Vue({
         }
     }
 });
+```
+
+</SandpackEditor>
\ No newline at end of file
diff --git a/tutorials/amdDemo.js b/docs/docs/examples/47-Webpack3-AMD.mdx
similarity index 91%
rename from tutorials/amdDemo.js
rename to docs/docs/examples/47-Webpack3-AMD.mdx
index 2bc7076c..dd657075 100644
--- a/tutorials/amdDemo.js
+++ b/docs/docs/examples/47-Webpack3-AMD.mdx
@@ -1,4 +1,11 @@
-/*jslint browser: true */
+---
+title: Webpack3 AMD Demo
+---
+
+<SandpackEditor>
+
+```js 
+
 require(['../dist/canvas-datagrid.debug.js'], function (dataGrid) {
     'use strict';
     var grid = dataGrid({
@@ -20,3 +27,6 @@ require(['../dist/canvas-datagrid.debug.js'], function (dataGrid) {
     });
     grid.data = [{a: 0, b: 1, c: 2}];
 });
+```
+
+</SandpackEditor>
\ No newline at end of file
diff --git a/tutorials/largeArraysDemo.js b/docs/docs/examples/48-largeArrays.mdx
similarity index 87%
rename from tutorials/largeArraysDemo.js
rename to docs/docs/examples/48-largeArrays.mdx
index 8cc6acf2..9a51217f 100644
--- a/tutorials/largeArraysDemo.js
+++ b/docs/docs/examples/48-largeArrays.mdx
@@ -1,3 +1,11 @@
+---
+title:  Large Arrays
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 function g() {
@@ -19,4 +27,8 @@ function g() {
     grid.style.width = '100%';
     grid.schema = schema;
     grid.data = data;
-}
\ No newline at end of file
+}
+
+```
+
+</SandpackEditor>
\ No newline at end of file
diff --git a/tutorials/sparklineDemo.js b/docs/docs/examples/49-sparkline.mdx
similarity index 98%
rename from tutorials/sparklineDemo.js
rename to docs/docs/examples/49-sparkline.mdx
index e34ee2be..b42d83ae 100644
--- a/tutorials/sparklineDemo.js
+++ b/docs/docs/examples/49-sparkline.mdx
@@ -1,3 +1,10 @@
+---
+title: Sparkline Demo
+---
+
+<SandpackEditor>
+
+```js
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 document.addEventListener('DOMContentLoaded', function () {
@@ -143,4 +150,8 @@ document.addEventListener('DOMContentLoaded', function () {
         setTimeout(getData, 50);
     }
     getData(true);
-});
\ No newline at end of file
+});
+
+
+```
+</SandpackEditor>
\ No newline at end of file
diff --git a/tutorials/reactExample.js b/docs/docs/examples/50-react-demo.mdx
similarity index 96%
rename from tutorials/reactExample.js
rename to docs/docs/examples/50-react-demo.mdx
index d81e8e14..e23b1174 100644
--- a/tutorials/reactExample.js
+++ b/docs/docs/examples/50-react-demo.mdx
@@ -1,3 +1,11 @@
+---
+title: React Demo
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true, es6: true*/
 class CanvasDatagrid extends React.Component {
     constructor(props) {
@@ -64,3 +72,7 @@ function getRandomData() {
 }
 var grid = React.createElement(GenerateRandomDataButton, {});
 ReactDOM.render(grid, document.getElementById('root'));
+
+
+```
+</SandpackEditor>
\ No newline at end of file
diff --git a/tutorials/xhrPagingDemo.js b/docs/docs/examples/51-xhr-demo.mdx
similarity index 98%
rename from tutorials/xhrPagingDemo.js
rename to docs/docs/examples/51-xhr-demo.mdx
index c32044c1..9a38953a 100644
--- a/tutorials/xhrPagingDemo.js
+++ b/docs/docs/examples/51-xhr-demo.mdx
@@ -1,3 +1,11 @@
+---
+title: XHR Demo 
+---
+
+<SandpackEditor>
+
+```js
+
 /*jslint browser: true*/
 /*globals canvasDatagrid: false*/
 function demo() {
@@ -128,3 +136,6 @@ function demo() {
     dataAdapter(0, 100, updateLocalCache);
 }
 document.addEventListener('DOMContentLoaded', demo);
+
+```
+</SandpackEditor>
\ No newline at end of file