diff --git a/docs/docs/getting-started/index.md b/docs/docs/getting-started/index.mdx
similarity index 58%
rename from docs/docs/getting-started/index.md
rename to docs/docs/getting-started/index.mdx
index 622a52257..d9830a548 100644
--- a/docs/docs/getting-started/index.md
+++ b/docs/docs/getting-started/index.mdx
@@ -20,26 +20,33 @@ Now that we have a canvas we can use, we need to include Chart.js in our page.
 
 Now, we can create a chart. We add a script to our page:
 
-```javascript
-var ctx = document.getElementById('myChart').getContext('2d');
-var chart = new Chart(ctx, {
-    // The type of chart we want to create
-    type: 'line',
+import { useEffect } from 'react';
 
-    // The data for our dataset
-    data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-            label: 'My First dataset',
-            backgroundColor: 'rgb(255, 99, 132)',
-            borderColor: 'rgb(255, 99, 132)',
-            data: [0, 10, 5, 2, 20, 30, 45]
-        }]
-    },
+```jsx live
+function example() {
+  useEffect(() => {
+	var ctx = document.getElementById('myChart').getContext('2d');
+	var chart = new Chart(ctx, {
+		// The type of chart we want to create
+		type: 'line',
 
-    // Configuration options go here
-    options: {}
-});
+		// The data for our dataset
+		data: {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'My First dataset',
+				backgroundColor: 'rgb(255, 99, 132)',
+				borderColor: 'rgb(255, 99, 132)',
+				data: [0, 10, 5, 2, 20, 30, 45]
+			}]
+		},
+
+		// Configuration options go here
+		options: {}
+	});
+  });
+  return <div className="chartjs-wrapper"><canvas id="myChart" className="chartjs"></canvas></div>;
+}
 ```
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
diff --git a/docs/package.json b/docs/package.json
index e84aad2a9..eb0626486 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "docusaurus build --out-dir ../dist/docs",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"
   },
diff --git a/package.json b/package.json
index c42d32048..18b284770 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "autobuild": "rollup -c -w",
     "build": "rollup -c",
     "dev": "karma start ---auto-watch --no-single-run --browsers chrome --grep",
-    "docs": "cd docs && npm install && npm run build && mkdir -p ../dist && cp -r build ../dist/docs",
+    "docs": "cd docs && npm install && npm run build",
     "lint-js": "eslint samples/**/*.html samples/**/*.js src/**/*.js test/**/*.js",
     "lint-tsc": "tsc",
     "lint": "concurrently \"npm:lint-*\"",