diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72ea93c..a2fb8a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+**New**
+
+- Under `vite dev`, an edit inside a dependency's components re-renders them in place instead of reloading the page:
+  the module's top-level sources and every other component's state are kept. An edit to the module's top level or to
+  an entry still reloads. The runtime's new `@reactivescript/runtime/hot` entry does the swap; it needs a
+  `@solidjs/vite-plugin` with the front end's `hotUpdate` hook.
+
 **Fixed**
 
 - `affects` on a keyed or structured source that takes a guess threw `INVALID_AFFECTS_TARGET` in a dev build, so the
diff --git a/compiler/README.md b/compiler/README.md
index 17769fb..94a2bdd 100644
--- a/compiler/README.md
+++ b/compiler/README.md
@@ -88,8 +88,14 @@ What happens to a `.rx` module in Vite:
 The app mounts a program with `createApp` from `@reactivescript/runtime`
 (`../runtime`, CP-4a), as the examples do.
 
-Not yet: hot updates of `.rx` modules are untested; server rendering in Vite
-needs a request-scoped app for server functions to run in.
+Hot updates: with a Solid plugin that has the front end's `hotUpdate` hook,
+an edit inside a dependency's components (markup, logic, `<style>`) swaps
+them in place through `@reactivescript/runtime/hot`, keeping the module's
+sources and every other component's state. An edit to a module's top level,
+or to an entry, reloads the page.
+
+Not yet: server rendering in Vite needs a request-scoped app for server
+functions to run in.
 
 ### Releasing
 
diff --git a/compiler/src/app.rs b/compiler/src/app.rs
index ca1f7cd..7e1958a 100644
--- a/compiler/src/app.rs
+++ b/compiler/src/app.rs
@@ -23,7 +23,7 @@ pub fn target(name: &str) -> Target {
     }
 }
 
-/// `{entry, css, modules: {path: {code, map}}}`, or `{diagnostics: [...]}` / `{error}`. `entry` is an absolute path.
+/// `{entry, css, modules: {path: {code, map, css}}}` (the program's stylesheet, and each module's own), or `{diagnostics: [...]}` / `{error}`. `entry` is an absolute path.
 /// `spa`: a client-only build, checked under 08 CN-3d.
 pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
     // module keys are POSIX paths (`modules::join_path`); Windows takes `D:/a/b.rx` as it takes `D:\a\b.rx`
@@ -49,7 +49,7 @@ pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
             let path = &out.paths[name];
             let text = read_disk(path).unwrap_or_default();
             let l = lower_view(module, path, target, module_name, Some((path, &text))).map_err(|e| json!({ "error": e }))?;
-            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map }));
+            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map, "css": out.module_css[name], "hot": out.module_hot.get(name).map(|(c, top)| json!({ "components": c, "top": top })) }));
         }
         Ok(json!({ "entry": set.entry, "css": out.css, "modules": modules }))
     })()
diff --git a/compiler/src/emit.rs b/compiler/src/emit.rs
index ffc44a3..59a7e9e 100644
--- a/compiler/src/emit.rs
+++ b/compiler/src/emit.rs
@@ -180,6 +180,11 @@ pub struct Compiled {
     pub entry: String,
     /// CSS-4: the modules' stylesheets, beside their JavaScript
     pub css: String,
+    /// CSS-4: each module's own stylesheet, by its output name
+    pub module_css: IndexMap<String, String>,
+    /// a dependency's exported components and a fingerprint of the rest of its text, by output name: a dev server swaps the
+    /// components when the fingerprint holds
+    pub module_hot: IndexMap<String, (Vec<String>, String)>,
 }
 
 /// 09 MO-1: one ES module per `.rx` module. A dependency's module is a factory over the app (`__rt.module` runs it once per
@@ -197,8 +202,11 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
     g.by_source = by_source;
     let mut files = IndexMap::new();
     let mut paths = IndexMap::new();
+    let mut module_css = IndexMap::new();
+    let mut module_hot = IndexMap::new();
     for path in &set.order {
         let p = &set.programs[path];
+        let css0 = g.css.len();
         g.begin_module(path, &p.decls);
         let mut deps: Vec<&str> = vec![];
         for d in &p.decls {
@@ -230,12 +238,57 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
             body.append(&mut g.top);
             let mut fbody = vec![konst("__B", dot(id("__rt"), "B"))];
             fbody.append(&mut inner);
+            if let Some(shape) = hot_shape(p, set.sources.get(path).map(String::as_str).unwrap_or("")) {
+                module_hot.insert(g.out(path), shape);
+            }
             body.push(S::ExportDefault(Func { name: Some("module".into()), params: vec![P::Id("__rt".into())], directives: vec![], body: fbody, is_async: false, generator: false }));
         }
+        module_css.insert(g.out(path), g.css[css0..].join("\n"));
         files.insert(g.out(path), body);
         paths.insert(g.out(path), path.clone());
     }
