diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 47c0f26904e..19cb58ba3fb 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts
@@ -28,6 +28,7 @@ import {
 } from "./plugins/cssBundleEntryModulePlugin";
 import { writeFileSafe } from "./utils/fs";
 import invariant from "../invariant";
+import { hmrPlugin } from "./plugins/hmrPlugin";
 
 export type BrowserCompiler = {
   // produce ./public/build/
@@ -132,6 +133,7 @@ const createEsbuildConfig = (
     entryPoints["react-dom/client"] = "react-dom/client";
     entryPoints["react-refresh/runtime"] = "react-refresh/runtime";
     entryPoints["remix:hmr"] = "remix:hmr";
+    plugins.push(hmrPlugin());
   }
 
   return {
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index 48baf48febe..996c8ad370f 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -44,6 +44,7 @@
     "fs-extra": "^10.0.0",
     "get-port": "^5.1.1",
     "gunzip-maybe": "^1.4.2",
+    "http-proxy": "^1.18.1",
     "inquirer": "^8.2.1",
     "jsesc": "3.0.2",
     "json5": "^2.2.1",
@@ -60,6 +61,7 @@
     "prettier": "2.7.1",
     "pretty-ms": "^7.0.1",
     "proxy-agent": "^5.0.0",
+    "react-refresh": "^0.14.0",
     "recast": "^0.21.5",
     "remark-frontmatter": "4.0.1",
     "remark-mdx-frontmatter": "^1.0.1",
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 8075d402fdc..804f8573c69 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -890,6 +890,7 @@ export function Scripts(props: ScriptProps) {
           ? `__remixContext.a=${deferredScripts.length};`
           : "");
 
+    // TODO: change to be dynamic imports for routes
     let routeModulesScript = !isStatic
       ? " "
       : `${matches
@@ -1527,6 +1528,15 @@ function convertRouterFetcherToRemixFetcher(
   return fetcher;
 }
 
+export let Hmr = () => {
+  let [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    setHydrated(true);
+  }, []);
+  if (!hydrated) return null;
+  return <script src={window.__remixContext.dev.hmrRuntime} />;
+};
+
 // Dead Code Elimination magic for production builds.
 // This way devs don't have to worry about doing the NODE_ENV check themselves.
 // If running an un-bundled server outside of `remix dev` you will still need
diff --git a/yarn.lock b/yarn.lock
index fe85f86cfcd..8d4c7e0d042 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6022,6 +6022,11 @@ eventemitter2@^6.4.3:
   resolved "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz"
   integrity sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==
 
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
 events@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/events/-/events-1.1.1.tgz"
@@ -6325,6 +6330,11 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz"
   integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
 
+follow-redirects@^1.0.0:
+  version "1.15.2"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz"
@@ -6884,6 +6894,15 @@ http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz"
@@ -10499,6 +10518,11 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
+
 react-router-dom@6.8.0-pre.1:
   version "6.8.0-pre.1"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.0-pre.1.tgz#94011ddc55cbe380ca205c642a29ce5efee69808"
@@ -10826,6 +10850,11 @@ requireindex@^1.2.0, requireindex@~1.2.0:
   resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz"
   integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz"