diff --git a/docs/gridsome.server.js b/docs/gridsome.server.js
index cd983ad1..976c8bad 100644
--- a/docs/gridsome.server.js
+++ b/docs/gridsome.server.js
@@ -50,6 +50,8 @@ module.exports = function (api) {
     /**
      * Generate pages for all demo components for testing purposes
      */
+    const demos = []
+
     globby.sync('./src/demos/**/index.(vue|jsx)').forEach(file => {
       const match = file.match(
         new RegExp(/\.\/src\/demos\/([\S]+)\/index.(vue|jsx)/i),
@@ -59,14 +61,24 @@ module.exports = function (api) {
         return
       }
 
-      api.createPages(({ createPage }) => {
+      demos.push(match[1])
+    })
+
+    api.createPages(({ createPage }) => {
+      createPage({
+        path: '/demos',
+        component: './src/templates/DemoPages/index.vue',
+        context: {
+          demos,
+        },
+      })
+
+      demos.forEach(name => {
         createPage({
-          // path: '/demos/Extensions/CharacterCount'
-          path: `/demos/${match[1]}`,
+          path: `/demos/${name}`,
           component: './src/templates/DemoPage/index.vue',
           context: {
-            // name: 'Extensions/CharacterCount'
-            name: match[1],
+            name,
           },
         })
       })
@@ -116,9 +128,7 @@ module.exports = function (api) {
 
     const width = 1200
     const height = 630
-
     const border = 40
-
     const canvas = createCanvas(width, height)
     const context = canvas.getContext('2d')
 
diff --git a/docs/src/demos/Examples/Savvy/findColors.ts b/docs/src/demos/Examples/Savvy/findColors.ts
index b4a196f4..48832ffa 100644
--- a/docs/src/demos/Examples/Savvy/findColors.ts
+++ b/docs/src/demos/Examples/Savvy/findColors.ts
@@ -1,33 +1,29 @@
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Node } from 'prosemirror-model'
 
-export default function (doc: Node) {
+export default function (doc: Node): DecorationSet {
   const hexColor = /(#[0-9a-f]{3,6})\b/ig
-  const results: any[] = []
-  const decorations: [any?] = []
+  const decorations: Decoration[] = []
 
-  doc.descendants((node: any, position: any) => {
-    if (!node.isText) {
+  doc.descendants((node, position) => {
+    if (!node.text) {
       return
     }
 
-    let matches
+    Array
+      .from(node.text.matchAll(hexColor))
+      .forEach(match => {
+        const color = match[0]
+        const index = match.index || 0
+        const from = position + index
+        const to = position + index + match[0].length
+        const decoration = Decoration.inline(from, to, {
+          class: 'color',
+          style: `--color: ${color}`,
+        })
 
-    // eslint-disable-next-line
-    while (matches = hexColor.exec(node.text)) {
-      results.push({
-        color: matches[0],
-        from: position + matches.index,
-        to: position + matches.index + matches[0].length,
+        decorations.push(decoration)
       })
-    }
-  })
-
-  results.forEach(issue => {
-    decorations.push(Decoration.inline(issue.from, issue.to, {
-      class: 'color',
-      style: `--color: ${issue.color}`,
-    }))
   })
 
   return DecorationSet.create(doc, decorations)
diff --git a/docs/src/templates/DemoPages/index.vue b/docs/src/templates/DemoPages/index.vue
new file mode 100644
index 00000000..9a233085
--- /dev/null
+++ b/docs/src/templates/DemoPages/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <ul class="demos-page">
+    <li v-for="(demo, index) in $context.demos" :key="index">
+      <g-link :to="`/demos/${demo}`">
+        {{ demo }}
+      </g-link>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>
diff --git a/docs/src/templates/DemoPages/style.scss b/docs/src/templates/DemoPages/style.scss
new file mode 100644
index 00000000..14ac33ae
--- /dev/null
+++ b/docs/src/templates/DemoPages/style.scss
@@ -0,0 +1,8 @@
+.demos-page {
+  padding: 1.25rem;
+  list-style: none;
+
+  li {
+    margin: 0.5rem 0;
+  }
+}