-    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n") })
+    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n"), module_css, module_hot })
+}
+
+/// A dependency's exported components, and a hash of its text outside their bodies (each component's header stays in it);
+/// `None` when that text names a JS import or calls an `.rx` one, which a replay would call again outside its record.
+fn hot_shape(p: &Program, text: &str) -> Option<(Vec<String>, String)> {
+    use std::hash::{Hash, Hasher};
+    let names = |js: bool| -> Vec<String> {
+        p.decls.iter().filter_map(|d| match d { Decl::Import { resolved, names, .. } if resolved.is_none() == js => Some(names), _ => None }).flatten().map(|n| regex::escape(&n.alias)).collect()
+    };
+    let (js, rx) = (names(true), names(false));
+    let mut alts = vec![];
+    if !js.is_empty() {
+        alts.push(format!(r"\b(?:{})\b", js.join("|")));
+    }
+    if !rx.is_empty() {
+        alts.push(format!(r"\b(?:{})\s*\(", rx.join("|")));
+    }
+    let word = (!alts.is_empty()).then(|| regex::Regex::new(&alts.join("|")).ok()).flatten();
+    let mut h = std::collections::hash_map::DefaultHasher::new();
+    let mut components = vec![];
+    for d in &p.decls {
+        let span = d.span();
+        let (start, end) = (span.start as usize, span.end as usize);
+        let own = text.get(start..end).unwrap_or("");
+        match d {
+            Decl::Component { name, props, props_type, exported, is_default, .. } => {
+                (name, props, props_type, exported, is_default).hash(&mut h);
+                if *exported {
+                    components.push(name.clone());
+                }
+            }
+            Decl::Import { .. } => own.hash(&mut h),
+            _ => {
+                if word.as_ref().is_some_and(|w| w.is_match(own)) {
+                    return None;
+                }
+                own.hash(&mut h);
+            }
+        }
+    }
+    Some((components, format!("{:016x}", h.finish())))
 }
 
 struct Gen<'p> {
