diff --git a/.github/workflows/publish-demo.yml b/.github/workflows/publish-demo.yml
new file mode 100644
index 0000000..a8d025e
--- /dev/null
+++ b/.github/workflows/publish-demo.yml
@@ -0,0 +1,31 @@
+name: Publish thd demo to Github Pages
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get the latest code 🚚
+        uses: actions/checkout@v3
+      
+      - name: Setup node Env 🧩
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      
+      - name: Install Packages 🚢
+        run: yarn
+
+      - name: Build the package 📦
+        run: yarn build:demo
+
+      - name: Publish to Github Pages 🚀
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./demo/dist
diff --git a/README.md b/README.md
index 50cb457..6c534a5 100644
--- a/README.md
+++ b/README.md
@@ -71,3 +71,7 @@ To see all of the options available, please see the [types file](@types/index.ts
 - `pauseAtEndOfWord()` - A function used to pause once the typewriter has finished typing out the word
 - `play()` - Function to continue the typewriter from where it was paused
 - `safeUpdateStrings()` - Used to update the strings array safely once the typewriter has deleted the current string.
+
+### Known Issues
+
+1 known issue is that the reactive strings array can be changed without warning. This can sometimes cause the current word to change when the typewriter is in the middle of typing a word. I've handled any errors where the strings array is too short or the current word is too short by resetting the typewriter to the start of the word. To avoid this issue, I recommend using the `safeUpdateStrings()` function to update the strings array. I'm hoping to find a lean way of using the `safeUpdateStrings()` as the default update function in the future.
diff --git a/demo/src/App.vue b/demo/src/App.vue
index 0591192..e6d26f5 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -45,9 +45,13 @@ const {
 </script>
 
 <template>
-<div class="demo">
-  <h2>
-    {{ text || `&nbsp` }}
+<div class="demo"> 
+  <h1>Typer Composable Demo</h1>
+
+  <h2 :aria-label="currentString">
+    <span aria-hidden="true">
+      {{ text || `&nbsp` }}
+    </span>
   </h2>
 
   <details @submit.prevent class="controls">
@@ -123,6 +127,10 @@ const {
 </template>
 
 <style lang="scss">
+h2 {
+  font-size: 4em;
+}
+
 details {
   margin-bottom: 1em;
 }
diff --git a/package.json b/package.json
index bd1a399..f56cd40 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   ],
   "scripts": {
     "build": "rollup -c",
+    "build:demo": "vite build",
     "dev": "vite"
   },
   "devDependencies": {
diff --git a/rollup.config.js b/rollup.config.js
index 2c30d81..6dba98d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -39,4 +39,4 @@ export default [
     },
     plugins: [dts()],
   },
-]
\ No newline at end of file
+]
diff --git a/vite.config.ts b/vite.config.ts
index 6d904bf..d18c5c1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,6 @@ import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  root: 'demo/',
+  root: '/demo/',
   plugins: [vue()],
 })