diff --git a/.gitea/workflows/release-nightly.yaml b/.gitea/workflows/release-nightly.yaml
index 0925484..2aa3577 100644
--- a/.gitea/workflows/release-nightly.yaml
+++ b/.gitea/workflows/release-nightly.yaml
@@ -5,17 +5,49 @@ on:
     branches: [main]
 
 jobs:
-  release-macos:
+  macos:
     runs-on: macos-arm64
     steps:
       - uses: actions/checkout@v4
+
       - name: Install NPM Packages
         run: bun install
+
       - name: Run tests
         run: ng test --no-watch --no-progress --browsers=ChromeHeadless
+
       - name: Build MacOS
         run: bunx tauri build && echo 0
+
       - uses: actions/upload-artifact@v3
         with:
           name: BufPiv_main
           path: src-tauri/target/release/bundle/macos/
+  web-demo:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - uses: browser-actions/setup-chrome@v1
+        id: setup-chrome
+        with:
+          install-dependencies: true
+      - name: Set Chrome binary variable
+        run: echo "CHROME_BIN=${{ steps.setup-chrome.outputs.chrome-path }}" > "$GITHUB_ENV"
+
+      - name: Install NPM Packages
+        run: bun install
+
+      - name: Run tests
+        run: bunx ng test --no-watch --no-progress --browsers=ChromeHeadlessNoSandbox
+
+      - name: Build Web Dist
+        run: bun run build
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: buf
+          directory: dist/proto-creator/browser
diff --git a/angular.json b/angular.json
index 845d330..9644e41 100644
--- a/angular.json
+++ b/angular.json
@@ -82,7 +82,8 @@
               }
             ],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         }
       }
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..99b8cca
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,45 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/proto-creator'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    restartOnFileChange: true
+  });
+};