diff --git a/web/serialviewer.js b/web/serialviewer.js
new file mode 100644
index 0000000..2291e76
--- /dev/null
+++ b/web/serialviewer.js
@@ -0,0 +1,50 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// main.ts
+const connectButton = document.getElementById('connectButton');
+const outputTextarea = document.getElementById('output');
+let port = null;
+function connect() {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            port = yield navigator.serial.requestPort();
+            yield port.open({ baudRate: 9600 }); // Adjust baud rate as per your device settings
+            outputTextarea.value = ''; // Clear previous output
+            readLoop();
+            connectButton.disabled = true;
+        }
+        catch (error) {
+            console.error('Error connecting to the serial port:', error);
+        }
+    });
+}
+function readLoop() {
+    return __awaiter(this, void 0, void 0, function* () {
+        while (port && port.readable) {
+            try {
+                const reader = port.readable.getReader();
+                while (true) {
+                    const { value, done } = yield reader.read();
+                    if (done) {
+                        reader.releaseLock();
+                        break;
+                    }
+                    // Display the received data
+                    outputTextarea.value += new TextDecoder().decode(value);
+                }
+            }
+            catch (error) {
+                console.error('Error reading from the serial port:', error);
+            }
+        }
+    });
+}
+connectButton.addEventListener('click', connect);
diff --git a/web/serialviewer.ts b/web/serialviewer.ts
index e69de29..dc9709f 100644
--- a/web/serialviewer.ts
+++ b/web/serialviewer.ts
@@ -0,0 +1,38 @@
+// main.ts
+const connectButton = document.getElementById('connectButton') as HTMLButtonElement;
+const outputTextarea = document.getElementById('output') as HTMLTextAreaElement;
+
+let port: SerialPort | null = null;
+
+async function connect() {
+  try {
+    port = await navigator.serial.requestPort();
+    await port.open({ baudRate: 9600 }); // Adjust baud rate as per your device settings
+    outputTextarea.value = ''; // Clear previous output
+    readLoop();
+    connectButton.disabled = true;
+  } catch (error) {
+    console.error('Error connecting to the serial port:', error);
+  }
+}
+
+async function readLoop() {
+  while (port && port.readable) {
+    try {
+      const reader = port.readable.getReader();
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) {
+          reader.releaseLock();
+          break;
+        }
+        // Display the received data
+        outputTextarea.value += new TextDecoder().decode(value);
+      }
+    } catch (error) {
+      console.error('Error reading from the serial port:', error);
+    }
+  }
+}
+
+connectButton.addEventListener('click', connect);