diff --git a/docs/gridsome.server.js b/docs/gridsome.server.js
index b098dd2b..f86728d0 100644
--- a/docs/gridsome.server.js
+++ b/docs/gridsome.server.js
@@ -100,9 +100,9 @@ module.exports = function (api) {
     /**
      * Generate pages for all demo components for testing purposes
      */
-    globby.sync('./src/demos/**/index.vue').forEach(file => {
+    globby.sync('./src/demos/**/index.(vue|jsx)').forEach(file => {
       const match = file.match(
-        new RegExp(/\.\/src\/demos\/([\S]+)\/index.vue/i),
+        new RegExp(/\.\/src\/demos\/([\S]+)\/index.(vue|jsx)/i),
       )
 
       if (!match) {
diff --git a/docs/src/templates/DemoPage/index.vue b/docs/src/templates/DemoPage/index.vue
index 3846b55e..473f58c3 100644
--- a/docs/src/templates/DemoPage/index.vue
+++ b/docs/src/templates/DemoPage/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-page">
-    <demo-content :name="$context.name" />
+    <demo-content :name="$context.name" v-bind="props" />
   </div>
 </template>
 
@@ -30,6 +30,40 @@ export default {
     }
   },
 
+  methods: {
+    fromString(value) {
+      if (typeof value !== 'string') {
+        return value
+      }
+
+      if (value.match(/^\d*(\.\d+)?$/)) {
+        return Number(value)
+      }
+
+      if (value === 'true') {
+        return true
+      }
+
+      if (value === 'false') {
+        return false
+      }
+
+      if (value === 'null') {
+        return null
+      }
+
+      return value
+    },
+  },
+
+  computed: {
+    props() {
+      return Object.fromEntries(Object
+        .entries(this.$route.query)
+        .map(([key, value]) => [key, this.fromString(value)]))
+    },
+  },
+
   mounted() {
     this.resizeObserver = new window.ResizeObserver(items => {
       if (window.parentIFrame) {