diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 000000000..ab33c8ce8
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,51 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ hashFiles('**/package-lock.json') }}
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit == 'false' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
+
+      - name: Install
+        run: npm install
+
+      - name: CI
+        run: npm run ci
+        env:
+          CI: true
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
index 0bf2afcbb..ccb5fff11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,6 @@ out
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+playwright-report/
+test-results/
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index dc3086bca..633d114ae 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,8 @@
+<<<<<<< Updated upstream
 projects/src/samples/project_06/04_pong_asm.ts
 web/public/pico.min.css
+=======
+simulator/src/projects/project_06/04_pong.ts
+simulator/src/projects/project_06/04_pong_asm.ts
+>>>>>>> Stashed changes
 web/src/locales
\ No newline at end of file
diff --git a/components/src/runbar.tsx b/components/src/runbar.tsx
index 08807357e..147bd2d8f 100644
--- a/components/src/runbar.tsx
+++ b/components/src/runbar.tsx
@@ -71,6 +71,7 @@ export const Runbar = (props: {
         <button
           className="flex-0"
           disabled={props.disabled}
+          data-testid="runbar-frame"
           onClick={() => runner.actions.frame()}
           data-tooltip={props.overrideTooltips?.step ?? `Step`}
           data-placement="bottom"
@@ -87,6 +88,7 @@ export const Runbar = (props: {
               ? runner.actions.stop()
               : runner.actions.start()
           }
+          data-testid="runbar-run-pause"
           data-tooltip={
             runner.state.running
               ? props.overrideTooltips?.pause ?? `Pause`
@@ -105,6 +107,7 @@ export const Runbar = (props: {
             }
             runner.actions.reset();
           }}
+          data-testid="runbar-reset"
           data-tooltip={props.overrideTooltips?.reset ?? `Reset`}
           data-placement="bottom"
         >
diff --git a/e2e/README.md b/e2e/README.md
new file mode 100644
index 000000000..f83e4e5eb
--- /dev/null
+++ b/e2e/README.md
@@ -0,0 +1,47 @@
+# NAND2Testris Web IDE e2e Tests
+
+This is a brief cookbook for NAND2Tetris web ide Playwright e2e tests.
+
+All commands should be run from the root folder, not this /e2e folder.
+
+Before running any commands, run the server with `npm start` in a separate terminal.
+
+## Install Playwright dependencies
+
+```
+npx playwright install
+```
+
+## Run all e2e tests
+
+```
+npm run e2e
+```
+
+## Only run tests for chip
+
+```
+npm run e2e -- chip
+```
+
+Replace chip with cpu, asm, vm, etc.
+
+## Only run tests in Chromium
+
+```
+npm run e2e -- --project chromium
+```
+
+## Debug Tests
+
+Use the Playwright VSCode plugin.
+
+## View Tests
+
+```
+npm run e2e -- --ui
+```
+
+## More Info
+
+Review the Playwright documentation and e2e folder.
diff --git a/e2e/asm.spec.ts b/e2e/asm.spec.ts
new file mode 100644
index 000000000..b1fb81524
--- /dev/null
+++ b/e2e/asm.spec.ts
@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("asm", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("asm");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Assembler")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});
diff --git a/e2e/chip.spec.ts b/e2e/chip.spec.ts
new file mode 100644
index 000000000..a9f7f88b1
--- /dev/null
+++ b/e2e/chip.spec.ts
@@ -0,0 +1,39 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+const NOT = `CHIP Not {
+IN in;
+OUT out;
+
+PARTS:
+Nand(a=in, b=in, out=out);
+}`;
+
+test.describe("chip", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("chip");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Hardware Simulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+
+  test("simple chip", async ({ page, monaco }) => {
+    await page.goto("chip?monaco=false");
+    await page.getByRole("button", { name: "Accept" }).click();
+    await page.getByTestId("project-picker").selectOption("Project 1");
+    await page.getByTestId("chip-picker").selectOption("Not");
+
+    await monaco.toggleMonaco();
+    await monaco.write(NOT, "hdl");
+    await expect(page.getByText("HDL code: No syntax errors")).toBeVisible();
+
+    await page.getByTestId("runbar-run-pause").click();
+    await expect(
+      page.getByText(
+        "Simulation successful: The output file is identical to the compare file",
+      ),
+    ).toBeVisible();
+  });
+});
diff --git a/e2e/compiler.spec.ts b/e2e/compiler.spec.ts
new file mode 100644
index 000000000..065d58536
--- /dev/null
+++ b/e2e/compiler.spec.ts
@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("compiler", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("compiler");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Jack Compiler")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});
diff --git a/e2e/cpu.spec.ts b/e2e/cpu.spec.ts
new file mode 100644
index 000000000..42b937960
--- /dev/null
+++ b/e2e/cpu.spec.ts
@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("cpu", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("cpu");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("CPU Emulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});
diff --git a/e2e/util/base.ts b/e2e/util/base.ts
new file mode 100644
index 000000000..0277706ff
--- /dev/null
+++ b/e2e/util/base.ts
@@ -0,0 +1,52 @@
+import type { Locator, Page } from "@playwright/test";
+import { test as base } from "@playwright/test";
+
+export class MonacoPage {
+  private usingMonaco = true;
+  public readonly monacoEditor: Locator;
+  constructor(readonly page: Page) {
+    this.monacoEditor = page.locator(".monaco-editor").nth(0);
+  }
+
+  async toggleMonaco() {
+    await this.page.getByText("settings", { exact: true }).click();
+    await this.page.getByText("Use Monaco Editor").click();
+    await this.page
+      .locator("header")
+      .filter({ hasText: /^Settings$/ })
+      .getByRole("link")
+      .click();
+    this.usingMonaco = !this.usingMonaco;
+  }
+
+  async clearEditor(editor: string) {
+    if (this.usingMonaco) {
+      await this.monacoEditor.click();
+      await this.page.keyboard.press("ControlOrMeta+KeyA");
+      await this.page.keyboard.press("Backspace");
+      await this.page.keyboard.press("ControlOrMeta+KeyA");
+      await this.page.keyboard.press("Backspace");
+    } else {
+      await this.page.getByTestId(`editor-${editor}`).clear();
+    }
+  }
+
+  async write(text: string, editor: string) {
+    await this.clearEditor(editor);
+    if (this.usingMonaco) {
+      await this.monacoEditor.click();
+    } else {
+      await this.page.getByTestId(`editor-${editor}`);
+    }
+    for (const line of text.split("\n")) {
+      await this.page.keyboard.type(`${line}\n`);
+    }
+  }
+}
+
+export const test = base.extend<{ monaco: MonacoPage }>({
+  monaco: async ({ page }, use) => {
+    const monaco = new MonacoPage(page);
+    await use(monaco);
+  },
+});
diff --git a/e2e/vm.spec.ts b/e2e/vm.spec.ts
new file mode 100644
index 000000000..d37fa7f58
--- /dev/null
+++ b/e2e/vm.spec.ts
@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("vm", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("vm");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("VM Emulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index df5be8dfb..363ae2d28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,9 @@
         "simulator",
         "web"
       ],
+      "dependencies": {
+        "@playwright/test": "^1.45.1"
+      },
       "engines": {
         "node": ">=16",
         "npm": ">=7"
@@ -4189,6 +4192,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
+      "integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.45.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.15",
       "license": "MIT",
@@ -17225,6 +17243,50 @@
         "node": ">=4"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
+      "integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.45.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
+      "integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pofile": {
       "version": "1.1.4",
       "dev": true,
diff --git a/package.json b/package.json
index 7cb70ff9e..bf40345fb 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "test": "CI=true npm test -w simulator && CI=true npm test -w components && CI=true npm test -w web",
     "web": "npm run start -w web",
     "start": "npm run web",
+    "e2e": "playwright test",
     "preinstall-cli": "npm run build -w projects && npm run build -w runner && npm run build -w simulator && npm run build -w cli",
     "install-cli": "npm i -g cli"
   },
@@ -48,5 +49,8 @@
   "engines": {
     "node": ">=16",
     "npm": ">=7"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.45.1"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..d00563f3a
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,78 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:3000/web-ide/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm start",
+    url: "http://127.0.0.1:3000/web-ide/",
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/web/src/shell/Monaco.tsx b/web/src/shell/Monaco.tsx
index a1b4e6d0f..bbacb9435 100644
--- a/web/src/shell/Monaco.tsx
+++ b/web/src/shell/Monaco.tsx
@@ -1,8 +1,5 @@
-import MonacoEditor, { useMonaco, type OnMount } from "@monaco-editor/react";
-import {
-  CompilationError,
-  Span,
-} from "@nand2tetris/simulator/languages/base.js";
+import MonacoEditor, { type OnMount } from "@monaco-editor/react";
+import { CompilationError, Span } from "@nand2tetris/simulator/languages/base";
 import * as monacoT from "monaco-editor/esm/vs/editor/editor.api";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AppContext } from "../App.context";
@@ -95,7 +92,7 @@ export const Monaco = ({
   lineNumberTransform?: (n: number) => string;
 }) => {
   const { theme } = useContext(AppContext);
-  const monaco = useMonaco();
+  const monaco = useRef<typeof monacoT>();
   const [height, setHeight] = useState(0);
 
   const editor = useRef<monacoT.editor.IStandaloneCodeEditor>();
@@ -133,7 +130,7 @@ export const Monaco = ({
       newHighlight = highlight.current;
     }
     decorations.current = makeDecorations(
-      monaco,
+      monaco.current || null,
       editor.current,
       // I'm not sure why this makes things work, but it is load bearing.
       // Removing the empty span will cause the initial first-statement
@@ -170,7 +167,8 @@ export const Monaco = ({
 
   // Set options when mounting
   const onMount: OnMount = useCallback(
-    (ed) => {
+    (ed, mon) => {
+      monaco.current = mon;
       editor.current = ed;
       editor.current?.updateOptions({
         fontFamily: `"JetBrains Mono", source-code-pro, Menlo, Monaco,
@@ -227,19 +225,19 @@ export const Monaco = ({
 
   // Add error markers on parse failure
   useEffect(() => {
-    if (editor.current === undefined) return;
-    if (monaco === null) return;
+    if (!editor.current) return;
+    if (!monaco.current) return;
     const model = editor.current.getModel();
     if (model === null) return;
     if (error === undefined || error.span === undefined) {
-      monaco.editor.setModelMarkers(model, language, []);
+      monaco.current.editor.setModelMarkers(model, language, []);
       return;
     }
 
     const startPos = model.getPositionAt(error.span.start);
     const endPos = model.getPositionAt(error.span.end);
 
-    monaco.editor.setModelMarkers(model, language, [
+    monaco.current.editor.setModelMarkers(model, language, [
       {
         message: error.message,
         startColumn: startPos.column,
@@ -257,14 +255,14 @@ export const Monaco = ({
   };
 
   return (
-    <>
-      <MonacoEditor
-        value={value}
-        onChange={onValueChange}
-        language={language}
-        onMount={onMount}
-        height={dynamicHeight ? height : undefined}
-      />
-    </>
+    <MonacoEditor
+      value={value}
+      onChange={onValueChange}
+      language={language}
+      onMount={onMount}
+      height={dynamicHeight ? height : undefined}
+    />
   );
 };
+
+export default Monaco;
diff --git a/web/src/shell/editor.tsx b/web/src/shell/editor.tsx
index d91c81291..b179c68d2 100644
--- a/web/src/shell/editor.tsx
+++ b/web/src/shell/editor.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/macro";
 import { type Grammar } from "ohm-js";
-import { CSSProperties, useContext, useEffect, useState } from "react";
+import { CSSProperties, lazy, Suspense, useContext, useState } from "react";
 import { AppContext } from "../App.context";
 
 import {
@@ -9,11 +9,8 @@ import {
 } from "@nand2tetris/simulator/languages/base.js";
 
 import "./editor.scss";
-import type { Monaco as MonacoT } from "./Monaco";
 
-let Monaco: typeof MonacoT = (
-  ..._params: Parameters<typeof MonacoT>
-): JSX.Element => <></>;
+const Monaco = lazy(() => import("./Monaco"));
 
 export const ErrorPanel = ({ error }: { error?: CompilationError }) => {
   return error ? (
@@ -97,37 +94,29 @@ export const Editor = ({
   lineNumberTransform?: (n: number) => string;
 }) => {
   const { monaco } = useContext(AppContext);
-  const [monacoLoaded, setMonacoLoaded] = useState(false);
-  useEffect(() => {
-    const loadMonaco = async () => {
-      if (monaco.canUse && monaco.wants && !monacoLoaded) {
-        Monaco = (await import("./Monaco")).Monaco;
-        setMonacoLoaded(true);
-      }
-    };
-    loadMonaco();
-  }, [monaco, monacoLoaded, setMonacoLoaded]);
 
   return (
     <div
       className={`Editor ${dynamicHeight ? "dynamic-height" : ""} ${className}`}
       style={style}
     >
-      {monaco.canUse && monaco.wants && monacoLoaded ? (
-        <Monaco
-          value={value}
-          onChange={onChange}
-          onCursorPositionChange={onCursorPositionChange}
-          language={language}
-          error={error}
-          disabled={disabled}
-          highlight={highlight}
-          highlightType={highlightType}
-          customDecorations={customDecorations}
-          dynamicHeight={dynamicHeight}
-          alwaysRecenter={alwaysRecenter}
-          lineNumberTransform={lineNumberTransform}
-        />
+      {monaco.canUse && monaco.wants ? (
+        <Suspense fallback="Loading...">
+          <Monaco
+            value={value}
+            onChange={onChange}
+            onCursorPositionChange={onCursorPositionChange}
+            language={language}
+            error={error}
+            disabled={disabled}
+            highlight={highlight}
+            highlightType={highlightType}
+            customDecorations={customDecorations}
+            dynamicHeight={dynamicHeight}
+            alwaysRecenter={alwaysRecenter}
+            lineNumberTransform={lineNumberTransform}
+          />
+        </Suspense>
       ) : (
         <>
           <Textarea