diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml
index f4293b03f9..0da158abba 100644
--- a/.github/workflows/documentation.yml
+++ b/.github/workflows/documentation.yml
@@ -34,7 +34,7 @@ jobs:
       - name: Install Dependencies
         run: npm ci
       - name: Build Production Client
-        run: npm run build
+        run: npm run build-demo
       - uses: actions/upload-artifact@v4
         with:
           name: built-client
diff --git a/photon-client/package.json b/photon-client/package.json
index c201232839..a69b556024 100644
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -7,6 +7,7 @@
     "build": "run-p build-only",
     "preview": "vite preview --port 4173",
     "build-only": "vite build",
+    "build-demo": "vite build --mode demo",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "lint-ci": "eslint . --max-warnings 0 --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 80711960f1..518ad39833 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -8,43 +8,45 @@ import PhotonSidebar from "@/components/app/photon-sidebar.vue";
 import PhotonLogView from "@/components/app/photon-log-view.vue";
 import PhotonErrorSnackbar from "@/components/app/photon-error-snackbar.vue";
 
-const websocket = new AutoReconnectingWebsocket(
-  `ws://${inject("backendHost")}/websocket_data`,
-  () => {
-    useStateStore().$patch({ backendConnected: true });
-  },
-  (data) => {
-    if (data.log !== undefined) {
-      useStateStore().addLogFromWebsocket(data.log);
+const is_demo = import.meta.env.MODE === "demo";
+if (!is_demo) {
+  const websocket = new AutoReconnectingWebsocket(
+    `ws://${inject("backendHost")}/websocket_data`,
+    () => {
+      useStateStore().$patch({ backendConnected: true });
+    },
+    (data) => {
+      if (data.log !== undefined) {
+        useStateStore().addLogFromWebsocket(data.log);
+      }
+      if (data.settings !== undefined) {
+        useSettingsStore().updateGeneralSettingsFromWebsocket(data.settings);
+      }
+      if (data.cameraSettings !== undefined) {
+        useCameraSettingsStore().updateCameraSettingsFromWebsocket(data.cameraSettings);
+      }
+      if (data.ntConnectionInfo !== undefined) {
+        useStateStore().updateNTConnectionStatusFromWebsocket(data.ntConnectionInfo);
+      }
+      if (data.metrics !== undefined) {
+        useSettingsStore().updateMetricsFromWebsocket(data.metrics);
+      }
+      if (data.updatePipelineResult !== undefined) {
+        useStateStore().updateBackendResultsFromWebsocket(data.updatePipelineResult);
+      }
+      if (data.mutatePipelineSettings !== undefined && data.cameraIndex !== undefined) {
+        useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipelineSettings, data.cameraIndex);
+      }
+      if (data.calibrationData !== undefined) {
+        useStateStore().updateCalibrationStateValuesFromWebsocket(data.calibrationData);
+      }
+    },
+    () => {
+      useStateStore().$patch({ backendConnected: false });
     }
-    if (data.settings !== undefined) {
-      useSettingsStore().updateGeneralSettingsFromWebsocket(data.settings);
-    }
-    if (data.cameraSettings !== undefined) {
-      useCameraSettingsStore().updateCameraSettingsFromWebsocket(data.cameraSettings);
-    }
-    if (data.ntConnectionInfo !== undefined) {
-      useStateStore().updateNTConnectionStatusFromWebsocket(data.ntConnectionInfo);
-    }
-    if (data.metrics !== undefined) {
-      useSettingsStore().updateMetricsFromWebsocket(data.metrics);
-    }
-    if (data.updatePipelineResult !== undefined) {
-      useStateStore().updateBackendResultsFromWebsocket(data.updatePipelineResult);
-    }
-    if (data.mutatePipelineSettings !== undefined && data.cameraIndex !== undefined) {
-      useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipelineSettings, data.cameraIndex);
-    }
-    if (data.calibrationData !== undefined) {
-      useStateStore().updateCalibrationStateValuesFromWebsocket(data.calibrationData);
-    }
-  },
-  () => {
-    useStateStore().$patch({ backendConnected: false });
-  }
-);
-
-useStateStore().$patch({ websocket: websocket });
+  );
+  useStateStore().$patch({ websocket: websocket });
+}
 </script>
 
 <template>