diff --git a/README.md b/README.md
index f9f6ecb3..5541f523 100644
--- a/README.md
+++ b/README.md
@@ -13,4 +13,4 @@ bun dev
 
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
-You can start editing the page by modifying `src/app/index.jsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `src/app/index.js`. The page auto-updates as you edit the file.
diff --git a/index.html b/index.html
index 33a000a3..890de811 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./src/main.jsx"></script>
+    <script type="module" src="./src/main.js"></script>
     <script
       defer
       data-domain="flash.comma.ai"
diff --git a/package.json b/package.json
index 50f195cd..5e3252a4 100644
--- a/package.json
+++ b/package.json
@@ -16,17 +16,10 @@
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#52021f0b1ace58673ebca1fae740f6900ebff707",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "xz-decompress": "^0.2.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
-    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "10.4.21",
     "jsdom": "^26.0.0",
     "postcss": "^8.5.3",
diff --git a/src/app/App.test.jsx b/src/app/App.test.jsx
deleted file mode 100644
index 206de720..00000000
--- a/src/app/App.test.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Suspense } from 'react'
-import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
-
-import App from '.'
-
-test('renders without crashing', () => {
-  render(<Suspense fallback="loading"><App /></Suspense>)
-  expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
-})
diff --git a/src/app/Flash.js b/src/app/Flash.js
new file mode 100644
index 00000000..fd86e1cd
--- /dev/null
+++ b/src/app/Flash.js
@@ -0,0 +1,227 @@
+import { FlashManager, StepCode, ErrorCode } from '../utils/manager'
+import { createImageManager } from '../utils/image'
+import { isLinux } from '../utils/platform'
+import config from '../config'
+
+import bolt from '../assets/bolt.svg'
+import cable from '../assets/cable.svg'
+import deviceExclamation from '../assets/device_exclamation_c3.svg'
+import deviceQuestion from '../assets/device_question_c3.svg'
+import done from '../assets/done.svg'
+import exclamation from '../assets/exclamation.svg'
+import systemUpdate from '../assets/system_update_c3.svg'
+
+const steps = {
+  [StepCode.INITIALIZING]: {
+    status: 'Initializing...',
+    bgColor: 'bg-gray-400 dark:bg-gray-700',
+    icon: bolt,
+  },
+  [StepCode.READY]: {
+    status: 'Tap to start',
+    bgColor: 'bg-[#51ff00]',
+    icon: bolt,
+    iconStyle: '',
+  },
+  [StepCode.CONNECTING]: {
+    status: 'Waiting for connection',
+    description: 'Follow the instructions to connect your device to your computer',
+    bgColor: 'bg-yellow-500',
+    icon: cable,
+  },
+  [StepCode.REPAIR_PARTITION_TABLES]: {
+    status: 'Repairing partition tables...',
+    description: 'Do not unplug your device until the process is complete',
+    bgColor: 'bg-lime-400',
+    icon: systemUpdate,
+  },
+  [StepCode.ERASE_DEVICE]: {
+    status: 'Erasing device...',
+    description: 'Do not unplug your device until the process is complete',
+    bgColor: 'bg-lime-400',
+    icon: systemUpdate,
+  },
+  [StepCode.FLASH_SYSTEM]: {
+    status: 'Flashing device...',
+    description: 'Do not unplug your device until the process is complete',
+    bgColor: 'bg-lime-400',
+    icon: systemUpdate,
+  },
+  [StepCode.FINALIZING]: {
+    status: 'Finalizing...',
+    description: 'Do not unplug your device until the process is complete',
+    bgColor: 'bg-lime-400',
+    icon: systemUpdate,
+  },
+  [StepCode.DONE]: {
+    status: 'Done',
+    description: 'Your device was flashed successfully. It should now boot into the openpilot setup.',
+    bgColor: 'bg-green-500',
+    icon: done,
+  },
+}
+
+const errors = {
+  [ErrorCode.UNKNOWN]: {
+    status: 'Unknown error',
+    description: 'An unknown error has occurred. Unplug your device, restart your browser and try again.',
+    bgColor: 'bg-red-500',
+    icon: exclamation,
+  },
+  [ErrorCode.REQUIREMENTS_NOT_MET]: {
+    status: 'Requirements not met',
+    description: 'Your system does not meet the requirements to flash your device. Make sure to use a browser which supports WebUSB and is up to date.',
+  },
+  [ErrorCode.STORAGE_SPACE]: {
+    description: 'Your system does not have enough space available to download AGNOS. Your browser may be restricting the available space if you are in a private, incognito or guest session.',
+  },
+  [ErrorCode.UNRECOGNIZED_DEVICE]: {
+    status: 'Unrecognized device',
+    description: 'The device connected to your computer is not supported. Try using a different cable, USB port, or computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
+    bgColor: 'bg-yellow-500',
+    icon: deviceQuestion,
+  },
+  [ErrorCode.LOST_CONNECTION]: {
+    status: 'Lost connection',
+    description: 'The connection to your device was lost. Unplug your device and try again.',
+    icon: cable,
+  },
+  [ErrorCode.REPAIR_PARTITION_TABLES_FAILED]: {
+    status: 'Repairing partition tables failed',
+    description: 'Your device\'s partition tables could not be repaired. Try using a different cable, USB port, or computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
+    icon: deviceExclamation,
+  },
+  [ErrorCode.ERASE_FAILED]: {
+    status: 'Erase failed',
+    description: 'The device could not be erased. Try using a different cable, USB port, or computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
+    icon: deviceExclamation,
+  },
+  [ErrorCode.FLASH_SYSTEM_FAILED]: {
+    status: 'Flash failed',
+    description: 'AGNOS could not be flashed to your device. Try using a different cable, USB port, or computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
+    icon: deviceExclamation,
+  },
+}
+
+if (isLinux) {
+  errors[ErrorCode.LOST_CONNECTION].description += ' Did you forget to unbind the device from qcserial?'
+}
+
+function beforeUnloadListener(event) {
+  event.preventDefault()
+  return (event.returnValue = "Flash in progress. Are you sure you want to leave?")
+}
+
+class FlashView extends HTMLElement {
+  constructor() {
+    super()
+    this.step = StepCode.INITIALIZING
+    this.message = ''
+    this.progress = -1
+    this.error = ErrorCode.NONE
+    this.connected = false
+    this.serial = null
+
+    this.qdlManager = null
+    this.imageManager = createImageManager()
+  }
+
+  connectedCallback() {
+    this.render()
+    fetch(config.loader.url)
+      .then(res => res.arrayBuffer())
+      .then(programmer => {
+        this.qdlManager = new FlashManager(config.manifests.release, programmer, {
+          onStepChange: s => { this.step = s; this.render() },
+          onMessageChange: m => { this.message = m; this.render() },
+          onProgressChange: p => { this.progress = p; this.render() },
+          onErrorChange: e => { this.error = e; this.render() },
+          onConnectionChange: c => { this.connected = c; this.render() },
+          onSerialChange: s => { this.serial = s; this.render() },
+        })
+        return this.qdlManager.initialize(this.imageManager)
+      })
+      .catch(err => {
+        console.error('Error initializing Flash manager:', err)
+        this.error = ErrorCode.UNKNOWN
+        this.render()
+      })
+
+    this.addEventListener('click', this.handleClick)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.handleClick)
+    window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true })
+  }
+
+  handleClick = (e) => {
+    const { id } = e.target
+    if (id === 'flash-start' && this.canStart()) {
+      this.qdlManager?.start()
+    } else if (id === 'flash-retry') {
+      window.location.reload()
+    }
+  }
+
+  canStart() {
+    return this.step === StepCode.READY && !this.error
+  }
+
+  render() {
+    const uiState = { ...steps[this.step] }
+    if (this.error) {
+      Object.assign(uiState, errors[ErrorCode.UNKNOWN], errors[this.error])
+    }
+    const { status, description, bgColor, icon, iconStyle = 'invert' } = uiState
+
+    let title
+    if (this.message && !this.error) {
+      title = this.message + '...'
+      if (this.progress >= 0) {
+        title += ` (${(this.progress * 100).toFixed(0)}%)`
+      }
+    } else if (this.error === ErrorCode.STORAGE_SPACE) {
+      title = this.message
+    } else {
+      title = status
+    }
+
+    if (this.step >= StepCode.REPAIR_PARTITION_TABLES && this.step <= StepCode.FINALIZING) {
+      window.addEventListener('beforeunload', beforeUnloadListener, { capture: true })
+    } else {
+      window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true })
+    }
+
+    this.innerHTML = `
+      <div class="relative flex flex-col gap-8 justify-center items-center h-full">
+        <div id="flash-start" class="p-8 rounded-full ${bgColor}" style="cursor: ${this.canStart() ? 'pointer' : 'default'}">
+          <img src="${icon}" alt="cable" width="128" height="128" class="${iconStyle} ${!this.error && this.step !== StepCode.DONE ? 'animate-pulse' : ''}" />
+        </div>
+        <div class="w-full max-w-3xl px-8 transition-opacity duration-300" style="opacity: ${this.progress === -1 ? 0 : 1}">
+          <div class="relative w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div class="absolute top-0 bottom-0 left-0 w-full transition-all ${bgColor}" style="transform: translateX(${(this.progress * 100) - 100}%)"></div>
+          </div>
+        </div>
+        <span class="text-3xl dark:text-white font-mono font-light">${title}</span>
+        <span class="text-xl dark:text-white px-8 max-w-xl">${description || ''}</span>
+        ${this.error ? `<button id="flash-retry" class="px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 transition-colors">Retry</button>` : ''}
+        ${this.connected ? `
+          <div class="absolute bottom-0 m-0 lg:m-4 p-4 w-full sm:w-auto sm:min-w-[350px] sm:border sm:border-gray-200 dark:sm:border-gray-600 bg-white dark:bg-gray-700 text-black dark:text-white rounded-md flex flex-row gap-2" style="left:50%; transform:translate(-50%, -50%);">
+            <div class="flex flex-row gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" class="text-green-500 dark:text-[#51ff00]" height="24" width="24"><path fill="currentColor" d="M480 976q-32 0-52-20t-20-52q0-22 11-40t31-29V724H302q-24 0-42-18t-18-42V555q-20-9-31-26.609-11-17.608-11-40.108Q200 456 220 436t52-20q32 0 52 20t20 52.411Q344 511 333 528.5T302 555v109h148V324h-80l110-149 110 149h-80v340h148V560h-42V416h144v144h-42v104q0 24-18 42t-42 18H510v111q19.95 10.652 30.975 29.826Q552 884 552 904q0 32-20 52t-52 20Z"/></svg>
+              Device connected
+            </div>
+            <span class="text-gray-400">|</span>
+            <div class="flex flex-row gap-2">
+              <span>Serial:<span class="ml-2 font-mono">${this.serial || 'unknown'}</span></span>
+            </div>
+          </div>` : ''}
+      </div>
+    `
+  }
+}
+
+customElements.define('flash-view', FlashView)
+export default FlashView
+
diff --git a/src/app/Flash.jsx b/src/app/Flash.jsx
deleted file mode 100644
index 7b3ad764..00000000
--- a/src/app/Flash.jsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import { FlashManager, StepCode, ErrorCode } from '../utils/manager'
-import { useImageManager } from '../utils/image'
-import { isLinux } from '../utils/platform'
-import config from '../config'
-
-import bolt from '../assets/bolt.svg'
-import cable from '../assets/cable.svg'
-import deviceExclamation from '../assets/device_exclamation_c3.svg'
-import deviceQuestion from '../assets/device_question_c3.svg'
-import done from '../assets/done.svg'
-import exclamation from '../assets/exclamation.svg'
-import systemUpdate from '../assets/system_update_c3.svg'
-
-
-const steps = {
-  [StepCode.INITIALIZING]: {
-    status: 'Initializing...',
-    bgColor: 'bg-gray-400 dark:bg-gray-700',
-    icon: bolt,
-  },
-  [StepCode.READY]: {
-    status: 'Tap to start',
-    bgColor: 'bg-[#51ff00]',
-    icon: bolt,
-    iconStyle: '',
-  },
-  [StepCode.CONNECTING]: {
-    status: 'Waiting for connection',
-    description: 'Follow the instructions to connect your device to your computer',
-    bgColor: 'bg-yellow-500',
-    icon: cable,
-  },
-  [StepCode.REPAIR_PARTITION_TABLES]: {
-    status: 'Repairing partition tables...',
-    description: 'Do not unplug your device until the process is complete',
-    bgColor: 'bg-lime-400',
-    icon: systemUpdate,
-  },
-  [StepCode.ERASE_DEVICE]: {
-    status: 'Erasing device...',
-    description: 'Do not unplug your device until the process is complete',
-    bgColor: 'bg-lime-400',
-    icon: systemUpdate,
-  },
-  [StepCode.FLASH_SYSTEM]: {
-    status: 'Flashing device...',
-    description: 'Do not unplug your device until the process is complete',
-    bgColor: 'bg-lime-400',
-    icon: systemUpdate,
-  },
-  [StepCode.FINALIZING]: {
-    status: 'Finalizing...',
-    description: 'Do not unplug your device until the process is complete',
-    bgColor: 'bg-lime-400',
-    icon: systemUpdate,
-  },
-  [StepCode.DONE]: {
-    status: 'Done',
-    description: 'Your device was flashed successfully. It should now boot into the openpilot setup.',
-    bgColor: 'bg-green-500',
-    icon: done,
-  },
-}
-
-const errors = {
-  [ErrorCode.UNKNOWN]: {
-    status: 'Unknown error',
-    description: 'An unknown error has occurred. Unplug your device, restart your browser and try again.',
-    bgColor: 'bg-red-500',
-    icon: exclamation,
-  },
-  [ErrorCode.REQUIREMENTS_NOT_MET]: {
-    status: 'Requirements not met',
-    description: 'Your system does not meet the requirements to flash your device. Make sure to use a browser which ' +
-      'supports WebUSB and is up to date.',
-  },
-  [ErrorCode.STORAGE_SPACE]: {
-    description: 'Your system does not have enough space available to download AGNOS. Your browser may be restricting' +
-      ' the available space if you are in a private, incognito or guest session.',
-  },
-  [ErrorCode.UNRECOGNIZED_DEVICE]: {
-    status: 'Unrecognized device',
-    description: 'The device connected to your computer is not supported. Try using a different cable, USB port, or ' +
-      'computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
-    bgColor: 'bg-yellow-500',
-    icon: deviceQuestion,
-  },
-  [ErrorCode.LOST_CONNECTION]: {
-    status: 'Lost connection',
-    description: 'The connection to your device was lost. Unplug your device and try again.',
-    icon: cable,
-  },
-  [ErrorCode.REPAIR_PARTITION_TABLES_FAILED]: {
-    status: 'Repairing partition tables failed',
-    description: 'Your device\'s partition tables could not be repaired. Try using a different cable, USB port, or ' +
-      'computer. If the problem persists, join the #hw-three-3x channel on Discord for help.',
-    icon: deviceExclamation,
-  },
-  [ErrorCode.ERASE_FAILED]: {
-    status: 'Erase failed',
-    description: 'The device could not be erased. Try using a different cable, USB port, or computer. If the problem ' +
-      'persists, join the #hw-three-3x channel on Discord for help.',
-    icon: deviceExclamation,
-  },
-  [ErrorCode.FLASH_SYSTEM_FAILED]: {
-    status: 'Flash failed',
-    description: 'AGNOS could not be flashed to your device. Try using a different cable, USB port, or computer. If ' +
-      'the problem persists, join the #hw-three-3x channel on Discord for help.',
-    icon: deviceExclamation,
-  },
-}
-
-if (isLinux) {
-  // this is likely in StepCode.CONNECTING
-  errors[ErrorCode.LOST_CONNECTION].description += ' Did you forget to unbind the device from qcserial?'
-}
-
-
-function LinearProgress({ value, barColor }) {
-  if (value === -1 || value > 100) value = 100
-  return (
-    <div className="relative w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-      <div
-        className={`absolute top-0 bottom-0 left-0 w-full transition-all ${barColor}`}
-        style={{ transform: `translateX(${value - 100}%)` }}
-      />
-    </div>
-  )
-}
-
-
-function DeviceState({ serial }) {
-  return (
-    <div
-      className="absolute bottom-0 m-0 lg:m-4 p-4 w-full sm:w-auto sm:min-w-[350px] sm:border sm:border-gray-200 dark:sm:border-gray-600 bg-white dark:bg-gray-700 text-black dark:text-white rounded-md flex flex-row gap-2"
-      style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
-    >
-      <div className="flex flex-row gap-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 96 960 960"
-          className="text-green-500 dark:text-[#51ff00]"
-          height="24"
-          width="24"
-        >
-          <path
-            fill="currentColor"
-            d="M480 976q-32 0-52-20t-20-52q0-22 11-40t31-29V724H302q-24 0-42-18t-18-42V555q-20-9-31-26.609-11-17.608-11-40.108Q200 456 220 436t52-20q32 0 52 20t20 52.411Q344 511 333 528.5T302 555v109h148V324h-80l110-149 110 149h-80v340h148V560h-42V416h144v144h-42v104q0 24-18 42t-42 18H510v111q19.95 10.652 30.975 29.826Q552 884 552 904q0 32-20 52t-52 20Z"
-          />
-        </svg>
-        Device connected
-      </div>
-      <span className="text-gray-400">|</span>
-      <div className="flex flex-row gap-2">
-        <span>
-          Serial:
-          <span className="ml-2 font-mono">{serial || 'unknown'}</span>
-        </span>
-      </div>
-    </div>
-  )
-}
-
-
-function beforeUnloadListener(event) {
-  // NOTE: not all browsers will show this message
-  event.preventDefault()
-  return (event.returnValue = "Flash in progress. Are you sure you want to leave?")
-}
-
-
-export default function Flash() {
-  const [step, setStep] = useState(StepCode.INITIALIZING)
-  const [message, setMessage] = useState('')
-  const [progress, setProgress] = useState(-1)
-  const [error, setError] = useState(ErrorCode.NONE)
-  const [connected, setConnected] = useState(false)
-  const [serial, setSerial] = useState(null)
-
-  const qdlManager = useRef(null)
-  const imageManager = useImageManager()
-
-  useEffect(() => {
-    if (!imageManager.current) return
-
-    fetch(config.loader.url)
-      .then((res) => res.arrayBuffer())
-      .then((programmer) => {
-        // Create QDL manager with callbacks that update React state
-        qdlManager.current = new FlashManager(config.manifests.release, programmer, {
-          onStepChange: setStep,
-          onMessageChange: setMessage,
-          onProgressChange: setProgress,
-          onErrorChange: setError,
-          onConnectionChange: setConnected,
-          onSerialChange: setSerial
-        })
-
-        // Initialize the manager
-        return qdlManager.current.initialize(imageManager.current)
-      })
-      .catch((err) => {
-        console.error('Error initializing Flash manager:', err)
-        setError(ErrorCode.UNKNOWN)
-      })
-  }, [config, imageManager.current])
-
-  // Handle user clicking the start button
-  const handleStart = () => qdlManager.current?.start()
-  const canStart = step === StepCode.READY && !error
-
-  // Handle retry on error
-  const handleRetry = () => window.location.reload()
-
-  const uiState = steps[step]
-  if (error) {
-    Object.assign(uiState, errors[ErrorCode.UNKNOWN], errors[error])
-  }
-  const { status, description, bgColor, icon, iconStyle = 'invert' } = uiState
-
-  let title
-  if (message && !error) {
-    title = message + '...'
-    if (progress >= 0) {
-      title += ` (${(progress * 100).toFixed(0)}%)`
-    }
-  } else if (error === ErrorCode.STORAGE_SPACE) {
-    title = message
-  } else {
-    title = status
-  }
-
-  // warn the user if they try to leave the page while flashing
-  if (step >= StepCode.REPAIR_PARTITION_TABLES && step <= StepCode.FINALIZING) {
-    window.addEventListener("beforeunload", beforeUnloadListener, { capture: true })
-  } else {
-    window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true })
-  }
-
-  return (
-    <div id="flash" className="relative flex flex-col gap-8 justify-center items-center h-full">
-      <div
-        className={`p-8 rounded-full ${bgColor}`}
-        style={{ cursor: canStart ? 'pointer' : 'default' }}
-        onClick={canStart ? handleStart : null}
-      >
-        <img
-          src={icon}
-          alt="cable"
-          width={128}
-          height={128}
-          className={`${iconStyle} ${!error && step !== StepCode.DONE ? 'animate-pulse' : ''}`}
-        />
-      </div>
-      <div className="w-full max-w-3xl px-8 transition-opacity duration-300" style={{ opacity: progress === -1 ? 0 : 1 }}>
-        <LinearProgress value={progress * 100} barColor={bgColor} />
-      </div>
-      <span className="text-3xl dark:text-white font-mono font-light">{title}</span>
-      <span className="text-xl dark:text-white px-8 max-w-xl">{description}</span>
-      {error && (
-        <button
-          className="px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 transition-colors"
-          onClick={handleRetry}
-        >
-          Retry
-        </button>
-      ) || false}
-      {connected && <DeviceState serial={serial} />}
-    </div>
-  )
-}
diff --git a/src/app/index.js b/src/app/index.js
new file mode 100644
index 00000000..5ccbf336
--- /dev/null
+++ b/src/app/index.js
@@ -0,0 +1,158 @@
+import comma from '../assets/comma.svg'
+import qdlPorts from '../assets/qdl-ports.svg'
+import zadigCreateNewDevice from '../assets/zadig_create_new_device.png'
+import zadigForm from '../assets/zadig_form.png'
+
+import { isLinux, isWindows } from '../utils/platform'
+import './Flash.js'
+
+const VENDOR_ID = '05C6'
+const PRODUCT_ID = '9008'
+const DETACH_SCRIPT = 'for d in /sys/bus/usb/drivers/qcserial/*-*; do [ -e "$d" ] && echo -n "$(basename $d)" | sudo tee /sys/bus/usb/drivers/qcserial/unbind > /dev/null; done'
+
+function createCopyText(text) {
+  const wrapper = document.createElement('div')
+  wrapper.className = 'relative text-sm'
+  const pre = document.createElement('pre')
+  pre.className = 'font-mono pt-12'
+  pre.textContent = text
+  const btn = document.createElement('button')
+  btn.className = 'absolute top-2 right-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-300 transition-colors text-white p-1 rounded-md'
+  btn.textContent = 'Copy'
+  btn.addEventListener('click', () => navigator.clipboard.writeText(text))
+  wrapper.append(pre, btn)
+  return wrapper
+}
+
+class FlashApp extends HTMLElement {
+  connectedCallback() {
+    const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
+    console.info(`flash.comma.ai version: ${version}`)
+
+    const windowsSection = isWindows ? `
+            <h3>USB Driver</h3>
+            <p>You need additional driver software for Windows before you connect your device.</p>
+            <ol>
+              <li>
+                Download and run <a href="https://zadig.akeo.ie/" target="_blank">Zadig</a>.
+              </li>
+              <li>
+                Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
+                <img src="${zadigCreateNewDevice}" alt="Zadig Create New Device" width="575" height="254" />
+              </li>
+              <li>
+                Fill in three fields. The first field is just a description and you can fill in anything. The next two fields are very important. Fill them in with <code>${VENDOR_ID}</code> and <code>${PRODUCT_ID}</code> respectively. Press &quot;Install Driver&quot; and give it a few minutes to install.
+                <img src="${zadigForm}" alt="Zadig Form" width="575" height="254" />
+              </li>
+            </ol>
+            <p>No additional software is required for macOS, Linux or Android.</p>
+          ` : ''
+
+    const linuxSection = isLinux ? `
+            <strong>Note for Linux users</strong>
+            <p>
+              On Linux systems, devices in QDL mode are automatically bound to the kernel's qcserial driver, and need to be unbound before we can access the device. Copy the script below into your terminal and run it after plugging in your device.
+            </p>
+            <div id="detach-script"></div>
+          ` : ''
+
+    this.innerHTML = `
+    <div class="flex flex-col lg:flex-row flex-wrap">
+      <main class="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
+        <section>
+          <img src="${comma}" alt="comma" width="128" height="128" class="dark:invert" />
+          <h1>flash.comma.ai</h1>
+          <p>
+            This tool allows you to flash AGNOS onto your comma device. AGNOS is the Ubuntu-based operating system for your <a href="https://comma.ai/shop/comma-3x" target="_blank">comma 3/3X</a>.
+          </p>
+        </section>
+        <hr />
+
+        <section>
+          <h2>Requirements</h2>
+          <ul>
+            <li>
+              A web browser which supports <a href="https://caniuse.com/webusb" target="_blank">WebUSB</a> (such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android.
+            </li>
+            <li>
+              A good quality USB-C cable to connect the device to your computer. <span title="SuperSpeed">USB 3</span> is recommended for faster flashing speed.
+            </li>
+            <li>
+              Another USB-C cable and a charger, to power the device outside your car.
+            </li>
+          </ul>
+          ${windowsSection}
+        </section>
+        <hr />
+
+        <section>
+          <h2>Flashing</h2>
+          <p>Follow these steps to put your device into QDL mode:</p>
+          <ol>
+            <li>Unplug the device and wait for the LED to switch off.</li>
+            <li>First, connect the device to your computer using the <strong>lower</strong> <span class="whitespace-nowrap">USB-C</span> port <strong>(port 1)</strong>.</li>
+            <li>Second, connect power to the <strong>upper</strong> <span class="whitespace-nowrap">OBD-C</span> port <strong>(port 2)</strong>.</li>
+          </ol>
+          <img src="${qdlPorts}" alt="image showing comma three and two ports. the lower port is labeled 1. the upper port is labeled 2." width="450" height="300" />
+          <p>Your device's screen will remain blank for the entire flashing process. This is normal.</p>
+          ${linuxSection}
+          <p>
+            Next, click the button to start flashing. From the prompt select the device which starts with &ldquo;QUSB_BULK&rdquo;.
+          </p>
+          <p>
+            The process can take 30+ minutes depending on your internet connection and system performance. Do not unplug the device until all steps are complete.
+          </p>
+        </section>
+        <hr />
+
+        <section>
+          <h2>Troubleshooting</h2>
+          <h3>Lost connection</h3>
+          <p>
+            Try using high quality USB 3 cables. You should also try different USB ports on the front or back of your computer. If you're using a USB hub, try connecting directly to your computer instead.
+          </p>
+          <h3>My device's screen is blank</h3>
+          <p>
+            This is normal in QDL mode. You can verify that the &ldquo;QUSB_BULK&rdquo; device shows up when you press the Flash button to know that it is working correctly.
+          </p>
+          <h3>My device says &ldquo;fastboot mode&rdquo;</h3>
+          <p>
+            You may have followed outdated instructions for flashing. Please read the instructions above for putting your device into QDL mode.
+          </p>
+          <h3>General Tips</h3>
+          <ul>
+            <li>Try another computer or OS</li>
+            <li>Try different USB ports on your computer</li>
+            <li>Try different USB-C cables; low quality cables are often the source of problems. Note that the included OBD-C cable will not work.</li>
+          </ul>
+          <h3>Other questions</h3>
+          <p>
+            If you need help, join our <a href="https://discord.comma.ai" target="_blank">Discord server</a> and go to the <strong>#hw-three-3x</strong> channel.
+          </p>
+        </section>
+
+        <div class="hidden lg:block">
+          <hr />
+          flash.comma.ai version: <a href="https://github.com/commaai/flash/tree/${version}" target="_blank"><code>${version}</code></a>
+        </div>
+      </main>
+
+      <div class="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
+        <flash-view></flash-view>
+      </div>
+
+      <div class="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">
+        flash.comma.ai version: <a href="https://github.com/commaai/flash/tree/${version}" target="_blank"><code>${version}</code></a>
+      </div>
+    </div>`
+
+    if (isLinux) {
+      const holder = this.querySelector('#detach-script')
+      holder.replaceWith(createCopyText(DETACH_SCRIPT))
+    }
+  }
+}
+
+customElements.define('flash-app', FlashApp)
+export default FlashApp
+
diff --git a/src/app/index.jsx b/src/app/index.jsx
deleted file mode 100644
index d3285271..00000000
--- a/src/app/index.jsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Suspense, lazy } from 'react'
-
-import comma from '../assets/comma.svg'
-import qdlPorts from '../assets/qdl-ports.svg'
-import zadigCreateNewDevice from '../assets/zadig_create_new_device.png'
-import zadigForm from '../assets/zadig_form.png'
-
-import { isLinux, isWindows } from '../utils/platform'
-
-const Flash = lazy(() => import('./Flash'))
-
-const VENDOR_ID = '05C6'
-const PRODUCT_ID = '9008'
-const DETACH_SCRIPT = 'for d in /sys/bus/usb/drivers/qcserial/*-*; do [ -e "$d" ] && echo -n "$(basename $d)" | sudo tee /sys/bus/usb/drivers/qcserial/unbind > /dev/null; done';
-
-function CopyText({ children: text }) {
-  return <div className="relative text-sm">
-    <pre className="font-mono pt-12">{text}</pre>
-    <button
-      className="absolute top-2 right-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-300 transition-colors text-white p-1 rounded-md"
-      onClick={() => navigator.clipboard.writeText(text)}
-    >
-      Copy
-    </button>
-  </div>;
-}
-
-export default function App() {
-  const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
-  console.info(`flash.comma.ai version: ${version}`)
-  return (
-    <div className="flex flex-col lg:flex-row flex-wrap">
-      <main className="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
-        <section>
-          <img src={comma} alt="comma" width={128} height={128} className="dark:invert" />
-          <h1>flash.comma.ai</h1>
-          <p>
-            This tool allows you to flash AGNOS onto your comma device. AGNOS is the Ubuntu-based operating system for
-            your <a href="https://comma.ai/shop/comma-3x" target="_blank">comma 3/3X</a>.
-          </p>
-        </section>
-        <hr />
-
-        <section>
-          <h2>Requirements</h2>
-          <ul>
-            <li>
-              A web browser which supports <a href="https://caniuse.com/webusb" target="_blank">WebUSB</a>
-              {" "}(such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android.
-            </li>
-            <li>
-              A good quality USB-C cable to connect the device to your computer. <span title="SuperSpeed">USB 3</span>
-              {" "}is recommended for faster flashing speed.
-            </li>
-            <li>
-              Another USB-C cable and a charger, to power the device outside your car.
-            </li>
-          </ul>
-          {isWindows && (<>
-            <h3>USB Driver</h3>
-            <p>You need additional driver software for Windows before you connect your device.</p>
-            <ol>
-              <li>
-                Download and run <a href="https://zadig.akeo.ie/" target="_blank">Zadig</a>.
-              </li>
-              <li>
-                Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
-                <img
-                  src={zadigCreateNewDevice}
-                  alt="Zadig Create New Device"
-                  width={575}
-                  height={254}
-                />
-              </li>
-              <li>
-                Fill in three fields. The first field is just a description and you can fill in anything. The next two
-                fields are very important. Fill them in with <code>{VENDOR_ID}</code> and <code>{PRODUCT_ID}</code>
-                respectively. Press &quot;Install Driver&quot; and give it a few minutes to install.
-                <img
-                  src={zadigForm}
-                  alt="Zadig Form"
-                  width={575}
-                  height={254}
-                />
-              </li>
-            </ol>
-            <p>No additional software is required for macOS, Linux or Android.</p>
-          </>)}
-        </section>
-        <hr />
-
-        <section>
-          <h2>Flashing</h2>
-          <p>Follow these steps to put your device into QDL mode:</p>
-          <ol>
-            <li>Unplug the device and wait for the LED to switch off.</li>
-            <li>First, connect the device to your computer using the <strong>lower</strong> <span className="whitespace-nowrap">USB-C</span> port <strong>(port 1)</strong>.</li>
-            <li>Second, connect power to the <strong>upper</strong> <span className="whitespace-nowrap">OBD-C</span> port <strong>(port 2)</strong>.</li>
-          </ol>
-          <img
-            src={qdlPorts}
-            alt="image showing comma three and two ports. the lower port is labeled 1. the upper port is labeled 2."
-            width={450}
-            height={300}
-          />
-          <p>Your device&apos;s screen will remain blank for the entire flashing process. This is normal.</p>
-          {isLinux && (<>
-            <strong>Note for Linux users</strong>
-            <p>
-              On Linux systems, devices in QDL mode are automatically bound to the kernel&apos;s qcserial driver, and
-              need to be unbound before we can access the device. Copy the script below into your terminal and run it
-              after plugging in your device.
-            </p>
-            <CopyText>{DETACH_SCRIPT}</CopyText>
-          </>)}
-          <p>
-            Next, click the button to start flashing. From the prompt select the device which starts with
-            &ldquo;QUSB_BULK&rdquo;.
-          </p>
-          <p>
-            The process can take 30+ minutes depending on your internet connection and system performance. Do not
-            unplug the device until all steps are complete.
-          </p>
-        </section>
-        <hr />
-
-        <section>
-          <h2>Troubleshooting</h2>
-          <h3>Lost connection</h3>
-          <p>
-            Try using high quality USB 3 cables. You should also try different USB ports on the front or back of your
-            computer. If you&apos;re using a USB hub, try connecting directly to your computer instead.
-          </p>
-          <h3>My device&apos;s screen is blank</h3>
-          <p>
-            This is normal in QDL mode. You can verify that the &ldquo;QUSB_BULK&rdquo; device shows up when you press
-            the Flash button to know that it is working correctly.
-          </p>
-          <h3>My device says &ldquo;fastboot mode&rdquo;</h3>
-          <p>
-            You may have followed outdated instructions for flashing. Please read the instructions above for putting
-            your device into QDL mode.
-          </p>
-          <h3>General Tips</h3>
-          <ul>
-            <li>Try another computer or OS</li>
-            <li>Try different USB ports on your computer</li>
-            <li>Try different USB-C cables; low quality cables are often the source of problems. Note that the included OBD-C cable will not work.</li>
-          </ul>
-          <h3>Other questions</h3>
-          <p>
-            If you need help, join our <a href="https://discord.comma.ai" target="_blank">Discord server</a> and go to
-            the <strong>#hw-three-3x</strong> channel.
-          </p>
-        </section>
-
-        <div className="hidden lg:block">
-          <hr />
-          flash.comma.ai version: <a href={`https://github.com/commaai/flash/tree/${version}`} target="_blank"><code>{version}</code></a>
-        </div>
-      </main>
-
-      <div className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
-        <Suspense fallback={<p className="text-black dark:text-white">Loading...</p>}>
-          <Flash />
-        </Suspense>
-      </div>
-
-      <div className="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">
-        flash.comma.ai version: <a href={`https://github.com/commaai/flash/tree/${version}`} target="_blank"><code>{version}</code></a>
-      </div>
-    </div>
-  )
-}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..2ea8d1e4
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,8 @@
+import '@fontsource-variable/inter'
+import '@fontsource-variable/jetbrains-mono'
+
+import './index.css'
+import './app/index.js'
+
+const root = document.getElementById('root')
+root.appendChild(document.createElement('flash-app'))
diff --git a/src/main.jsx b/src/main.jsx
deleted file mode 100644
index 40fea3ef..00000000
--- a/src/main.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import '@fontsource-variable/inter'
-import '@fontsource-variable/jetbrains-mono'
-
-import './index.css'
-import App from './app'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
diff --git a/src/test/setup.js b/src/test/setup.js
deleted file mode 100644
index c44951a6..00000000
--- a/src/test/setup.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@testing-library/jest-dom'
diff --git a/src/utils/image.js b/src/utils/image.js
index e1977f97..98855efb 100644
--- a/src/utils/image.js
+++ b/src/utils/image.js
@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react'
 import { XzReadableStream } from 'xz-decompress'
 
 import { fetchStream } from './stream'