diff --git a/compiler/test/vite.mjs b/compiler/test/vite.mjs
index 44454d5..75290e6 100644
--- a/compiler/test/vite.mjs
+++ b/compiler/test/vite.mjs
@@ -53,7 +53,8 @@ function project(name, entry) {
   return dir;
 }
 const config = (dir, entry) => ({
-  root: dir, configFile: false, logLevel: "warn", clearScreen: false,
+  // a cache per project: the default, under the nearest package.json, would serve one run's runtime to the next
+  root: dir, cacheDir: path.join(dir, ".vite"), configFile: false, logLevel: "warn", clearScreen: false,
   plugins: [solid()],
   server: { fs: { allow: [repo, path.dirname(deps), path.resolve(repo, "../solid-next"), pluginDir] } },
   build: { outDir: "dist", sourcemap: true, emptyOutDir: true },
@@ -118,9 +119,114 @@ if (!filter || "shared".includes(filter)) {   // two programs on one page, shari
 if (!filter || "todo".includes(filter)) {   // the dev server: modules transformed on request
   const dir = project("todo-dev", "todo.rx");
   const server = await vite.createServer(config(dir, "todo.rx")); await server.listen(0);
-  await drive("todo (dev)", `http://127.0.0.1:${server.httpServer.address().port}/`, todo);
+  await drive("todo (dev)", server.resolvedUrls.local[0], todo);
   await server.close();
 }
+if (!filter || "styles".includes(filter)) {   // CSS-4 under the dev server: a dependency's <style> edit reaches the page
+  const dir = project("styles-dev", "styled/main.rx");
+  mkdirSync(path.join(dir, "src/styled"));
+  writeFileSync(path.join(dir, "src/styled/main.rx"), `import { Badge } from "./badge.rx"\n\nexport default component Main() {\n  <main><Badge /></main>\n}\n`);
+  const badge = path.join(dir, "src/styled/badge.rx");
+  const style = color => `export component Badge() {\n  <style>\n    .badge { color: ${color} }\n  </style>\n  <p class="badge">badge</p>\n}\n`;
+  writeFileSync(badge, style("rgb(0, 0, 255)"));
+  const server = await vite.createServer(config(dir, "styled/main.rx")); await server.listen(0);
+  const url = server.resolvedUrls.local[0];
+  const color = page => page.$eval(".badge", e => getComputedStyle(e).color);
+  const until = async (page, want, what) => {
+    for (let i = 0; i < 40 && await color(page).catch(() => "") !== want; i++) await page.waitForTimeout(100);
+    const got = await color(page).catch(e => e.message.split("\n")[0]); if (got !== want) throw new Error(`${what}: color ${got}, not ${want}`);
+  };
+  await drive("styles (dev)", url, async page => {
+    await until(page, "rgb(0, 0, 255)", "first load");
+    writeFileSync(badge, style("rgb(255, 0, 0)"));
+    await until(page, "rgb(255, 0, 0)", "after the edit");
+    await page.reload(); await until(page, "rgb(255, 0, 0)", "after a reload");
+    const fresh = await browser.newPage();
+    try { await fresh.goto(url); await until(fresh, "rgb(255, 0, 0)", "in a new page"); } finally { await fresh.close(); }
+  });
+  await server.close();
+}
+if (!filter || "hot".includes(filter)) {   // a dependency's component edit swaps in place; a top-level or entry edit reloads
+  const dir = project("hot-dev", "hot/main.rx");
+  mkdirSync(path.join(dir, "src/hot"));
+  const main = path.join(dir, "src/hot/main.rx"), panel = path.join(dir, "src/hot/panel.rx");
+  writeFileSync(main, `import { Panel } from "./panel.rx"\nimport { Other } from "./other.rx"\nimport { Tick } from "./tick.rx"\n\nexport default component Main() {\n  <main><Panel /><Other /><Tick /></main>\n}\n`);
+  writeFileSync(path.join(dir, "src/hot/other.rx"), `export component Other() {\n  source n := 0\n  <button class="other" onClick={() => { n := n + 1 }}>other {n}</button>\n}\n`);
+  // a top level that calls into JS: a replay would call it again, so its module always reloads
+  const tick = path.join(dir, "src/hot/tick.rx");
+  writeFileSync(path.join(dir, "src/hot/clock.mjs"), `export const now = () => "one";\n`);
+  writeFileSync(tick, `import pure { now } from "./clock"\n\nfirst = now()\n\nexport component Tick() {\n  <p class="tick">{first}</p>\n}\n`);
+  const lib = path.join(dir, "src/hot/lib.mjs");
+  writeFileSync(lib, `export const word = () => "one";\n`);
+  const source = ({ top = "", label = "total", color = "rgb(0, 0, 255)", step = 1 } = {}) =>
+    `import pure { word } from "./lib"\n\n${top}source total := 0\n\nexport component Panel() {\n  said = word()\n  <style>\n    .panel { color: ${color} }\n  </style>\n  <button class="panel" onClick={() => { total := total + ${step} }}>${label} {total}</button>\n  <p class="said">{said}</p>\n}\n`;
+  writeFileSync(panel, source());
+  const server = await vite.createServer(config(dir, "hot/main.rx")); await server.listen(0);
+  await drive("hot (dev)", server.resolvedUrls.local[0], async page => {
+    const seen = async () => ({
+      panel: (await page.textContent(".panel").catch(() => "")).trim(), other: (await page.textContent(".other").catch(() => "")).trim(),
+      color: await page.$eval(".panel", e => getComputedStyle(e).color).catch(() => ""), kept: await page.evaluate(() => window.__kept === 1).catch(() => false),
+      said: (await page.textContent(".said").catch(() => "")).trim(),
+    });
+    const until = async (what, want) => {
+      let got;
+      for (let i = 0; i < 50; i++) { got = await seen(); if (Object.entries(want).every(([k, v]) => got[k] === v)) return; await page.waitForTimeout(100); }
+      throw new Error(`${what}: ${JSON.stringify(got)}, not ${JSON.stringify(want)}`);
+    };
+    for (let i = 0; i < 3; i++) await page.click(".panel");
+    for (let i = 0; i < 2; i++) await page.click(".other");
+    await page.evaluate(() => { window.__kept = 1; });
+    await until("before the edits", { panel: "total 3", other: "other 2" });
+    // the module-level source and the other module's component state survive; the page is not reloaded
+    writeFileSync(panel, source({ label: "sum" }));
+    await until("after a markup edit", { panel: "sum 3", other: "other 2", kept: true });
+    writeFileSync(panel, source({ label: "sum", color: "rgb(255, 0, 0)" }));
+    await until("after a <style> edit", { color: "rgb(255, 0, 0)", panel: "sum 3", other: "other 2", kept: true });
+    writeFileSync(panel, source({ label: "plus", color: "rgb(255, 0, 0)", step: 10 }));
+    await until("after a logic edit", { panel: "plus 3", kept: true });
+    await page.click(".panel"); await until("the new handler", { panel: "plus 13", other: "other 2", kept: true });
+    // a JS module the dependency imports changed: what its top level read from it may be stale, so the page reloads
+    writeFileSync(lib, `export const word = () => "two";\n`);
+    await until("after an import's edit", { said: "two", panel: "plus 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".other");
+    writeFileSync(tick, readFileSync(tick, "utf8").replace('class="tick"', 'class="tick edited"'));
+    await until("after an edit to a module whose top level calls JS", { other: "other 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; });
+    // the module's top level changed: a reload, with the module's new state
+    writeFileSync(panel, source({ top: "base = 1\n", label: "plus", color: "rgb(255, 0, 0)" }));
+    await until("after a top-level edit", { panel: "plus 0", other: "other 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".other");
+    writeFileSync(main, readFileSync(main, "utf8").replace("<main>", `<main class="edited">`));
+    await until("after an entry edit", { other: "other 0", kept: false });
+    if (!await page.$("main.edited")) throw new Error("the entry's edit did not reach the page");
+    // a dependency that stops compiling, then compiles again, swaps as before
+    writeFileSync(panel, source({ label: "plus" }) + "\nexport bad = missingName\n"); await page.waitForTimeout(800);
+    writeFileSync(panel, source({ label: "back" }));
+    await until("after the fix", { panel: "back 0" });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".panel");
+    writeFileSync(panel, source({ label: "again" }));
+    await until("after an edit that follows a failed compile", { panel: "again 1", kept: true });
+  });
+  await server.close();
+}
+if (!filter || "cold".includes(filter)) {   // a dependency asked for before its entry, as Vitest's `fsModuleCache` leaves it
+  const { default: rx } = await import(pathToFileURL(path.join(pkg, "vite.mjs")).href);
+  const root = project("cold", "shop/main.rx"), catalog = path.join(root, "src/shop/catalog.rx");
+  const ctx = (id, moduleId) => ({ id, moduleId, root, ssr: false, solid: { generate: "dom", hydratable: false }, addWatchFile() {} });
+  try {
+    // a commented-out import is not an edge: read as one, it would make main.rx look imported and leave no entry
+    writeFileSync(catalog, readFileSync(catalog, "utf8") + `\n// import { x } from "./main.rx"\n`);
+    const warm = rx(); warm.compile("", ctx(path.join(root, "src/shop/main.rx"), path.join(root, "src/shop/main.rx")));
+    const want = warm.compile("", ctx(catalog, `${catalog}?rx-dep`)).code;
+    const got = rx().compile("", ctx(catalog, `${catalog}?rx-dep`)).code;
+    if (got !== want) throw new Error("the dependency compiled cold differs from the one compiled after its entry");
+    writeFileSync(catalog, readFileSync(catalog, "utf8") + "\nexport bad = missingName\n");
+    let report = "";
+    try { rx().compile("", ctx(catalog, `${catalog}?rx-dep`)); } catch (e) { report = e.message; }
+    if (!/catalog\.rx:\d+(:\d+)?: error /.test(report)) throw new Error(`a cold dependency that does not compile reports ${JSON.stringify(report.slice(0, 200))}`);
+    pass++; console.log("✓ cold dependency: compiled from the program that holds it, or that program's diagnostics");
+  } catch (e) { fail++; console.log(`✗ cold dependency: ${e.message.split("\n")[0]}`); }
+}
 await browser.close();
 console.log(`\n${pass} pass, ${fail} fail (vite ${vite.version}, @solidjs/vite-plugin ${JSON.parse(readFileSync(path.join(pluginDir, "package.json"), "utf8")).version})`);
 process.exit(fail ? 1 : 0);
diff --git a/compiler/vite.mjs b/compiler/vite.mjs
index d65161b..ee5fe08 100644
--- a/compiler/vite.mjs
+++ b/compiler/vite.mjs
@@ -3,8 +3,8 @@
 // names it explicitly.
 //
 // The crate (its Node-API build, `src/node.rs`: what `rxc app` does) already hands each module to Solid's compiler
-// (spec/11 CP-1), so a `.rx` module comes back as Solid's output for the environment's `generate`, with its source map onto the `.rx` and, on a
-// program's entry, the program's stylesheet. Solid's plugin then takes it the way it takes lowered `.tsrx`: primitive
+// (spec/11 CP-1), so a `.rx` module comes back as Solid's output for the environment's `generate`, with its source map onto the `.rx` and
+// its own stylesheet. Solid's plugin then takes it the way it takes lowered `.tsrx`: primitive
 // names, `lazy()`, the HMR refresh pass, server functions (12 SF-7a), the stylesheet as a CSS module.
 //
 // Entries find themselves. JavaScript imports only a program's entry (its default export mounts the app); an `.rx`
@@ -13,7 +13,8 @@
 // changes. The crate's output imports its dependencies as `./x.rx?rx-dep`, and a dependency is served from the build
 // of a program that contains it. A module several programs share is one module: its instance is keyed by its factory
 // (11 CP-4b `module`), not by its place in a program.
-import { existsSync, statSync } from "node:fs";
+import { createHash } from "node:crypto";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -35,6 +36,54 @@ const isDep = moduleId => new URLSearchParams(moduleId.split("?")[1] ?? "").has(
 // `import __m0 from "./catalog.rx";` → `"./catalog.rx?rx-dep"` (one line each: the module's map is by line, CP-1c)
 const tagDeps = code => code.replace(/^(import \w+ from ")(\.{1,2}\/[^"?]*\.rx)(";?)$/gm, `$1$2?${DEP}$3`);
 
+const RX_IMPORT = /^import\b[^"']*?\bfrom\s+(["'])(\.{1,2}\/[^"'?]*\.rx)\1/gm;
+/** The `.rx` files under `root` from which `file` is reached by imports: first those no other `.rx` file imports. */
+function entriesOf(file, root) {
+  const importers = new Map();
+  const walk = dir => {
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      if (e.name === "node_modules" || e.name.startsWith(".")) continue;
+      const p = path.join(dir, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.name.endsWith(".rx")) for (const [, , spec] of readFileSync(p, "utf8").matchAll(RX_IMPORT)) {
+        const dep = path.resolve(path.dirname(p), spec);
+        importers.set(dep, [...(importers.get(dep) ?? []), p]);
+      }
+    }
+  };
+  walk(root);
+  const seen = new Set([file]);
+  for (const f of seen) for (const i of importers.get(f) ?? []) seen.add(i);
+  seen.delete(file);
+  const top = f => !importers.has(f);
+  return [...seen].sort().sort((a, b) => top(b) - top(a));
+}
+
+/** A dependency's factory, wrapped for hot updates (the runtime's `hot` entry); lines are only added after the module's. */
+function hotFooter(code, hot) {
+  // the code's own hash: a version re-run for an import's change, with its own code unchanged, reloads
+  const meta = { ...hot, code: createHash("sha1").update(code).digest("hex").slice(0, 16) };
+  const wrapped = code.replace(/^export default function module\(__rt\)/m, "function module(__rt)");
+  if (wrapped === code) return code;
+  return `${wrapped}
+import { hotModule as __rxHotModule } from "@reactivescript/runtime/hot";
+const __rxHot = __rxHotModule(import.meta.hot, module, ${JSON.stringify(meta)});
+export default __rxHot.factory;
+if (import.meta.hot) import.meta.hot.accept(__rxHot.accept);
+`;
+}
+
+const hasHotRuntime = new Map();
+/** Whether the project's `@reactivescript/runtime` has the `hot` entry the footer imports (0.3.1 and older do not). */
+function hotRuntime(root) {
+  if (!hasHotRuntime.has(root)) {
+    let ok = true;
+    try { createRequire(path.join(root, "package.json")).resolve("@reactivescript/runtime/hot"); } catch { ok = false; }
+    hasHotRuntime.set(root, ok);
+  }
+  return hasHotRuntime.get(root);
+}
+
 /** @returns {import("@solidjs/vite-plugin").Frontend} */
 export default function rx() {
   const builds = new Map();   // entry\0target\0moduleName\0spa → { entry, target, moduleName, spa, out, stamps }
@@ -46,32 +95,64 @@ export default function rx() {
     const out = JSON.parse(app(entry, target, moduleName, spa));
     if (out.modules) out.modules = Object.fromEntries(Object.entries(out.modules).map(([p, m]) => [path.resolve(p), m]));
     const files = out.modules ? Object.keys(out.modules) : out.diagnostics ? [...new Set([entry, ...out.diagnostics.map(d => d.file)])] : [entry];
+    if (out.modules) for (const f of files) if (f !== path.resolve(entry)) dependencies.add(f);
     const b = { entry, target, moduleName, spa, out, stamps: new Map(files.map(f => [f, mtime(f)])) };
     builds.set(key, b);
     return b;
   }
+  const restyling = new Set();   // dependencies whose stylesheet the plugin is about to ask for, after hotUpdate
+  const dependencies = new Set();   // every file a program built so far held as a dependency, kept when its program fails
+  const built = (file, target, moduleName, spa) =>
+    [...builds.values()].filter(b => b.target === target && b.moduleName === moduleName && b.spa === spa && b.out.modules?.[file]);
   /** A dependency: from a build of a program that has it, rebuilt if that program changed. */
-  function containing(file, target, moduleName, spa) {
-    const has = [...builds.values()].filter(b => b.target === target && b.moduleName === moduleName && b.spa === spa && b.out.modules?.[file]);
+  function containing(file, target, moduleName, spa, root) {
+    const has = built(file, target, moduleName, spa);
     const b = has.find(fresh) ?? has[0];
-    if (!b) throw new Error(`${file} is imported as an .rx dependency, but no program built so far contains it`);
-    return build(b.entry, target, moduleName, spa);
+    if (b) return build(b.entry, target, moduleName, spa);
+    // the entry's compile was skipped (Vitest's `fsModuleCache` served it), so find the program from the files
+    let failed;
+    for (const entry of entriesOf(file, root)) {
+      const found = build(entry, target, moduleName, spa);
+      if (found.out.modules?.[file]) return found;
+      if (!failed && found.out.diagnostics) failed = found;   // the program holds it but does not compile: report why
+    }
+    if (failed) return failed;
+    throw new Error(`${file} is imported as an .rx dependency, but no program under ${root} contains it`);
   }
   return {
-    compile(_source, { id, moduleId, solid, addWatchFile }) {
+    // A dependency hot-swaps (rt-hot.ts) when no other module of any program that holds it compiles differently and its
+    // text outside its components' bodies is unchanged; then the entry, which watches every module of its program, is left
+    // out of the update, so the page keeps its state. Otherwise Vite's list stands, and the entry reloads the page.
+    hotUpdate({ file, modules }) {
+      file = path.resolve(file);
+      // the plugin compiles the changed file next, by its path alone, for its stylesheet
+      if (dependencies.has(file)) restyling.add(file);
+      const holding = [...builds.values()].filter(b => b.out.modules?.[file]);
+      if (!holding.length) return;
+      for (const b of holding) {
+        const before = b.out, after = build(b.entry, b.target, b.moduleName, b.spa).out;
+        const was = before.modules[file].hot, now = after.modules?.[file]?.hot;
+        if (!was || !now || was.top !== now.top || was.components.join() !== now.components.join()) return;
+        const paths = new Set([...Object.keys(before.modules), ...Object.keys(after.modules)]);
+        for (const p of paths) if (p !== file && before.modules[p]?.code !== after.modules[p]?.code) return;
+      }
+      return modules.filter(m => isDep(m.id ?? m.url ?? ""));
+    },
+    compile(_source, { id, moduleId, root, solid, addWatchFile, hot }) {
       const file = path.resolve(id);
       const target = solid.generate === "ssr" ? "ssr" : solid.generate === "universal" ? "universal" : "dom";
       const moduleName = solid.moduleName ?? "@solidjs/web";
       // 08 CN-3d: a client-only build (no SSR, nothing hydrates) has nothing to show on a first load nothing holds
       const spa = target === "dom" && solid.hydratable === false;
-      const dep = isDep(moduleId);
-      const { entry, out } = dep ? containing(file, target, moduleName, spa) : build(file, target, moduleName, spa);
+      const dep = isDep(moduleId) || restyling.delete(file);
+      const projectRoot = path.resolve(root ?? process.cwd());
+      const { out } = dep ? containing(file, target, moduleName, spa, projectRoot) : build(file, target, moduleName, spa);
       if (out.diagnostics) throw new Error(report(out.diagnostics));
       if (out.error) throw new Error(out.error);
       const m = out.modules[file];
       for (const p of Object.keys(out.modules)) if (p !== file) addWatchFile(p);
-      // CSS-4: the program's stylesheet, linked once, from its entry
-      return { code: tagDeps(m.code), map: m.map, css: !dep && file === entry ? out.css : "" };
+      // CSS-4: each module links its own stylesheet, so a module several programs share links it once
+      return { code: dep && hot && m.hot && hotRuntime(projectRoot) ? hotFooter(tagDeps(m.code), m.hot) : tagDeps(m.code), map: m.map, css: m.css ?? "" };
     },
   };
 }
diff --git a/ref/compile/rt-hot.ts b/ref/compile/rt-hot.ts
new file mode 100644
index 0000000..65cf081
--- /dev/null
+++ b/ref/compile/rt-hot.ts
@@ -0,0 +1,111 @@
+// Hot updates for a dependency under a dev server (the `@reactivescript/runtime/hot` entry, which the Vite front end
+// imports in dev client builds only). A dependency's module is a factory over the app (09 MO-1b, 11 CP-4b `module`), so
+// Solid's refresh pass finds no component at its top level to swap. This wraps the factory: its exported components
+// go out as Solid's refresh proxies, and the module-level calls the factory made on `__rt` are recorded. A new version
+// whose text outside its components' bodies is unchanged runs against the same app with each of those calls answered
+// from the record, so it creates no module-level state (the instance stays the one MO-1b promises) and its components
+// close over the first instance's sources; the proxies then render them in place. Anything else reloads the page.
+import { $$component, $$registry, type Registry } from "solid-js/refresh";
+import { resetErrorHalt, sharedConfig } from "solid-js";
+
+export interface HotMeta { components: string[]; top: string; code: string }
+interface ViteHot { data: Record<string, any>; invalidate(message?: string): void }
+type Factory = (rt: any) => Record<string, unknown>;
+type Call = { key: PropertyKey; sig: string; result: unknown };
+
+interface Instance { rt: object; calls: Call[]; exports: Record<string, unknown>; registry: Registry }
+interface State { factory: Factory; meta: HotMeta; instances: Instance[]; next?: { factory: Factory; meta: HotMeta } }
+
+const MISMATCH = Symbol("rx-hot-mismatch");
+
+/** A call's arguments with functions left out: a component's edit can change how a module-level source is made. */
+function signature(args: unknown[]) {
+  try { return JSON.stringify(args, (_, v) => typeof v === "function" ? "ƒ" : typeof v === "symbol" ? String(v) : v) ?? ""; }
+  catch { return "?"; }
+}
+
+/** `__rt` as the factory sees it: while `session.mode` is "record", each call it makes (not the calls those make) is
+ *  kept; while "replay", each is answered from `session.calls` in turn, and a call that differs throws `MISMATCH`. */
+function tap(rt: any, session: { mode: "record" | "replay" | "live"; calls: Call[]; at: number; depth: number }) {
+  return new Proxy(rt, {
+    get(target, key) {
+      const v = target[key];
+      if (typeof v !== "function" || session.mode === "live") return v;
+      return (...args: unknown[]) => {
+        if (session.depth > 0) return v.apply(target, args);
+        const sig = signature(args);
+        if (session.mode === "replay") {
+          const c = session.calls[session.at++];
+          if (!c || c.key !== key || c.sig !== sig) throw MISMATCH;
+          return c.result;
+        }
+        session.depth++;
+        try {
+          const result = v.apply(target, args);
+          session.calls.push({ key, sig, result });
+          return result;
+        } finally { session.depth--; }
+      };
+    },
+  });
+}
+
+function run(rt: object, factory: Factory, replay?: Call[]) {
+  const session = { mode: replay ? "replay" as const : "record" as const, calls: replay ?? [], at: 0, depth: 0 };
+  try {
+    const exports = factory(tap(rt, session));
+    if (replay && session.at !== replay.length) throw MISMATCH;
+    return { exports, calls: session.calls };
+  } finally { (session as { mode: string }).mode = "live"; }
+}
+
+const same = (a: HotMeta, b: HotMeta) => a.top === b.top && a.components.length === b.components.length && a.components.every((c, i) => c === b.components[i]);
+
+/** The module's factory as importers call it, and what its `import.meta.hot.accept` callback runs. */
+export function hotModule(hot: ViteHot | undefined, factory: Factory, meta: HotMeta) {
+  if (!hot) return { factory, accept() {} };
+  const state: State = hot.data.rx ??= { factory, meta, instances: [] };
+  if (state.instances.length || state.meta !== meta) state.next = { factory, meta };
+  const wrapped: Factory = rt => {
+    // MO-1b: an importer that loads this version later still gets the app's one instance
+    const had = state.instances.find(i => i.rt === rt);
+    if (had) return had.exports;
+    // an app mounted after an update takes the version the others now run
+    const { exports, calls } = run(rt, state.factory);
+    const registry = $$registry();
+    const out = { ...exports };
+    for (const c of state.meta.components) if (typeof out[c] === "function") out[c] = $$component(registry, c, out[c] as any);
+    state.instances.push({ rt, calls, exports: out, registry });
+    return out;
+  };
+  return {
+    factory: wrapped,
+    accept(mod: unknown) {
+      const next = state.next;
+      state.next = undefined;
+      if (!mod || !next) return hot.invalidate();
+      const apply = () => {
+        // the same code re-run means an import changed, which the recorded top level may have read
+        if (next.meta.code === state.meta.code) return hot.invalidate("[reactivescript] an import of the module changed");
+        if (!same(state.meta, next.meta)) return hot.invalidate("[reactivescript] the module's top level changed");
+        const swaps: [Instance, Record<string, unknown>][] = [];
+        for (const inst of state.instances) {
+          try { swaps.push([inst, run(inst.rt, next.factory, inst.calls).exports]); }
+          catch (e) {
+            if (e !== MISMATCH) console.error(e);
+            return hot.invalidate(e === MISMATCH ? "[reactivescript] the module's top level changed" : "[reactivescript] the new version threw");
+          }
+        }
+        state.factory = next.factory;
+        state.meta = next.meta;
+        // an earlier version that threw while rendering halted the scheduler; the swap would not run
+        resetErrorHalt();
+        for (const [inst, exports] of swaps) for (const c of next.meta.components) {
+          const fresh = exports[c];
+          if (typeof fresh === "function") inst.registry.components.get(c)?.update(() => fresh as any);
+        }
+      };
+      if (sharedConfig.isHydrationInProgress?.()) sharedConfig.onHydrationEnd(apply); else apply();
+    },
+  };
+}
diff --git a/runtime/build.mjs b/runtime/build.mjs
index f771654..a0b0b60 100644
--- a/runtime/build.mjs
+++ b/runtime/build.mjs
@@ -12,7 +12,7 @@ const here = path.dirname(fileURLToPath(import.meta.url));
 const src = path.resolve(here, "../ref/compile");
 const dist = path.join(here, "dist");
 rmSync(dist, { recursive: true, force: true }); mkdirSync(dist);
-for (const [from, to] of [["rt-web.ts", "web"], ["rt-server.ts", "server"]]) {
+for (const [from, to] of [["rt-web.ts", "web"], ["rt-server.ts", "server"], ["rt-hot.ts", "hot"]]) {
   await build({ entryPoints: [path.join(src, from)], outfile: path.join(dist, `${to}.js`), format: "esm", platform: "neutral", target: "es2022", bundle: true, packages: "external", logLevel: "warning" });
 }
 // declarations, unchecked: the runtime uses Solid internals its types leave out (createErrorBoundary, sharedConfig,
@@ -21,8 +21,8 @@ const tsc = createRequire(import.meta.url).resolve("typescript/bin/tsc");
 const config = path.join(here, ".tsconfig.build.json");
 writeFileSync(config, JSON.stringify({
   compilerOptions: { declaration: true, emitDeclarationOnly: true, outDir: "dist/types", rootDir: src, module: "nodenext", moduleResolution: "nodenext", target: "es2022", skipLibCheck: true, allowImportingTsExtensions: true, noCheck: true, paths: { "*": ["./node_modules/*"] } },
-  files: [path.join(src, "rt-web.ts"), path.join(src, "rt-server.ts")],
+  files: [path.join(src, "rt-web.ts"), path.join(src, "rt-server.ts"), path.join(src, "rt-hot.ts")],
 }));
 try { execFileSync(process.execPath, [tsc, "-p", config], { stdio: "inherit", cwd: here }); }
 finally { rmSync(config); }
-for (const [from, to] of [["rt-web", "web"], ["rt-server", "server"]]) writeFileSync(path.join(dist, `${to}.d.ts`), `export * from "./types/${from}.js";\n`);
+for (const [from, to] of [["rt-web", "web"], ["rt-server", "server"], ["rt-hot", "hot"]]) writeFileSync(path.join(dist, `${to}.d.ts`), `export * from "./types/${from}.js";\n`);
diff --git a/runtime/package.json b/runtime/package.json
index 735d836..77cbec7 100644
--- a/runtime/package.json
+++ b/runtime/package.json
@@ -38,6 +38,10 @@
     "./server": {
       "types": "./dist/server.d.ts",
       "default": "./dist/server.js"
+    },
+    "./hot": {
+      "types": "./dist/hot.d.ts",
+      "default": "./dist/hot.js"
     }
   },
   "files": [