@@ -83,14 +82,8 @@ export class ImageManager {
   }
 }
 
-/** @returns {React.MutableRefObject<ImageManager>} */
-export function useImageManager() {
-  const apiRef = useRef()
-
-  useEffect(() => {
-    const worker = new ImageManager()
-    apiRef.current = worker
-  }, [])
-
-  return apiRef
+// Retain a simple factory for creating an ImageManager instance in
+// environments without React hooks.
+export function createImageManager() {
+  return new ImageManager()
 }
diff --git a/src/utils/manifest.test.js b/src/utils/manifest.test.js
deleted file mode 100644
index 3167e825..00000000
--- a/src/utils/manifest.test.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { beforeAll, describe, expect, test, vi } from 'vitest'
-
-import config from '../config'
-import { ImageManager } from './image'
-import { getManifest } from './manifest'
-
-const CI = import.meta.env.CI
-const MANIFEST_BRANCH = import.meta.env.MANIFEST_BRANCH
-
-const imageManager = new ImageManager()
-
-beforeAll(async () => {
-  globalThis.navigator = {
-    storage: {
-      estimate: vi.fn().mockImplementation(() => ({ quota: 10 * (1024 ** 3) })),
-      getDirectory: () => ({
-        getFileHandle: () => ({
-          createWritable: vi.fn().mockImplementation(() => new WritableStream({
-            write(_) {
-              // Discard the chunk (do nothing with it)
-            },
-            close() { },
-            abort(err) {
-              console.error('Mock writable stream aborted:', err)
-            },
-          })),
-        }),
-        remove: vi.fn(),
-      }),
-    },
-  }
-
-  await imageManager.init()
-})
-
-for (const [branch, manifestUrl] of Object.entries(config.manifests)) {
-  describe.skipIf(MANIFEST_BRANCH && branch !== MANIFEST_BRANCH)(`${branch} manifest`, async () => {
-    const images = await getManifest(manifestUrl)
-
-    // Check all images are present
-    expect(images.length).toBe(33)
-
-    let countGpt = 0
-
-    for (const image of images) {
-      if (image.gpt !== null) countGpt++
-
-      const big = image.name === 'system' || image.name.startsWith('userdata_')
-      describe(`${image.name} image`, async () => {
-        test('xz archive', () => {
-          expect(image.fileName, 'file to be uncompressed').not.toContain('.xz')
-          if (image.name === 'system') {
-            if (image.compressed) {
-              expect(image.fileName, 'not to equal archive name').not.toEqual(image.archiveFileName)
-              expect(image.archiveFileName, 'archive to be in xz format').toContain('.xz')
-              expect(image.archiveUrl, 'archive url to be in xz format').toContain('.xz')
-            } else {
-              expect(image.fileName, 'to equal archive name').toEqual(image.archiveFileName)
-              expect(image.archiveUrl, 'archive url to not be in xz format').not.toContain('.xz')
-            }
-          } else {
-            expect(image.compressed, 'image to be compressed').toBe(true)
-            expect(image.archiveFileName, 'archive to be in xz format').toContain('.xz')
-            expect(image.archiveUrl, 'archive url to be in xz format').toContain('.xz')
-          }
-        })
-
-        test.skipIf(big && !MANIFEST_BRANCH)('download', {
-          timeout: (big ? 11 * 60 : 20) * 1000,
-          repeats: 1,
-        }, async () => {
-          await imageManager.downloadImage(image)
-        })
-      })
-    }
-
-    // There should be one GPT image for each LUN
-    expect(countGpt).toBe(6)
-  })
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index f1f20e20..b9a60802 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 export default {
   content: [
     './index.html',
-    './src/**/*.{js,jsx}',
+    './src/**/*.js',
   ],
   theme: {
     extend: {
diff --git a/vite.config.js b/vite.config.js
index 17ac32a0..720e89cb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,12 +1,8 @@
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
   test: {
     globals: true,
     environment: 'jsdom',
-    setupFiles: './src/test/setup.js',
   },
 })
