diff --git a/Cargo.lock b/Cargo.lock
index 2ec09a0d0f..4186bd0572 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -6222,6 +6222,14 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "dioxus-playwright-fullstack-hydration-recovery-test"
+version = "0.1.0"
+dependencies = [
+ "async-std",
+ "dioxus",
+]
+
 [[package]]
 name = "dioxus-playwright-fullstack-mounted-test"
 version = "0.1.0"
@@ -6516,6 +6524,7 @@ version = "0.7.3"
 dependencies = [
  "ciborium",
  "dioxus",
+ "dioxus-autofmt",
  "dioxus-cli-config",
  "dioxus-core",
  "dioxus-core-types",
@@ -6525,6 +6534,8 @@ dependencies = [
  "dioxus-history",
  "dioxus-html",
  "dioxus-interpreter-js",
+ "dioxus-rsx",
+ "dioxus-rsx-rosetta",
  "dioxus-signals",
  "dioxus-ssr",
  "dioxus-web",
@@ -6540,6 +6551,7 @@ dependencies = [
  "serde",
  "serde-wasm-bindgen",
  "serde_json",
+ "syn 2.0.114",
  "tracing",
  "tracing-wasm",
  "wasm-bindgen",
diff --git a/Cargo.toml b/Cargo.toml
index 1ce425651e..81f34b8b01 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -65,6 +65,7 @@ members = [
     "packages/playwright-tests/fullstack-spread",
     "packages/playwright-tests/fullstack-routing",
     "packages/playwright-tests/fullstack-hydration-order",
+    "packages/playwright-tests/fullstack-hydration-recovery",
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",
     "packages/playwright-tests/cli-optimization",
diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs
index 896dbff0b3..8aeb394a1f 100644
--- a/packages/core/src/lib.rs
+++ b/packages/core/src/lib.rs
@@ -99,12 +99,12 @@ pub use crate::innerlude::{
     remove_future, schedule_update, schedule_update_any, spawn, spawn_forever, spawn_isomorphic,
     suspend, throw_error, try_consume_context, use_after_render, use_before_render, use_drop,
     use_hook, use_hook_with_cleanup, with_owner, AnyValue, AnyhowContext, Attribute,
-    AttributeValue, Callback, CapturedError, Component, ComponentFunction, DynamicNode, Element,
-    ElementId, ErrorBoundary, ErrorContext, Event, EventHandler, Fragment, HasAttributes,
-    IntoAttributeValue, IntoDynNode, LaunchConfig, ListenerCallback, MarkerWrapper, Mutation,
-    Mutations, NoOpMutations, OptionStringFromMarker, Properties, ReactiveContext, RenderError,
-    Result, Runtime, RuntimeGuard, ScopeId, ScopeState, SpawnIfAsync, SubscriberList, Subscribers,
-    SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary, SuspenseBoundaryProps,
+    AttributeValue, Callback, CapturedError, Component, ComponentFunction, CreateScopeDomError,
+    DynamicNode, Element, ElementId, ErrorBoundary, ErrorContext, Event, EventHandler, Fragment,
+    HasAttributes, IntoAttributeValue, IntoDynNode, LaunchConfig, ListenerCallback, MarkerWrapper,
+    Mutation, Mutations, NoOpMutations, OptionStringFromMarker, Properties, ReactiveContext,
+    RenderError, Result, Runtime, RuntimeGuard, ScopeId, ScopeState, SpawnIfAsync, SubscriberList,
+    Subscribers, SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary, SuspenseBoundaryProps,
     SuspenseContext, Task, Template, TemplateAttribute, TemplateNode, VComponent, VNode,
     VNodeInner, VPlaceholder, VText, VirtualDom, WriteMutations,
 };
diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs
index bc1fced02f..b1001310d4 100644
--- a/packages/core/src/virtual_dom.rs
+++ b/packages/core/src/virtual_dom.rs
@@ -215,6 +215,11 @@ pub struct VirtualDom {
     rx: futures_channel::mpsc::UnboundedReceiver<SchedulerMsg>,
 }
 
+/// An error that can occur when trying to create DOM nodes for an existing scope's vdom tree. This can only occur
+/// if the scope has never been rendered before, so it has no cached vdom tree to walk.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct CreateScopeDomError;
+
 impl VirtualDom {
     /// Create a new VirtualDom with a component that does not have special props.
     ///
@@ -593,6 +598,36 @@ impl VirtualDom {
         to.append_children(ElementId(0), m);
     }
 
+    /// Emit creation mutations for a scope's existing vdom tree without
+    /// re-running the component.
+    ///
+    /// This is used for hydration mismatch recovery: the vdom tree is already
+    /// built, but the DOM nodes were never created because hydration failed.
+    /// This walks the existing `last_rendered_node` and emits the mutations
+    /// needed to create real DOM nodes for it.
+    ///
+    /// Returns the number of nodes created on the stack (for use with
+    /// [`WriteMutations::append_children`]).
+    pub fn create_scope_dom(
+        &mut self,
+        to: &mut impl WriteMutations,
+        scope_id: ScopeId,
+    ) -> Result<usize, CreateScopeDomError> {
+        let _runtime = RuntimeGuard::new(self.runtime.clone());
+        let existing_nodes = self.scopes[scope_id.0]
+            .last_rendered_node
+            .clone()
+            .ok_or(CreateScopeDomError)?;
+
+        // The prior pass (e.g. a rebuild with skip_mutations run to populate
+        // state before hydrating) already claimed element ids. Reclaim them
+        // before re-creating so the second pass reuses slab slots instead of
+        // leaking one per element. Component state is preserved.
+        existing_nodes.remove_node_inner::<NoOpMutations>(self, None, false, None);
+
+        Ok(self.create_scope(Some(to), scope_id, existing_nodes, None))
+    }
+
     /// Render whatever the VirtualDom has ready as fast as possible without requiring an executor to progress
     /// suspended subtrees.
     #[instrument(skip(self, to), level = "trace", name = "VirtualDom::render_immediate")]
diff --git a/packages/core/tests/create_dom.rs b/packages/core/tests/create_dom.rs
index 009cad65d7..242dc5e485 100644
--- a/packages/core/tests/create_dom.rs
+++ b/packages/core/tests/create_dom.rs
@@ -184,3 +184,48 @@ fn anchors() {
         ]
     )
 }
+
+/// Regression test: `create_scope_dom` is used by hydration mismatch recovery to
+/// emit creation mutations for a scope whose vdom tree already exists (because
+/// `rebuild` was run with skip_mutations to populate state before hydrating).
+///
+/// The second pass must reuse the element ids that were claimed on the first
+/// pass instead of allocating fresh ids — otherwise the arena grows by one slot
+/// per element on every recovery and the mutations emitted reference ids that
+/// drift from the ones a fresh rebuild would have produced.
+#[test]
+fn create_scope_dom_reuses_element_ids() {
+    fn app() -> Element {
+        rsx! {
+            div {
+                id: "app",
+                "hello"
+                button { onclick: |_| {}, "click" }
+                div { "child" }
+            }
+        }
+    }
+
+    // Baseline: fresh rebuild's mutations.
+    let mut baseline = VirtualDom::new(app);
+    let baseline_edits = baseline.rebuild_to_vec();
+
+    // Recovery path: rebuild with NoOp (as the web hydration flow does with
+    // skip_mutations), then emit creation mutations via `create_scope_dom`.
+    let mut recovered = VirtualDom::new(app);
+    recovered.rebuild(&mut dioxus_core::NoOpMutations);
+    let mut recovered_edits = dioxus_core::Mutations::default();
+    let m = recovered
+        .create_scope_dom(&mut recovered_edits, ScopeId::ROOT)
+        .expect("scope has a rendered tree");
+    recovered_edits.edits.push(AppendChildren {
+        m,
+        id: ElementId(0),
+    });
+
+    assert_eq!(
+        recovered_edits.edits, baseline_edits.edits,
+        "create_scope_dom after a skip_mutations rebuild must emit the same \
+         mutations (including element ids) as a fresh rebuild"
+    );
+}
diff --git a/packages/dioxus/Cargo.toml b/packages/dioxus/Cargo.toml
index 5c10fdcffe..943f953929 100644
--- a/packages/dioxus/Cargo.toml
+++ b/packages/dioxus/Cargo.toml
@@ -67,6 +67,7 @@ macro = ["dep:dioxus-core-macro"]
 html = ["dep:dioxus-html"]
 hooks = ["dep:dioxus-hooks"]
 devtools = ["dep:dioxus-devtools", "dioxus-web?/devtools"]
+debug-hydration-validation = ["dioxus-web?/debug-hydration-validation"]
 mounted = ["dioxus-web?/mounted"]
 asset = ["dep:manganis", "dep:dioxus-asset-resolver"]
 document = ["dioxus-web?/document", "dep:dioxus-document", "dep:dioxus-history"]
diff --git a/packages/interpreter/src/unified_bindings.rs b/packages/interpreter/src/unified_bindings.rs
index 3c17ab52b8..189636fca6 100644
--- a/packages/interpreter/src/unified_bindings.rs
+++ b/packages/interpreter/src/unified_bindings.rs
@@ -131,7 +131,6 @@ mod js {
         "{let node = this.templates[$tmpl_id$][$index$].cloneNode(true); this.nodes[$id$] = node; this.stack.push(node);}"
     }
 
-    #[cfg(feature = "binary-protocol")]
     fn append_children_to_top(many: u16) {
         "{
             let root = this.stack[this.stack.length-many-1];
diff --git a/packages/playwright-tests/fullstack-hydration-recovery.spec.js b/packages/playwright-tests/fullstack-hydration-recovery.spec.js
new file mode 100644
index 0000000000..1a9bfbbed0
--- /dev/null
+++ b/packages/playwright-tests/fullstack-hydration-recovery.spec.js
@@ -0,0 +1,252 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+const SERVER_URL = "http://localhost:7978";
+const HYDRATION_MISMATCH_MESSAGE = "[HYDRATION MISMATCH]";
+const HYDRATION_RECOVERY_MESSAGE =
+  "Rebuilding subtree.";
+
+async function waitForBuild(request) {
+  for (let i = 0; i < 30; i++) {
+    const response = await request.get(SERVER_URL);
+    const text = await response.text();
+    if (response.status() === 200 && text.includes('id="recovery-button"')) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+
+  throw new Error("Timed out waiting for the hydration recovery fixture to build");
+}
+
+test("hydration mismatch recovers nested structure, text, attributes, and placeholders", async ({
+  page,
+  request,
+}) => {
+  await waitForBuild(request);
+
+  const serverResponse = await request.get(SERVER_URL);
+  expect(serverResponse.status()).toBe(200);
+
+  const serverHtml = await serverResponse.text();
+  expect(serverHtml).toContain('id="recovery-button"');
+  expect(serverHtml).toContain('id="after-streaming-boundary"');
+  expect(serverHtml).toMatch(/<div\b[^>]*id="recovery-button"/);
+  expect(serverHtml).not.toMatch(/<button\b[^>]*id="recovery-button"/);
+  expect(serverHtml).toContain("Server text content");
+  expect(serverHtml).toContain("Server placeholder content");
+  expect(serverHtml).toContain('title="Server value title"');
+  expect(serverHtml).toContain('data-side="server"');
+  expect(serverHtml).toContain("Shared inner html");
+  expect(serverHtml).toContain("Server dangerous inner html");
+  expect(serverHtml).toContain('style="width:100px;height:40px;"');
+  expect(serverHtml).toContain('id="server-extra-node"');
+  expect(serverHtml).not.toContain('role="status"');
+  expect(serverHtml).not.toContain('title="Client attribute title"');
+
+  const consoleMessages = [];
+  const consoleErrors = [];
+  const pageErrors = [];
+
+  page.on("console", (msg) => {
+    consoleMessages.push(msg.text());
+    if (msg.type() === "error") {
+      consoleErrors.push(msg.text());
+    }
+  });
+  page.on("pageerror", (error) => {
+    pageErrors.push(error.message);
+  });
+
+  await page.goto(SERVER_URL, { waitUntil: "domcontentloaded" });
+  await expect(page.locator("#streaming-fallback")).toHaveText("Loading streaming…");
+  await page.waitForLoadState("networkidle");
+
+  const mismatchMessages = () =>
+    consoleMessages.filter((message) =>
+      message.includes(HYDRATION_MISMATCH_MESSAGE),
+    );
+  const hasMismatch = (...fragments) =>
+    mismatchMessages().some((message) =>
+      fragments.every((fragment) => message.includes(fragment)),
+    );
+
+  await expect
+    .poll(() => mismatchMessages().length, {
+      message: "expected hydration mismatches to be logged in debug builds",
+    })
+    .toBeGreaterThan(0);
+  await expect
+    .poll(
+      () => consoleMessages.some((message) => message.includes(HYDRATION_RECOVERY_MESSAGE)),
+      { message: "expected hydration recovery to be logged" },
+    )
+    .toBeTruthy();
+
+  expect(
+    mismatchMessages().every(
+      (message) =>
+        message.includes("Reason:") &&
+        message.includes("--- expected") &&
+        message.includes("+++ actual") &&
+        message.includes("@@"),
+    ),
+  ).toBeTruthy();
+
+  expect(
+    hasMismatch(
+      "Reason: Expected <button>, found <div>.",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Reason: Expected <strong>, found <span>.",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      'Reason: Expected text "Client text content", found text "Server text content".',
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "the DOM is missing [role, title]",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Reason: Expected placeholder (comment node), found node type 1.",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "these values differ [data-side: expected \"client\", found \"server\", title: expected \"Client value title\", found \"Server value title\"]",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      'Reason: Expected text "  Client whitespace content  ", found text "Client whitespace content".',
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Expected no additional child nodes",
+      "Server extra node",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Reason: Expected <button>, found <div>.",
+      "Streaming mismatch",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "these values differ [style:",
+    ),
+  ).toBeTruthy();
+  expect(
+    hasMismatch(
+      "Expected dangerous_inner_html content to match",
+      "Client dangerous inner html",
+    ),
+  ).toBeTruthy();
+  expect(
+    mismatchMessages().every(
+      (message) => !message.includes("dangerous-inner-html-stable-shell"),
+    ),
+  ).toBeTruthy();
+
+  const recoveryButton = page.locator("#recovery-button");
+  await expect(recoveryButton).toHaveCount(1);
+  await expect(recoveryButton).toHaveJSProperty("tagName", "BUTTON");
+  await expect(recoveryButton).toHaveText("Recovered 0");
+
+  const nestedLeaf = page.locator("#nested-leaf");
+  await expect(nestedLeaf).toHaveCount(1);
+  await expect(nestedLeaf).toHaveJSProperty("tagName", "STRONG");
+  await expect(nestedLeaf).toHaveText("Nested client leaf");
+
+  const textMismatch = page.locator("#text-mismatch");
+  await expect(textMismatch).toHaveText("Client text content");
+
+  const attributeMismatch = page.locator("#attribute-mismatch");
+  await expect(attributeMismatch).toHaveAttribute("role", "status");
+  await expect(attributeMismatch).toHaveAttribute(
+    "title",
+    "Client attribute title",
+  );
+
+  const attributeValueMismatch = page.locator("#attribute-value-mismatch");
+  await expect(attributeValueMismatch).toHaveAttribute(
+    "title",
+    "Client value title",
+  );
+  await expect(attributeValueMismatch).toHaveAttribute("data-side", "client");
+
+  const dangerousInnerHtml = page.locator("#dangerous-inner-html-stable");
+  await expect(dangerousInnerHtml.locator("#dangerous-inner-html-child")).toHaveText(
+    "Shared inner html",
+  );
+
+  const dangerousInnerHtmlMismatch = page.locator("#dangerous-inner-html-mismatch");
+  await expect(
+    dangerousInnerHtmlMismatch.locator("#dangerous-inner-html-mismatch-child"),
+  ).toHaveText("Client dangerous inner html");
+  await expect(
+    dangerousInnerHtmlMismatch.locator("#dangerous-inner-html-mismatch-child"),
+  ).toHaveJSProperty("tagName", "STRONG");
+
+  const styleMismatch = page.locator("#style-mismatch");
+  await expect(styleMismatch).toHaveCSS("width", "200px");
+  await expect(styleMismatch).toHaveCSS("height", "50px");
+
+  const whitespaceMismatch = page.locator("#whitespace-mismatch");
+  await expect.poll(() => whitespaceMismatch.evaluate((node) => node.textContent)).toBe(
+    "  Client whitespace content  ",
+  );
+
+  await expect(page.locator("#server-extra-node")).toHaveCount(0);
+  await expect(page.locator("#extra-node-stable")).toHaveText("Shared child");
+
+  await expect(page.locator("#placeholder-mismatch-shell p")).toHaveCount(0);
+  await expect(page.locator("body")).not.toContainText("Server text content");
+  await expect(page.locator("body")).not.toContainText(
+    "Server placeholder content",
+  );
+  await expect(page.locator("body")).not.toContainText("Server extra node");
+  await expect(page.locator("body")).not.toContainText("Server dangerous inner html");
+
+  await recoveryButton.click();
+  await expect(recoveryButton).toHaveText("Recovered 1");
+  await recoveryButton.click();
+  await expect(recoveryButton).toHaveText("Recovered 2");
+
+  // Streaming mismatch recovery: the suspense boundary resolved from the
+  // server, the client detected a tag mismatch, and rebuilt the subtree.
+  const streamingMismatch = page.locator("#streaming-mismatch");
+  await expect(streamingMismatch).toHaveCount(1);
+  await expect(streamingMismatch).toHaveJSProperty("tagName", "BUTTON");
+  await expect(streamingMismatch).toContainText("Streaming client: streamed data");
+
+  await expect
+    .poll(() =>
+      page.evaluate(() => {
+        const appRoot = document.querySelector("#app-root");
+        const streamingShell = document.querySelector("#streaming-mismatch-shell");
+        const afterBoundary = document.querySelector("#after-streaming-boundary");
+        if (!appRoot || !streamingShell || !afterBoundary) {
+          return "missing";
+        }
+
+        const children = Array.from(appRoot.children);
+        return (
+          children.indexOf(streamingShell) < children.indexOf(afterBoundary)
+        );
+      }),
+    )
+    .toBe(true);
+
+  expect(pageErrors).toEqual([]);
+  expect(consoleErrors).toEqual([]);
+});
diff --git a/packages/playwright-tests/fullstack-hydration-recovery/Cargo.toml b/packages/playwright-tests/fullstack-hydration-recovery/Cargo.toml
new file mode 100644
index 0000000000..010d25c329
--- /dev/null
+++ b/packages/playwright-tests/fullstack-hydration-recovery/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "dioxus-playwright-fullstack-hydration-recovery-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack", "debug-hydration-validation"] }
+async-std = "1"
+
+[features]
+default = []
+server = ["dioxus/server"]
+web = ["dioxus/web"]
diff --git a/packages/playwright-tests/fullstack-hydration-recovery/src/main.rs b/packages/playwright-tests/fullstack-hydration-recovery/src/main.rs
new file mode 100644
index 0000000000..c6e43f554f
--- /dev/null
+++ b/packages/playwright-tests/fullstack-hydration-recovery/src/main.rs
@@ -0,0 +1,343 @@
+//! Regression test for graceful hydration mismatch recovery.
+
+use dioxus::{fullstack::commit_initial_chunk, prelude::*};
+
+fn main() {
+    LaunchBuilder::new()
+        .with_cfg(server_only! {
+            dioxus::server::ServeConfig::builder().enable_out_of_order_streaming()
+        })
+        .launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    use_hook(commit_initial_chunk);
+    let count = use_signal(|| 0);
+
+    rsx! {
+        div {
+            id: "app-root",
+            h1 { "Hydration recovery regression" }
+            RecoveryButton { count }
+            NestedMismatch {}
+            TextMismatch {}
+            AttributeMismatch {}
+            AttributeValueMismatch {}
+            DangerousInnerHtmlStable {}
+            DangerousInnerHtmlMismatch {}
+            StyleMismatch {}
+            WhitespaceMismatch {}
+            ExtraNodeMismatch {}
+            PlaceholderMismatch {}
+            SuspenseBoundary {
+                fallback: |_| rsx! { div { id: "streaming-fallback", "Loading streaming…" } },
+                StreamingMismatch {}
+            }
+            div {
+                id: "after-streaming-boundary",
+                "After streaming boundary"
+            }
+        }
+    }
+}
+
+#[component]
+fn RecoveryButton(mut count: Signal<i32>) -> Element {
+    if cfg!(target_arch = "wasm32") {
+        rsx! {
+            button {
+                id: "recovery-button",
+                onclick: move |_| count += 1,
+                "Recovered {count}"
+            }
+        }
+    } else {
+        rsx! {
+            div {
+                id: "recovery-button",
+                "Recovered 0"
+            }
+        }
+    }
+}
+
+#[component]
+fn NestedMismatch() -> Element {
+    rsx! {
+        section {
+            id: "nested-mismatch-shell",
+            h2 { "Nested mismatch" }
+            div {
+                class: "nested-wrapper",
+                ul {
+                    li {
+                        NestedLeaf {}
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn NestedLeaf() -> Element {
+    if cfg!(target_arch = "wasm32") {
+        rsx! {
+            strong {
+                id: "nested-leaf",
+                "Nested client leaf"
+            }
+        }
+    } else {
+        rsx! {
+            span {
+                id: "nested-leaf",
+                "Nested client leaf"
+            }
+        }
+    }
+}
+
+#[component]
+fn TextMismatch() -> Element {
+    let text = if cfg!(target_arch = "wasm32") {
+        "Client text content"
+    } else {
+        "Server text content"
+    };
+
+    rsx! {
+        section {
+            id: "text-mismatch-shell",
+            h2 { "Text mismatch" }
+            p {
+                id: "text-mismatch",
+                "{text}"
+            }
+        }
+    }
+}
+
+#[component]
+fn AttributeMismatch() -> Element {
+    if cfg!(target_arch = "wasm32") {
+        let client_title = "Client attribute title";
+
+        rsx! {
+            section {
+                id: "attribute-mismatch-shell",
+                h2 { "Attribute mismatch" }
+                div {
+                    id: "attribute-mismatch",
+                    role: "status",
+                    title: client_title,
+                    "Attribute branch"
+                }
+            }
+        }
+    } else {
+        rsx! {
+            section {
+                id: "attribute-mismatch-shell",
+                h2 { "Attribute mismatch" }
+                div {
+                    id: "attribute-mismatch",
+                    "Attribute branch"
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn AttributeValueMismatch() -> Element {
+    let title = if cfg!(target_arch = "wasm32") {
+        "Client value title"
+    } else {
+        "Server value title"
+    };
+    let data_side = if cfg!(target_arch = "wasm32") {
+        "client"
+    } else {
+        "server"
+    };
+
+    rsx! {
+        section {
+            id: "attribute-value-mismatch-shell",
+            h2 { "Attribute value mismatch" }
+            div {
+                id: "attribute-value-mismatch",
+                title,
+                "data-side": data_side,
+                "Attribute value branch"
+            }
+        }
+    }
+}
+
+#[component]
+fn DangerousInnerHtmlStable() -> Element {
+    let inner_html = "<strong id='dangerous-inner-html-child'>Shared inner html</strong>";
+
+    rsx! {
+        section {
+            id: "dangerous-inner-html-stable-shell",
+            h2 { "Dangerous inner html stable" }
+            div {
+                id: "dangerous-inner-html-stable",
+                dangerous_inner_html: inner_html,
+            }
+        }
+    }
+}
+
+#[component]
+fn DangerousInnerHtmlMismatch() -> Element {
+    let inner_html = if cfg!(target_arch = "wasm32") {
+        "<strong id='dangerous-inner-html-mismatch-child'>Client dangerous inner html</strong>"
+    } else {
+        "<em id='dangerous-inner-html-mismatch-child'>Server dangerous inner html</em>"
+    };
+
+    rsx! {
+        section {
+            id: "dangerous-inner-html-mismatch-shell",
+            h2 { "Dangerous inner html mismatch" }
+            div {
+                id: "dangerous-inner-html-mismatch",
+                dangerous_inner_html: inner_html,
+            }
+        }
+    }
+}
+
+#[component]
+fn StyleMismatch() -> Element {
+    let width = if cfg!(target_arch = "wasm32") {
+        "200px"
+    } else {
+        "100px"
+    };
+    let height = if cfg!(target_arch = "wasm32") {
+        "50px"
+    } else {
+        "40px"
+    };
+
+    rsx! {
+        section {
+            id: "style-mismatch-shell",
+            h2 { "Style mismatch" }
+            div {
+                id: "style-mismatch",
+                width,
+                height,
+                "Style branch"
+            }
+        }
+    }
+}
+
+#[component]
+fn WhitespaceMismatch() -> Element {
+    let text = if cfg!(target_arch = "wasm32") {
+        "  Client whitespace content  "
+    } else {
+        "Client whitespace content"
+    };
+
+    rsx! {
+        section {
+            id: "whitespace-mismatch-shell",
+            h2 { "Whitespace mismatch" }
+            pre {
+                id: "whitespace-mismatch",
+                "{text}"
+            }
+        }
+    }
+}
+
+#[component]
+fn ExtraNodeMismatch() -> Element {
+    rsx! {
+        section {
+            id: "extra-node-mismatch-shell",
+            h2 { "Extra node mismatch" }
+            div {
+                id: "extra-node-stable",
+                "Shared child"
+            }
+            if !cfg!(target_arch = "wasm32") {
+                p {
+                    id: "server-extra-node",
+                    "Server extra node"
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn PlaceholderMismatch() -> Element {
+    rsx! {
+        section {
+            id: "placeholder-mismatch-shell",
+            h2 { "Placeholder mismatch" }
+            PlaceholderSlot {}
+        }
+    }
+}
+
+#[component]
+fn PlaceholderSlot() -> Element {
+    if cfg!(target_arch = "wasm32") {
+        Ok(VNode::placeholder())
+    } else {
+        rsx! {
+            p {
+                id: "server-placeholder-content",
+                "Server placeholder content"
+            }
+        }
+    }
+}
+
+/// A component that lives inside a SuspenseBoundary and introduces a tag
+/// mismatch after the suspense boundary streams in from the server.
+#[component]
+fn StreamingMismatch() -> Element {
+    // use_server_future suspends until the server resolves.
+    let value = use_server_future(|| async {
+        async_std::task::sleep(std::time::Duration::from_millis(600)).await;
+        "streamed data".to_string()
+    })?()
+    .unwrap();
+
+    // After resolution the client and server disagree on the tag.
+    if cfg!(target_arch = "wasm32") {
+        rsx! {
+            section {
+                id: "streaming-mismatch-shell",
+                h2 { "Streaming mismatch" }
+                button {
+                    id: "streaming-mismatch",
+                    "Streaming client: {value}"
+                }
+            }
+        }
+    } else {
+        rsx! {
+            section {
+                id: "streaming-mismatch-shell",
+                h2 { "Streaming mismatch" }
+                div {
+                    id: "streaming-mismatch",
+                    "Streaming server: {value}"
+                }
+            }
+        }
+    }
+}
diff --git a/packages/playwright-tests/playwright.config.js b/packages/playwright-tests/playwright.config.js
index 075f95f1b9..6ed15efe22 100644
--- a/packages/playwright-tests/playwright.config.js
+++ b/packages/playwright-tests/playwright.config.js
@@ -142,6 +142,16 @@ if (process.platform === "win32") {
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "fullstack-hydration-recovery"),
+      // This is intentionally the only non-`--release` webServer because recovery validation is `debug_assertions`-gated.
+      command:
+        'cargo run --package dioxus-cli -- run --force-sequential --web --addr "127.0.0.1" --port 7978',
+      port: 7978,
+      timeout: 50 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
     {
       cwd: path.join(process.cwd(), "cli-optimization"),
       command:
diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml
index 3cd295dc2f..e0128001fc 100644
--- a/packages/web/Cargo.toml
+++ b/packages/web/Cargo.toml
@@ -12,6 +12,9 @@ keywords = ["dom", "ui", "gui", "web", "wasm"]
 [dependencies]
 dioxus-core = { workspace = true }
 dioxus-core-types = { workspace = true }
+dioxus-autofmt = { workspace = true, optional = true }
+dioxus-rsx = { workspace = true, optional = true }
+dioxus-rsx-rosetta = { workspace = true, optional = true }
 dioxus-cli-config = { workspace = true, features = ["web"] }
 dioxus-html = { workspace = true }
 dioxus-history = { workspace = true }
@@ -35,6 +38,7 @@ futures-channel = { workspace = true }
 serde_json = { version = "1.0", optional = true }
 serde = { version = "1.0", optional = true }
 serde-wasm-bindgen = { version = "0.6.5", optional = true }
+syn = { workspace = true, optional = true }
 
 ciborium = { workspace = true, optional = true }
 gloo-timers = { workspace = true, optional = true, features = ["futures"] }
@@ -55,6 +59,7 @@ features = [
     "DataTransferItemList",
     "DataTransferItem",
     "Document",
+    "DocumentFragment",
     "DomRectReadOnly",
     "DragEvent",
     "FocusEvent",
@@ -95,6 +100,7 @@ lazy-js-bundle = { workspace = true }
 [features]
 default = ["mounted", "devtools", "document"]
 hydrate = ["web-sys/Comment", "dep:serde", "dep:dioxus-fullstack-core"]
+debug-hydration-validation = ["dep:dioxus-autofmt", "dep:dioxus-rsx", "dep:dioxus-rsx-rosetta", "dep:syn"]
 mounted = [
     "web-sys/Element",
     "web-sys/Element",
diff --git a/packages/web/src/hydration/hydrate.rs b/packages/web/src/hydration/hydrate.rs
index 35b4ad1a64..36b589c0f5 100644
--- a/packages/web/src/hydration/hydrate.rs
+++ b/packages/web/src/hydration/hydrate.rs
@@ -3,6 +3,7 @@
 //! 2. As we render the virtual dom initially, keep track of the server ids of the suspense boundaries
 //! 3. Register a callback for dx_hydrate(id, data) that takes some new data, reruns the suspense boundary with that new data and then rehydrates the node
 
+use super::{session, HydrationSession, SuspenseMessage};
 use crate::dom::WebsysDom;
 use dioxus_core::{
     AttributeValue, DynamicNode, ElementId, ScopeId, ScopeState, SuspenseBoundaryProps,
@@ -13,8 +14,6 @@ use futures_channel::mpsc::UnboundedReceiver;
 use std::fmt::Write;
 use RehydrationError::*;
 
-use super::SuspenseMessage;
-
 #[derive(Debug)]
 #[non_exhaustive]
 pub(crate) enum RehydrationError {
@@ -26,6 +25,28 @@ pub(crate) enum RehydrationError {
     ElementNotFound,
 }
 
+#[derive(Default)]
+pub(crate) struct HydrationOutputs {
+    pub(super) ids: Vec<u32>,
+    #[cfg_attr(not(feature = "mounted"), allow(dead_code))]
+    pub(super) to_mount: Vec<ElementId>,
+}
+
+/// Apply the success-path finalize: hand the matched ids + DOM nodes off to
+/// the JS interpreter and dispatch any deferred onmounted events.
+pub(crate) fn finalize_hydrate(
+    websys: &mut WebsysDom,
+    outputs: HydrationOutputs,
+    under: Vec<web_sys::Node>,
+) {
+    websys.interpreter.base().hydrate(outputs.ids, under);
+
+    #[cfg(feature = "mounted")]
+    for id in outputs.to_mount {
+        websys.send_mount_event(id);
+    }
+}
+
 #[derive(Debug)]
 struct SuspenseHydrationIdsNode {
     /// The scope id of the suspense boundary
@@ -117,11 +138,12 @@ impl WebsysDom {
             #[cfg(debug_assertions)]
             debug_locations,
         } = message;
+        let mut validation = session();
 
-        let document = web_sys::window().unwrap().document().unwrap();
         // Before we start rehydrating the suspense boundary we need to check that the suspense boundary exists. It may have been removed on the client.
         let resolved_suspense_id = path_to_resolved_suspense_id(&suspense_path);
-        let resolved_suspense_element = document
+        let resolved_suspense_element = self
+            .document
             .get_element_by_id(&resolved_suspense_id)
             .ok_or(RehydrationError::ElementNotFound)?;
 
@@ -133,12 +155,9 @@ impl WebsysDom {
             .ok_or(RehydrationError::SuspenseHydrationIdNotFound)?;
 
         // Push the new nodes onto the stack
-        let mut current_child = resolved_suspense_element.first_child();
-        let mut children = Vec::new();
-        while let Some(node) = current_child {
-            children.push(node.clone());
-            current_child = node.next_sibling();
-            self.interpreter.base().push_root(node);
+        let children = child_nodes(&resolved_suspense_element);
+        for node in &children {
+            self.interpreter.base().push_root(node.clone());
         }
 
         #[cfg(not(debug_assertions))]
@@ -169,49 +188,68 @@ impl WebsysDom {
         // Flush the mutations that will swap the placeholder nodes with the resolved nodes
         self.flush_edits();
 
+        // Streaming recovery removes this suspense container, so capture its insertion anchor now while it is still mounted.
+        let recovery = validation.streaming_recovery(&resolved_suspense_element);
+
         // Remove the streaming div
         resolved_suspense_element.remove();
 
         let Some(root_scope) = dom.get_scope(id) else {
-            // If the scope was removed on the client, we may not be able to rehydrate it, but this shouldn't cause an error
+            // The scope was removed on the client. resolve_suspense bailed before
+            // consuming the pushed roots, so unwind the JS stack manually.
+            for _ in 0..children.len() {
+                self.interpreter.pop_root();
+            }
             return Ok(());
         };
+        let root_scope_id = root_scope.id();
 
         // As we hydrate the suspense boundary, set the current path to the path of the suspense boundary
         self.suspense_hydration_ids
             .current_path
             .clone_from(&suspense_path);
-        self.start_hydration_at_scope(root_scope, dom, children)?;
+        // resolve_suspense already consumed the pushed roots via replace_node_with,
+        // so the JS stack is balanced when start_hydration_at_scope runs.
+        self.start_hydration_at_scope(root_scope_id, dom, children, &mut validation, recovery)?;
 
         Ok(())
     }
 
-    fn start_hydration_at_scope(
+    fn start_hydration_at_scope<S: HydrationSession>(
         &mut self,
-        scope: &ScopeState,
-        dom: &VirtualDom,
+        scope_id: ScopeId,
+        dom: &mut VirtualDom,
         under: Vec<web_sys::Node>,
+        validation: &mut S,
+        recovery: S::RecoveryAnchor,
     ) -> Result<(), RehydrationError> {
-        let mut ids = Vec::new();
-        let mut to_mount = Vec::new();
-
-        // Recursively rehydrate the nodes under the scope
-        self.rehydrate_scope(scope, dom, &mut ids, &mut to_mount)?;
-
-        self.interpreter.base().hydrate(ids, under);
-
-        #[cfg(feature = "mounted")]
-        for id in to_mount {
-            self.send_mount_event(id);
-        }
-
-        Ok(())
+        let suspense_path = if scope_id == dom.base_scope().id() {
+            None
+        } else {
+            Some(self.suspense_hydration_ids.current_path.clone())
+        };
+        validation.run_scope(
+            self,
+            dom,
+            scope_id,
+            under,
+            recovery,
+            suspense_path,
+            |websys, dom, validation| {
+                let mut outputs = HydrationOutputs::default();
+                let scope = dom.get_scope(scope_id).ok_or(VNodeNotInitialized)?;
+                websys.rehydrate_scope(scope, dom, &mut outputs, validation)?;
+                Ok(outputs)
+            },
+        )
     }
 
     pub fn rehydrate(
         &mut self,
-        vdom: &VirtualDom,
+        vdom: &mut VirtualDom,
     ) -> Result<UnboundedReceiver<SuspenseMessage>, RehydrationError> {
+        let mut validation = session();
+
         let (mut tx, rx) = futures_channel::mpsc::unbounded();
         let closure =
             move |path: Vec<u32>,
@@ -236,7 +274,14 @@ impl WebsysDom {
 
         // Rehydrate the root scope that was rendered on the server. We will likely run into suspense boundaries.
         // Any suspense boundaries we run into are stored for hydration later.
-        self.start_hydration_at_scope(vdom.base_scope(), vdom, vec![self.root.clone()])?;
+        let recovery = validation.root_recovery();
+        self.start_hydration_at_scope(
+            vdom.base_scope().id(),
+            vdom,
+            vec![self.root.clone()],
+            &mut validation,
+            recovery,
+        )?;
 
         Ok(rx)
     }
@@ -245,8 +290,8 @@ impl WebsysDom {
         &mut self,
         scope: &ScopeState,
         dom: &VirtualDom,
-        ids: &mut Vec<u32>,
-        to_mount: &mut Vec<ElementId>,
+        outputs: &mut HydrationOutputs,
+        validation: &mut impl HydrationSession,
     ) -> Result<(), RehydrationError> {
         // If this scope is a suspense boundary that is pending, add it to the list of pending suspense boundaries
         if let Some(suspense) =
@@ -258,24 +303,24 @@ impl WebsysDom {
             }
         }
 
-        self.rehydrate_vnode(dom, scope.root_node(), ids, to_mount)
+        self.rehydrate_vnode(dom, scope.root_node(), outputs, validation)
     }
 
     fn rehydrate_vnode(
         &mut self,
         dom: &VirtualDom,
         vnode: &VNode,
-        ids: &mut Vec<u32>,
-        to_mount: &mut Vec<ElementId>,
+        outputs: &mut HydrationOutputs,
+        validation: &mut impl HydrationSession,
     ) -> Result<(), RehydrationError> {
         for (i, root) in vnode.template.roots.iter().enumerate() {
             self.rehydrate_template_node(
                 dom,
                 vnode,
                 root,
-                ids,
-                to_mount,
+                outputs,
                 Some(vnode.mounted_root(i, dom).ok_or(VNodeNotInitialized)?),
+                validation,
             )?;
         }
         Ok(())
@@ -286,14 +331,14 @@ impl WebsysDom {
         dom: &VirtualDom,
         vnode: &VNode,
         node: &TemplateNode,
-        ids: &mut Vec<u32>,
-        to_mount: &mut Vec<ElementId>,
+        outputs: &mut HydrationOutputs,
         root_id: Option<ElementId>,
+        validation: &mut impl HydrationSession,
     ) -> Result<(), RehydrationError> {
         match node {
             TemplateNode::Element {
-                children, attrs, ..
-            } => {
+                attrs, children, ..
+            } => validation.element(dom, vnode, node, |validation| {
                 let mut mounted_id = root_id;
                 for attr in *attrs {
                     if let dioxus_core::TemplateAttribute::Dynamic { id } = attr {
@@ -309,34 +354,34 @@ impl WebsysDom {
                             let value = &attribute.value;
                             if let AttributeValue::Listener(_) = value {
                                 if attribute.name == "onmounted" {
-                                    to_mount.push(id);
+                                    outputs.to_mount.push(id);
                                 }
                             }
                         }
                     }
                 }
                 if let Some(id) = mounted_id {
-                    ids.push(id.0 as u32);
+                    outputs.ids.push(id.0 as u32);
                 }
-                if !children.is_empty() {
-                    for child in *children {
-                        self.rehydrate_template_node(dom, vnode, child, ids, to_mount, None)?;
-                    }
+                for child in *children {
+                    self.rehydrate_template_node(dom, vnode, child, outputs, None, validation)?;
                 }
-            }
+                Ok::<(), RehydrationError>(())
+            })?,
             TemplateNode::Dynamic { id } => self.rehydrate_dynamic_node(
                 dom,
                 &vnode.dynamic_nodes[*id],
                 *id,
                 vnode,
-                ids,
-                to_mount,
+                outputs,
+                validation,
             )?,
-            TemplateNode::Text { .. } => {
+            TemplateNode::Text { text } => validation.text(text, |_| {
                 if let Some(id) = root_id {
-                    ids.push(id.0 as u32);
+                    outputs.ids.push(id.0 as u32);
                 }
-            }
+                Ok::<(), RehydrationError>(())
+            })?,
         }
         Ok(())
     }
@@ -347,27 +392,39 @@ impl WebsysDom {
         dynamic: &DynamicNode,
         dynamic_node_index: usize,
         vnode: &VNode,
-        ids: &mut Vec<u32>,
-        to_mount: &mut Vec<ElementId>,
+        outputs: &mut HydrationOutputs,
+        validation: &mut impl HydrationSession,
     ) -> Result<(), RehydrationError> {
         match dynamic {
-            dioxus_core::DynamicNode::Text(_) | dioxus_core::DynamicNode::Placeholder(_) => {
-                ids.push(
+            dioxus_core::DynamicNode::Text(text) => validation.text(&text.value, |_| {
+                outputs.ids.push(
                     vnode
                         .mounted_dynamic_node(dynamic_node_index, dom)
                         .ok_or(VNodeNotInitialized)?
                         .0 as u32,
                 );
-            }
+                Ok::<(), RehydrationError>(())
+            })?,
+            dioxus_core::DynamicNode::Placeholder(_) => validation.placeholder(|_| {
+                outputs.ids.push(
+                    vnode
+                        .mounted_dynamic_node(dynamic_node_index, dom)
+                        .ok_or(VNodeNotInitialized)?
+                        .0 as u32,
+                );
+                Ok::<(), RehydrationError>(())
+            })?,
             dioxus_core::DynamicNode::Component(comp) => {
-                let scope = comp
-                    .mounted_scope(dynamic_node_index, vnode, dom)
-                    .ok_or(VNodeNotInitialized)?;
-                self.rehydrate_scope(scope, dom, ids, to_mount)?;
+                validation.component(comp.name, |validation| {
+                    let scope = comp
+                        .mounted_scope(dynamic_node_index, vnode, dom)
+                        .ok_or(VNodeNotInitialized)?;
+                    self.rehydrate_scope(scope, dom, outputs, validation)
+                })?
             }
             dioxus_core::DynamicNode::Fragment(fragment) => {
                 for vnode in fragment {
-                    self.rehydrate_vnode(dom, vnode, ids, to_mount)?;
+                    self.rehydrate_vnode(dom, vnode, outputs, validation)?;
                 }
             }
         }
@@ -375,6 +432,18 @@ impl WebsysDom {
     }
 }
 
+/// Collect the direct children of a node into a Vec, snapshotting the sibling
+/// chain at call time so callers can mutate the DOM during iteration.
+pub(crate) fn child_nodes(node: &web_sys::Node) -> Vec<web_sys::Node> {
+    let mut children = Vec::new();
+    let mut child = node.first_child();
+    while let Some(node) = child {
+        children.push(node.clone());
+        child = node.next_sibling();
+    }
+    children
+}
+
 fn write_comma_separated(id: &[u32], into: &mut String) {
     let mut iter = id.iter();
     if let Some(first) = iter.next() {
diff --git a/packages/web/src/hydration/mod.rs b/packages/web/src/hydration/mod.rs
index b149bf4fb0..4ebcda5c72 100644
--- a/packages/web/src/hydration/mod.rs
+++ b/packages/web/src/hydration/mod.rs
@@ -1,6 +1,148 @@
 #[cfg(feature = "hydrate")]
 mod hydrate;
 
+#[cfg(all(
+    feature = "hydrate",
+    feature = "debug-hydration-validation",
+    debug_assertions
+))]
+pub(crate) mod validation;
+
+#[cfg(feature = "hydrate")]
+use crate::dom::WebsysDom;
+#[cfg(feature = "hydrate")]
+use dioxus_core::{ScopeId, TemplateNode, VNode, VirtualDom};
+#[cfg(feature = "hydrate")]
+use hydrate::{finalize_hydrate, HydrationOutputs, RehydrationError};
+
+#[cfg(feature = "hydrate")]
+pub(crate) trait HydrationSession {
+    type RecoveryAnchor;
+
+    fn root_recovery(&self) -> Self::RecoveryAnchor;
+
+    fn streaming_recovery(&self, anchor: &web_sys::Element) -> Self::RecoveryAnchor;
+
+    /// Run the full hydration pass for one scope: walk the vnode (via
+    /// `hydrate`), validate against the DOM, then either finalize the match
+    /// or fall back to a client rebuild. The session owns the whole flow so
+    /// the caller doesn't need to dispatch on outcome.
+    fn run_scope<E, F>(
+        &mut self,
+        websys: &mut WebsysDom,
+        dom: &mut VirtualDom,
+        scope_id: ScopeId,
+        under: Vec<web_sys::Node>,
+        recovery: Self::RecoveryAnchor,
+        suspense_path: Option<Vec<u32>>,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        E: From<RehydrationError>,
+        F: FnOnce(&mut WebsysDom, &mut VirtualDom, &mut Self) -> Result<HydrationOutputs, E>;
+
+    fn element<E, F>(
+        &mut self,
+        dom: &VirtualDom,
+        vnode: &VNode,
+        node: &TemplateNode,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>;
+
+    fn text<E, F>(&mut self, expected_content: &str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>;
+
+    fn placeholder<E, F>(&mut self, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>;
+
+    fn component<E, F>(&mut self, name: &'static str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>;
+}
+
+#[cfg(feature = "hydrate")]
+#[allow(dead_code)]
+#[derive(Default)]
+pub(crate) struct NoopHydrationSession;
+
+#[cfg(feature = "hydrate")]
+impl HydrationSession for NoopHydrationSession {
+    type RecoveryAnchor = ();
+
+    fn root_recovery(&self) {}
+    fn streaming_recovery(&self, _: &web_sys::Element) {}
+
+    fn run_scope<E, F>(
+        &mut self,
+        websys: &mut WebsysDom,
+        dom: &mut VirtualDom,
+        _: ScopeId,
+        under: Vec<web_sys::Node>,
+        _: Self::RecoveryAnchor,
+        _: Option<Vec<u32>>,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        E: From<RehydrationError>,
+        F: FnOnce(&mut WebsysDom, &mut VirtualDom, &mut Self) -> Result<HydrationOutputs, E>,
+    {
+        let outputs = hydrate(websys, dom, self)?;
+        finalize_hydrate(websys, outputs, under);
+        Ok(())
+    }
+
+    fn element<E, F>(
+        &mut self,
+        _: &VirtualDom,
+        _: &VNode,
+        _: &TemplateNode,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        hydrate(self)
+    }
+
+    fn text<E, F>(&mut self, _: &str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        hydrate(self)
+    }
+
+    fn placeholder<E, F>(&mut self, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        hydrate(self)
+    }
+
+    fn component<E, F>(&mut self, _: &'static str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        hydrate(self)
+    }
+}
+
+#[cfg(feature = "hydrate")]
+pub(crate) fn session() -> impl HydrationSession {
+    #[cfg(all(feature = "debug-hydration-validation", debug_assertions))]
+    {
+        validation::HydrationValidationSession::default()
+    }
+
+    #[cfg(not(all(feature = "debug-hydration-validation", debug_assertions)))]
+    {
+        NoopHydrationSession
+    }
+}
+
 #[cfg(feature = "hydrate")]
 #[allow(unused)]
 pub use hydrate::*;
diff --git a/packages/web/src/hydration/validation/attrs.rs b/packages/web/src/hydration/validation/attrs.rs
new file mode 100644
index 0000000000..7206c5c15c
--- /dev/null
+++ b/packages/web/src/hydration/validation/attrs.rs
@@ -0,0 +1,310 @@
+use std::collections::BTreeMap;
+
+use dioxus_core::{Attribute, AttributeValue, TemplateAttribute};
+
+use super::serialize::{
+    is_internal_attribute_name, walk_template_attrs, TemplateAttrRef,
+    DANGEROUS_INNER_HTML_ATTRIBUTE, STYLE_NAMESPACE,
+};
+
+const BOOLEAN_HTML_ATTRIBUTES: &[&str] = &[
+    "allowfullscreen",
+    "allowpaymentrequest",
+    "async",
+    "autofocus",
+    "autoplay",
+    "checked",
+    "controls",
+    "default",
+    "defer",
+    "disabled",
+    "formnovalidate",
+    "hidden",
+    "ismap",
+    "itemscope",
+    "loop",
+    "multiple",
+    "muted",
+    "nomodule",
+    "novalidate",
+    "open",
+    "playsinline",
+    "readonly",
+    "required",
+    "reversed",
+    "selected",
+    "truespeed",
+    "webkitdirectory",
+];
+
+#[derive(Default)]
+pub(super) struct AttributeMismatches {
+    missing: Vec<String>,
+    unexpected: Vec<String>,
+    mismatched: Vec<String>,
+}
+
+impl AttributeMismatches {
+    pub(super) fn has_mismatches(&self) -> bool {
+        !self.missing.is_empty() || !self.unexpected.is_empty() || !self.mismatched.is_empty()
+    }
+
+    pub(super) fn describe(&self) -> String {
+        let mut parts = Vec::new();
+
+        if !self.missing.is_empty() {
+            parts.push(format!("the DOM is missing [{}]", self.missing.join(", ")));
+        }
+
+        if !self.unexpected.is_empty() {
+            parts.push(format!(
+                "the DOM has unexpected [{}]",
+                self.unexpected.join(", ")
+            ));
+        }
+
+        if !self.mismatched.is_empty() {
+            parts.push(format!(
+                "these values differ [{}]",
+                self.mismatched.join(", ")
+            ));
+        }
+
+        parts.join("; ")
+    }
+}
+
+#[derive(Clone, Debug, PartialEq, Eq)]
+enum ExpectedAttributeValue {
+    Absent,
+    Present,
+    Exact(String),
+    PresenceOnly,
+}
+
+pub(super) fn find_attribute_mismatches(
+    element: &web_sys::Element,
+    static_attrs: &'static [TemplateAttribute],
+    dynamic_attrs: &[&[Attribute]],
+) -> AttributeMismatches {
+    let mut mismatches = AttributeMismatches::default();
+    let expected = expected_attributes(static_attrs, dynamic_attrs);
+
+    let mut actual = BTreeMap::<String, String>::new();
+    let names = element.get_attribute_names();
+    for idx in 0..names.length() {
+        let Some(name) = names.get(idx).as_string() else {
+            continue;
+        };
+        if should_skip_attribute(&name, None) {
+            continue;
+        }
+        actual.insert(
+            name.clone(),
+            element.get_attribute(&name).unwrap_or_default(),
+        );
+    }
+
+    for (name, expected_value) in &expected {
+        match expected_value {
+            ExpectedAttributeValue::Absent => {
+                if actual.contains_key(name) {
+                    mismatches.unexpected.push(name.clone());
+                }
+            }
+            ExpectedAttributeValue::Present | ExpectedAttributeValue::PresenceOnly => {
+                if !actual.contains_key(name) {
+                    mismatches.missing.push(name.clone());
+                }
+            }
+            ExpectedAttributeValue::Exact(expected_value) => match actual.get(name) {
+                None => mismatches.missing.push(name.clone()),
+                Some(actual_value) if actual_value != expected_value => {
+                    mismatches.mismatched.push(format!(
+                        "{}: expected {:?}, found {:?}",
+                        name, expected_value, actual_value
+                    ))
+                }
+                Some(_) => {}
+            },
+        }
+    }
+
+    for name in actual.keys() {
+        if !expected.contains_key(name) {
+            mismatches.unexpected.push(name.clone());
+        }
+    }
+
+    mismatches.missing.sort();
+    mismatches.missing.dedup();
+    mismatches.unexpected.sort();
+    mismatches.unexpected.dedup();
+    mismatches
+}
+
+fn expected_attributes(
+    static_attrs: &'static [TemplateAttribute],
+    dynamic_attrs: &[&[Attribute]],
+) -> BTreeMap<String, ExpectedAttributeValue> {
+    let mut expected = BTreeMap::new();
+
+    let style = walk_template_attrs(
+        static_attrs,
+        dynamic_attrs.iter().copied(),
+        |item| match item {
+            TemplateAttrRef::Static {
+                name,
+                value,
+                namespace,
+            } => {
+                if should_skip_attribute(name, namespace) {
+                    return;
+                }
+                expected.insert(name.to_string(), expected_static_attribute_value(name, value));
+            }
+            TemplateAttrRef::Dynamic(attr) => {
+                if should_skip_attribute(attr.name, attr.namespace) {
+                    return;
+                }
+                expected.insert(
+                    attr.name.to_string(),
+                    expected_dynamic_attribute_value(attr.name, &attr.value),
+                );
+            }
+        },
+    );
+
+    if let Some(style) = style {
+        expected.insert(
+            STYLE_NAMESPACE.to_string(),
+            ExpectedAttributeValue::Exact(style),
+        );
+    }
+
+    expected
+}
+
+fn expected_static_attribute_value(name: &str, value: &str) -> ExpectedAttributeValue {
+    if is_boolean_html_attribute(name) {
+        if str_truthy(value) {
+            ExpectedAttributeValue::Present
+        } else {
+            ExpectedAttributeValue::Absent
+        }
+    } else {
+        ExpectedAttributeValue::Exact(value.to_string())
+    }
+}
+
+fn expected_dynamic_attribute_value(name: &str, value: &AttributeValue) -> ExpectedAttributeValue {
+    match value {
+        AttributeValue::None => ExpectedAttributeValue::Absent,
+        AttributeValue::Text(value) => {
+            if is_boolean_html_attribute(name) {
+                if str_truthy(value) {
+                    ExpectedAttributeValue::Present
+                } else {
+                    ExpectedAttributeValue::Absent
+                }
+            } else {
+                ExpectedAttributeValue::Exact(value.clone())
+            }
+        }
+        AttributeValue::Float(value) => {
+            if is_boolean_html_attribute(name) {
+                if *value != 0.0 {
+                    ExpectedAttributeValue::Present
+                } else {
+                    ExpectedAttributeValue::Absent
+                }
+            } else {
+                ExpectedAttributeValue::Exact(value.to_string())
+            }
+        }
+        AttributeValue::Int(value) => {
+            if is_boolean_html_attribute(name) {
+                if *value != 0 {
+                    ExpectedAttributeValue::Present
+                } else {
+                    ExpectedAttributeValue::Absent
+                }
+            } else {
+                ExpectedAttributeValue::Exact(value.to_string())
+            }
+        }
+        AttributeValue::Bool(value) => {
+            if is_boolean_html_attribute(name) {
+                if *value {
+                    ExpectedAttributeValue::Present
+                } else {
+                    ExpectedAttributeValue::Absent
+                }
+            } else {
+                ExpectedAttributeValue::Exact(value.to_string())
+            }
+        }
+        AttributeValue::Any(_) => ExpectedAttributeValue::PresenceOnly,
+        AttributeValue::Listener(_) => ExpectedAttributeValue::Absent,
+    }
+}
+
+fn should_skip_attribute(name: &str, namespace: Option<&str>) -> bool {
+    is_internal_attribute_name(name)
+        || name == DANGEROUS_INNER_HTML_ATTRIBUTE
+        || matches!(namespace, Some(ns) if ns != STYLE_NAMESPACE)
+}
+
+fn str_truthy(value: &str) -> bool {
+    !value.is_empty() && value != "0" && !value.eq_ignore_ascii_case("false")
+}
+
+pub(super) fn is_boolean_html_attribute(name: &str) -> bool {
+    BOOLEAN_HTML_ATTRIBUTES.contains(&name)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn dangerous_inner_html_is_not_treated_as_dom_attribute() {
+        const STATIC_ATTRS: &[TemplateAttribute] = &[TemplateAttribute::Static {
+            name: DANGEROUS_INNER_HTML_ATTRIBUTE,
+            value: "<strong>hello</strong>",
+            namespace: None,
+        }];
+
+        assert!(expected_attributes(STATIC_ATTRS, &[]).is_empty());
+    }
+
+    #[test]
+    fn style_namespace_attrs_are_folded_into_style_attribute() {
+        const STATIC_ATTRS: &[TemplateAttribute] = &[
+            TemplateAttribute::Static {
+                name: "width",
+                value: "100px",
+                namespace: Some(STYLE_NAMESPACE),
+            },
+            TemplateAttribute::Static {
+                name: "height",
+                value: "40px",
+                namespace: Some(STYLE_NAMESPACE),
+            },
+        ];
+        let dynamic_attrs = vec![
+            Attribute::new("display", "block", Some(STYLE_NAMESPACE), false),
+            Attribute::new("opacity", 0.5, Some(STYLE_NAMESPACE), false),
+        ];
+        let dynamic_refs = vec![dynamic_attrs.as_slice()];
+
+        let expected = expected_attributes(STATIC_ATTRS, &dynamic_refs);
+
+        assert_eq!(
+            expected.get(STYLE_NAMESPACE),
+            Some(&ExpectedAttributeValue::Exact(
+                "width:100px;height:40px;display:block;opacity:0.5;".to_string()
+            ))
+        );
+    }
+}
diff --git a/packages/web/src/hydration/validation/diff.rs b/packages/web/src/hydration/validation/diff.rs
new file mode 100644
index 0000000000..5d87be9ee0
--- /dev/null
+++ b/packages/web/src/hydration/validation/diff.rs
@@ -0,0 +1,101 @@
+use dioxus_autofmt::write_block_out;
+use dioxus_rsx::CallBody;
+use syn::parse::Parser;
+
+use super::serialize::normalize_formatted_rsx;
+
+pub(super) fn normalize_debug_rsx(raw: &str) -> String {
+    let trimmed = raw.trim();
+    if trimmed.is_empty() {
+        return trimmed.to_string();
+    }
+
+    CallBody::parse_strict
+        .parse_str(trimmed)
+        .ok()
+        .and_then(|body| write_block_out(&body).map(normalize_formatted_rsx))
+        .unwrap_or_else(|| trimmed.to_string())
+}
+
+pub(super) fn unified_rsx_diff(expected: &str, actual: &str) -> String {
+    let expected_lines: Vec<&str> = expected.lines().collect();
+    let actual_lines: Vec<&str> = actual.lines().collect();
+    let mut lcs = vec![vec![0usize; actual_lines.len() + 1]; expected_lines.len() + 1];
+
+    for i in (0..expected_lines.len()).rev() {
+        for j in (0..actual_lines.len()).rev() {
+            lcs[i][j] = if expected_lines[i] == actual_lines[j] {
+                lcs[i + 1][j + 1] + 1
+            } else {
+                lcs[i + 1][j].max(lcs[i][j + 1])
+            };
+        }
+    }
+
+    let mut i = 0;
+    let mut j = 0;
+    let mut diff_lines = Vec::new();
+
+    while i < expected_lines.len() && j < actual_lines.len() {
+        if expected_lines[i] == actual_lines[j] {
+            diff_lines.push(format!(" {}", expected_lines[i]));
+            i += 1;
+            j += 1;
+        } else if lcs[i + 1][j] >= lcs[i][j + 1] {
+            diff_lines.push(format!("-{}", expected_lines[i]));
+            i += 1;
+        } else {
+            diff_lines.push(format!("+{}", actual_lines[j]));
+            j += 1;
+        }
+    }
+
+    while i < expected_lines.len() {
+        diff_lines.push(format!("-{}", expected_lines[i]));
+        i += 1;
+    }
+
+    while j < actual_lines.len() {
+        diff_lines.push(format!("+{}", actual_lines[j]));
+        j += 1;
+    }
+
+    format!("--- expected\n+++ actual\n@@\n{}", diff_lines.join("\n"))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::unified_rsx_diff;
+
+    #[test]
+    fn diff_preserves_equal_lines() {
+        assert_eq!(
+            unified_rsx_diff("a\nb", "a\nb"),
+            "--- expected\n+++ actual\n@@\n a\n b"
+        );
+    }
+
+    #[test]
+    fn diff_marks_insertions() {
+        assert_eq!(
+            unified_rsx_diff("a", "a\nb"),
+            "--- expected\n+++ actual\n@@\n a\n+b"
+        );
+    }
+
+    #[test]
+    fn diff_marks_deletions() {
+        assert_eq!(
+            unified_rsx_diff("a\nb", "a"),
+            "--- expected\n+++ actual\n@@\n a\n-b"
+        );
+    }
+
+    #[test]
+    fn diff_marks_mixed_edits() {
+        assert_eq!(
+            unified_rsx_diff("a\nb\nc", "a\nx\nc"),
+            "--- expected\n+++ actual\n@@\n a\n-b\n+x\n c"
+        );
+    }
+}
diff --git a/packages/web/src/hydration/validation/mod.rs b/packages/web/src/hydration/validation/mod.rs
new file mode 100644
index 0000000000..5dc8cc5e01
--- /dev/null
+++ b/packages/web/src/hydration/validation/mod.rs
@@ -0,0 +1,749 @@
+//! Debug-mode hydration validation.
+//!
+//! This module is only compiled in debug builds. It validates that the
+//! server-rendered DOM matches the client virtual-DOM and, on mismatch, emits a
+//! human-readable RSX diff before falling back to a full client rebuild.
+
+mod attrs;
+mod diff;
+pub(super) mod serialize;
+
+use dioxus_core::{
+    CreateScopeDomError, ElementId, ScopeId, TemplateAttribute, TemplateNode, VNode, VirtualDom,
+    WriteMutations,
+};
+use wasm_bindgen::JsCast;
+
+use self::{
+    attrs::find_attribute_mismatches,
+    diff::{normalize_debug_rsx, unified_rsx_diff},
+    serialize::{
+        dom::{serialize_dom_nodes, serialize_dom_subtree, should_skip_validation_node},
+        format_rsx_nodes, missing_node, placeholder_node,
+        serialize_vnode_subtree,
+        vdom::{serialize_dangerous_inner_html, serialize_template_subtree},
+    },
+};
+use super::hydrate::{child_nodes, finalize_hydrate, HydrationOutputs, RehydrationError};
+use crate::dom::WebsysDom;
+
+/// Information about a hydration mismatch between the expected vdom and actual DOM
+#[derive(Debug)]
+pub(crate) struct HydrationMismatch {
+    /// Summary of what went wrong at this hydration site
+    pub reason: String,
+    /// Formatted RSX we expected from the virtual DOM
+    pub expected_rsx: String,
+    /// Formatted RSX we actually found in the DOM
+    pub actual_rsx: String,
+    /// Component path for debugging (e.g., "App > UserProfile > Avatar")
+    pub component_path: String,
+    /// The suspense path if inside a streaming boundary
+    pub suspense_path: Option<Vec<u32>>,
+}
+
+#[derive(Debug, Clone)]
+struct ElementMismatchContext {
+    expected_rsx: String,
+    actual_dom: Option<web_sys::Node>,
+}
+
+/// Helper to traverse DOM nodes in parallel with vdom traversal
+pub(crate) struct DomTraverser {
+    siblings: Vec<web_sys::Node>,
+    index: usize,
+}
+
+impl DomTraverser {
+    pub fn new(roots: Vec<web_sys::Node>) -> Self {
+        Self {
+            siblings: roots
+                .into_iter()
+                .filter(|node| !should_skip_validation_node(node))
+                .collect(),
+            index: 0,
+        }
+    }
+
+    /// Get the current node without advancing
+    pub fn current(&self) -> Option<&web_sys::Node> {
+        self.siblings.get(self.index)
+    }
+
+    /// Advance to the next sibling
+    pub fn next(&mut self) {
+        if self.siblings.get(self.index).is_some() {
+            self.index += 1;
+        }
+    }
+
+    pub fn remaining(&self) -> Vec<web_sys::Node> {
+        self.siblings[self.index..].to_vec()
+    }
+
+    /// Create a traverser for the children of the current node
+    pub fn children(&self) -> Self {
+        match self.current() {
+            Some(current) => Self::new(child_nodes(current)),
+            None => Self::new(Vec::new()),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+enum ComponentFrame {
+    Root,
+    User(&'static str),
+}
+
+#[derive(Default)]
+pub(crate) struct HydrationValidationSession {
+    /// Stack of component names for path tracking
+    component_stack: Vec<ComponentFrame>,
+    /// Collected mismatches
+    mismatches: Vec<HydrationMismatch>,
+    /// Stack of DOM traversers - one per level of recursion
+    traverser_stack: Vec<DomTraverser>,
+    /// Stack of expected/actual element contexts for scoping node-level diffs
+    element_stack: Vec<ElementMismatchContext>,
+}
+
+#[derive(Debug)]
+pub(crate) enum RecoveryAnchor {
+    /// Initial hydration: clear `under` and rebuild into `ElementId(0)`.
+    Root,
+    /// Streaming suspense: the wrapper element is being removed, so splice the
+    /// rebuilt fragment in between these siblings.
+    Streaming {
+        parent: web_sys::Node,
+        next_sibling: Option<web_sys::Node>,
+    },
+}
+
+impl From<CreateScopeDomError> for RehydrationError {
+    fn from(_: CreateScopeDomError) -> Self {
+        Self::VNodeNotInitialized
+    }
+}
+
+impl super::HydrationSession for HydrationValidationSession {
+    type RecoveryAnchor = RecoveryAnchor;
+
+    fn root_recovery(&self) -> Self::RecoveryAnchor {
+        RecoveryAnchor::Root
+    }
+
+    fn streaming_recovery(&self, anchor: &web_sys::Element) -> Self::RecoveryAnchor {
+        RecoveryAnchor::Streaming {
+            parent: anchor
+                .parent_node()
+                .expect("streaming recovery requires a parent anchor"),
+            next_sibling: anchor.next_sibling(),
+        }
+    }
+
+    fn run_scope<E, F>(
+        &mut self,
+        websys: &mut WebsysDom,
+        dom: &mut VirtualDom,
+        scope_id: ScopeId,
+        under: Vec<web_sys::Node>,
+        recovery: Self::RecoveryAnchor,
+        suspense_path: Option<Vec<u32>>,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        E: From<RehydrationError>,
+        F: FnOnce(&mut WebsysDom, &mut VirtualDom, &mut Self) -> Result<HydrationOutputs, E>,
+    {
+        self.init_traversal(validation_roots(scope_id, dom, &under));
+        self.push_root_marker();
+        let outcome = (|| -> Result<(), E> {
+            let outputs = hydrate(websys, dom, self)?;
+            let scope = dom
+                .get_scope(scope_id)
+                .ok_or(RehydrationError::VNodeNotInitialized)?;
+            self.report_extra_scope_nodes(serialize_vnode_subtree(dom, scope.root_node()));
+            if !self.has_mismatches() {
+                finalize_hydrate(websys, outputs, under);
+                return Ok(());
+            }
+            self.report_mismatches(suspense_path.as_deref());
+            self.take_mismatches(suspense_path.as_deref());
+            self.recover(websys, dom, scope_id, &under, recovery)?;
+            Ok(())
+        })();
+        self.pop_root_marker();
+        outcome
+    }
+
+    fn element<E, F>(
+        &mut self,
+        dom: &VirtualDom,
+        vnode: &VNode,
+        node: &TemplateNode,
+        hydrate: F,
+    ) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        let TemplateNode::Element {
+            tag,
+            namespace,
+            children,
+            attrs,
+            ..
+        } = node
+        else {
+            unreachable!("element validation requires an element template node");
+        };
+
+        let current_node = self.current_dom_node().cloned();
+        let expected_rsx = serialize_template_subtree(dom, vnode, node);
+        let dynamic_attrs = attrs
+            .iter()
+            .filter_map(|attr| {
+                let TemplateAttribute::Dynamic { id } = attr else {
+                    return None;
+                };
+                Some(&*vnode.dynamic_attrs[*id])
+            })
+            .collect::<Vec<_>>();
+
+        self.validate_element(
+            current_node.as_ref(),
+            tag,
+            *namespace,
+            attrs,
+            &dynamic_attrs,
+            &expected_rsx,
+        );
+        if let Some(expected_inner_html) = serialize_dangerous_inner_html(attrs, vnode) {
+            self.validate_dangerous_inner_html(
+                current_node.as_ref(),
+                &expected_inner_html,
+                &expected_rsx,
+            );
+        }
+        self.push_element_context(expected_rsx, current_node);
+
+        let has_children = !children.is_empty();
+        if has_children {
+            self.push_children();
+        }
+
+        let result = hydrate(self);
+
+        if has_children {
+            self.pop_children();
+        }
+        self.pop_element_context();
+        self.advance();
+
+        result
+    }
+
+    fn text<E, F>(&mut self, expected_content: &str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        let current_node = self.current_dom_node().cloned();
+        self.validate_text(
+            current_node.as_ref(),
+            expected_content,
+            &format!("{expected_content:?}"),
+        );
+
+        let result = hydrate(self);
+        self.advance();
+        result
+    }
+
+    fn placeholder<E, F>(&mut self, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        let current_node = self.current_dom_node().cloned();
+        self.validate_placeholder(
+            current_node.as_ref(),
+            &format_rsx_nodes(vec![placeholder_node()]),
+        );
+
+        let result = hydrate(self);
+        self.advance();
+        result
+    }
+
+    fn component<E, F>(&mut self, name: &'static str, hydrate: F) -> Result<(), E>
+    where
+        F: FnOnce(&mut Self) -> Result<(), E>,
+    {
+        self.push_component(name);
+        let result = hydrate(self);
+        self.pop_component();
+        result
+    }
+}
+
+impl HydrationValidationSession {
+    fn recover(
+        &mut self,
+        websys: &mut WebsysDom,
+        vdom: &mut VirtualDom,
+        scope_id: ScopeId,
+        under: &[web_sys::Node],
+        recovery: RecoveryAnchor,
+    ) -> Result<(), RehydrationError> {
+        tracing::warn!("Hydration mismatches detected in scope {scope_id:?}. Rebuilding subtree.");
+
+        match recovery {
+            RecoveryAnchor::Root => {
+                let m = vdom.create_scope_dom(websys, scope_id)?;
+
+                if let Some(root) = under.first() {
+                    while let Some(child) = root.first_child() {
+                        let _ = root.remove_child(&child);
+                    }
+                }
+
+                websys.append_children(ElementId(0), m);
+                websys.flush_edits();
+            }
+            RecoveryAnchor::Streaming {
+                parent,
+                next_sibling,
+            } => {
+                let fragment = websys.document.create_document_fragment();
+                websys.interpreter.base().push_root(fragment.clone().into());
+                let m = match vdom.create_scope_dom(websys, scope_id) {
+                    Ok(m) => m,
+                    Err(err) => {
+                        websys.interpreter.pop_root();
+                        return Err(err.into());
+                    }
+                };
+                websys.interpreter.append_children_to_top(m as u16);
+                websys.interpreter.pop_root();
+                websys.interpreter.flush();
+
+                for node in under {
+                    if let Some(parent) = node.parent_node() {
+                        let _ = parent.remove_child(node);
+                    }
+                }
+
+                while let Some(child) = fragment.first_child() {
+                    let _ = parent.insert_before(&child, next_sibling.as_ref());
+                }
+
+                #[cfg(feature = "mounted")]
+                websys.flush_queued_mounted_events();
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Initialize traversal with the root nodes
+    pub fn init_traversal(&mut self, roots: Vec<web_sys::Node>) {
+        self.traverser_stack.clear();
+        self.traverser_stack.push(DomTraverser::new(roots));
+    }
+
+    /// Get the current DOM node without advancing
+    pub fn current_dom_node(&self) -> Option<&web_sys::Node> {
+        self.traverser_stack.last()?.current()
+    }
+
+    /// Advance to the next sibling at the current level
+    pub fn advance(&mut self) {
+        if let Some(traverser) = self.traverser_stack.last_mut() {
+            traverser.next();
+        }
+    }
+
+    /// Push into children of the current node
+    pub fn push_children(&mut self) {
+        if let Some(traverser) = self.traverser_stack.last() {
+            let children = traverser.children();
+            self.traverser_stack.push(children);
+        }
+    }
+
+    /// Pop back to the parent level
+    pub fn pop_children(&mut self) {
+        if self.traverser_stack.len() > 1 {
+            self.report_extra_child_nodes();
+            self.traverser_stack.pop();
+        }
+    }
+
+    pub fn push_root_marker(&mut self) {
+        self.component_stack.push(ComponentFrame::Root);
+    }
+
+    pub fn pop_root_marker(&mut self) {
+        self.component_stack.pop();
+    }
+
+    pub fn push_component(&mut self, name: &'static str) {
+        self.component_stack.push(ComponentFrame::User(name));
+    }
+
+    pub fn pop_component(&mut self) {
+        self.component_stack.pop();
+    }
+
+    pub fn push_element_context(
+        &mut self,
+        expected_rsx: String,
+        actual_dom: Option<web_sys::Node>,
+    ) {
+        self.element_stack.push(ElementMismatchContext {
+            expected_rsx: normalize_debug_rsx(&expected_rsx),
+            actual_dom,
+        });
+    }
+
+    pub fn pop_element_context(&mut self) {
+        self.element_stack.pop();
+    }
+
+    fn report_extra_child_nodes(&mut self) {
+        let remaining = self
+            .traverser_stack
+            .last()
+            .map(DomTraverser::remaining)
+            .unwrap_or_default();
+
+        if let Some(first) = remaining.first() {
+            self.push_node_mismatch(
+                format!(
+                    "Expected no additional child nodes, found {} extra DOM node(s).",
+                    remaining.len()
+                ),
+                "<extra child nodes>".to_string(),
+                Some(first),
+            );
+        }
+    }
+
+    fn report_extra_scope_nodes(&mut self, expected_rsx: String) {
+        let remaining = self
+            .traverser_stack
+            .last()
+            .map(DomTraverser::remaining)
+            .unwrap_or_default();
+
+        if !remaining.is_empty() {
+            self.push_mismatch(
+                format!(
+                    "Expected no additional root nodes, found {} extra DOM node(s).",
+                    remaining.len()
+                ),
+                expected_rsx,
+                serialize_dom_nodes(&remaining),
+            );
+        }
+    }
+
+    /// Validate an element node matches expectations
+    pub fn validate_element(
+        &mut self,
+        dom_node: Option<&web_sys::Node>,
+        expected_tag: &'static str,
+        expected_namespace: Option<&'static str>,
+        static_attrs: &'static [TemplateAttribute],
+        dynamic_attrs: &[&[dioxus_core::Attribute]],
+        expected_rsx: &str,
+    ) {
+        let expected_desc = describe_expected_element(expected_tag, expected_namespace);
+
+        let Some(dom_node) = dom_node else {
+            self.push_element_mismatch(
+                format!("Expected {expected_desc}, found missing node."),
+                expected_rsx.to_string(),
+                None,
+            );
+            return;
+        };
+
+        if let Some(element) = dom_node.dyn_ref::<web_sys::Element>() {
+            let actual_tag = element.tag_name();
+            if !actual_tag.eq_ignore_ascii_case(expected_tag) {
+                self.push_element_mismatch(
+                    format!(
+                        "Expected {expected_desc}, found <{}>.",
+                        actual_tag.to_lowercase()
+                    ),
+                    expected_rsx.to_string(),
+                    Some(dom_node),
+                );
+            } else {
+                let actual_ns = element.namespace_uri();
+                let namespace_matches = match expected_namespace {
+                    Some(expected_ns) => actual_ns.as_deref() == Some(expected_ns),
+                    None => actual_ns
+                        .as_deref()
+                        .is_none_or(|ns| ns == "http://www.w3.org/1999/xhtml"),
+                };
+                if !namespace_matches {
+                    self.push_element_mismatch(
+                        format!(
+                            "Expected {expected_desc}, found <{}> with namespace {:?}.",
+                            actual_tag.to_lowercase(),
+                            actual_ns
+                        ),
+                        expected_rsx.to_string(),
+                        Some(dom_node),
+                    );
+                } else {
+                    let attr_mismatches =
+                        find_attribute_mismatches(element, static_attrs, dynamic_attrs);
+                    if attr_mismatches.has_mismatches() {
+                        self.push_element_mismatch(
+                            format!(
+                                "Expected {expected_desc} attributes to match, but {}.",
+                                attr_mismatches.describe()
+                            ),
+                            expected_rsx.to_string(),
+                            Some(dom_node),
+                        );
+                    }
+                }
+            }
+        } else {
+            self.push_element_mismatch(
+                format!(
+                    "Expected {expected_desc}, found node type {}.",
+                    dom_node.node_type()
+                ),
+                expected_rsx.to_string(),
+                Some(dom_node),
+            );
+        }
+    }
+
+    /// Validate a text node matches expectations
+    pub fn validate_text(
+        &mut self,
+        dom_node: Option<&web_sys::Node>,
+        expected_content: &str,
+        expected_rsx: &str,
+    ) {
+        let expected_desc = format!("text {:?}", truncate(expected_content, 50));
+
+        let Some(dom_node) = dom_node else {
+            self.push_node_mismatch(
+                format!("Expected {expected_desc}, found missing node."),
+                expected_rsx.to_string(),
+                None,
+            );
+            return;
+        };
+
+        if dom_node.node_type() != web_sys::Node::TEXT_NODE {
+            self.push_node_mismatch(
+                format!(
+                    "Expected {expected_desc}, found node type {}.",
+                    dom_node.node_type()
+                ),
+                expected_rsx.to_string(),
+                Some(dom_node),
+            );
+        } else {
+            let actual_content = dom_node.text_content().unwrap_or_default();
+
+            if expected_content != actual_content {
+                self.push_node_mismatch(
+                    format!(
+                        "Expected {expected_desc}, found text {:?}.",
+                        truncate(&actual_content, 50)
+                    ),
+                    expected_rsx.to_string(),
+                    Some(dom_node),
+                );
+            }
+        }
+    }
+
+    pub fn validate_dangerous_inner_html(
+        &mut self,
+        dom_node: Option<&web_sys::Node>,
+        expected_inner_html_rsx: &str,
+        expected_rsx: &str,
+    ) {
+        let Some(dom_node) = dom_node else {
+            return;
+        };
+
+        let Some(element) = dom_node.dyn_ref::<web_sys::Element>() else {
+            return;
+        };
+
+        let actual_inner_html_rsx = serialize_dom_nodes(&child_nodes(element));
+        if normalize_debug_rsx(expected_inner_html_rsx)
+            != normalize_debug_rsx(&actual_inner_html_rsx)
+        {
+            self.push_element_mismatch(
+                "Expected dangerous_inner_html content to match, but the rendered children differ."
+                    .to_string(),
+                expected_rsx.to_string(),
+                Some(dom_node),
+            );
+        }
+    }
+
+    /// Validate a placeholder (comment) node
+    pub fn validate_placeholder(&mut self, dom_node: Option<&web_sys::Node>, expected_rsx: &str) {
+        let Some(dom_node) = dom_node else {
+            self.push_node_mismatch(
+                "Expected placeholder (comment node), found missing node.".to_string(),
+                expected_rsx.to_string(),
+                None,
+            );
+            return;
+        };
+
+        if dom_node.node_type() != web_sys::Node::COMMENT_NODE {
+            self.push_node_mismatch(
+                format!(
+                    "Expected placeholder (comment node), found node type {}.",
+                    dom_node.node_type()
+                ),
+                expected_rsx.to_string(),
+                Some(dom_node),
+            );
+        }
+    }
+
+    /// Check if any mismatches were found
+    pub fn has_mismatches(&self) -> bool {
+        !self.mismatches.is_empty()
+    }
+
+    /// Report all collected mismatches via tracing::warn!
+    pub fn report_mismatches(&self, suspense_path: Option<&[u32]>) {
+        for mismatch in &self.mismatches {
+            let suspense_info = suspense_path
+                .map(|p| format!("\n  Suspense Path: {:?}", p))
+                .unwrap_or_default();
+            let diff = unified_rsx_diff(&mismatch.expected_rsx, &mismatch.actual_rsx)
+                .lines()
+                .map(|line| format!("    {line}"))
+                .collect::<Vec<_>>()
+                .join("\n");
+
+            tracing::warn!(
+                "[HYDRATION MISMATCH] Component: {}\n  Reason: {}\n  RSX Diff:\n{}{}\n  The subtree will be cleared and rebuilt.",
+                mismatch.component_path,
+                mismatch.reason,
+                diff,
+                suspense_info,
+            );
+        }
+    }
+
+    /// Take the collected mismatches
+    pub fn take_mismatches(&mut self, suspense_path: Option<&[u32]>) -> Vec<HydrationMismatch> {
+        let mut mismatches = std::mem::take(&mut self.mismatches);
+        let suspense_path = suspense_path.map(<[u32]>::to_vec);
+        for mismatch in &mut mismatches {
+            mismatch.suspense_path = suspense_path.clone();
+        }
+        mismatches
+    }
+
+    fn component_path(&self) -> String {
+        let start = self
+            .component_stack
+            .iter()
+            .rposition(|frame| matches!(frame, ComponentFrame::Root))
+            .map_or(0, |pos| pos + 1);
+        let user_components = self.component_stack[start..]
+            .iter()
+            .filter_map(|frame| match frame {
+                ComponentFrame::Root => None,
+                ComponentFrame::User(name) => Some(*name),
+            })
+            .collect::<Vec<_>>();
+
+        if user_components.is_empty() {
+            "<root>".to_string()
+        } else {
+            user_components.join(" > ")
+        }
+    }
+
+    fn push_element_mismatch(
+        &mut self,
+        reason: String,
+        expected_rsx: String,
+        actual_dom: Option<&web_sys::Node>,
+    ) {
+        let actual_rsx = actual_dom
+            .map(serialize_dom_subtree)
+            .unwrap_or_else(|| format_rsx_nodes(vec![missing_node()]));
+        self.push_mismatch(reason, expected_rsx, actual_rsx);
+    }
+
+    fn push_node_mismatch(
+        &mut self,
+        reason: String,
+        expected_node_rsx: String,
+        actual_node: Option<&web_sys::Node>,
+    ) {
+        if let Some(context) = self.element_stack.last() {
+            let actual_rsx = context
+                .actual_dom
+                .as_ref()
+                .map(serialize_dom_subtree)
+                .unwrap_or_else(|| format_rsx_nodes(vec![missing_node()]));
+            self.push_mismatch(reason, context.expected_rsx.clone(), actual_rsx);
+        } else {
+            let actual_rsx = actual_node
+                .map(serialize_dom_subtree)
+                .unwrap_or_else(|| format_rsx_nodes(vec![missing_node()]));
+            self.push_mismatch(reason, expected_node_rsx, actual_rsx);
+        }
+    }
+
+    fn push_mismatch(&mut self, reason: String, expected_rsx: String, actual_rsx: String) {
+        self.mismatches.push(HydrationMismatch {
+            reason,
+            expected_rsx: normalize_debug_rsx(&expected_rsx),
+            actual_rsx: normalize_debug_rsx(&actual_rsx),
+            component_path: self.component_path(),
+            suspense_path: None,
+        });
+    }
+}
+
+/// The DOM siblings the validation session should walk in parallel with the
+/// scope's vnode roots. `under` is the document root for the base scope and
+/// the sibling list for every other scope.
+fn validation_roots(
+    scope_id: ScopeId,
+    dom: &VirtualDom,
+    under: &[web_sys::Node],
+) -> Vec<web_sys::Node> {
+    if scope_id == dom.base_scope().id() {
+        under.first().map(child_nodes).unwrap_or_default()
+    } else {
+        under.to_vec()
+    }
+}
+
+fn truncate(s: &str, max_len: usize) -> String {
+    match s.char_indices().nth(max_len) {
+        None => s.to_string(),
+        Some((byte_idx, _)) => format!("{}...", &s[..byte_idx]),
+    }
+}
+
+fn describe_expected_element(tag: &str, namespace: Option<&str>) -> String {
+    match namespace {
+        Some(ns) => format!("<{}> (namespace: {})", tag, ns),
+        None => format!("<{}>", tag),
+    }
+}
diff --git a/packages/web/src/hydration/validation/serialize/dom.rs b/packages/web/src/hydration/validation/serialize/dom.rs
new file mode 100644
index 0000000000..af386748ff
--- /dev/null
+++ b/packages/web/src/hydration/validation/serialize/dom.rs
@@ -0,0 +1,117 @@
+use dioxus_rsx::{Attribute as RsxAttribute, BodyNode, TextNode};
+use wasm_bindgen::JsCast;
+
+use super::{
+    element_node, format_rsx_nodes, is_internal_attribute_name, missing_node, placeholder_node,
+    text_attribute,
+};
+use crate::hydration::hydrate::child_nodes;
+
+pub(crate) fn serialize_dom_subtree(node: &web_sys::Node) -> String {
+    format_rsx_nodes(serialize_dom_node_items(node))
+}
+
+pub(crate) fn serialize_dom_nodes(nodes: &[web_sys::Node]) -> String {
+    format_rsx_nodes(
+        nodes
+            .iter()
+            .flat_map(serialize_dom_node_items)
+            .collect::<Vec<_>>(),
+    )
+}
+
+fn serialize_dom_node_items(node: &web_sys::Node) -> Vec<BodyNode> {
+    if should_skip_validation_node(node) {
+        return Vec::new();
+    }
+
+    match node.node_type() {
+        web_sys::Node::ELEMENT_NODE => {
+            let Some(element) = node.dyn_ref::<web_sys::Element>() else {
+                return vec![missing_node()];
+            };
+
+            let attrs = serialize_dom_attributes(element);
+            let mut children = Vec::new();
+            for child in child_nodes(node) {
+                children.extend(serialize_dom_node_items(&child));
+            }
+
+            vec![element_node(
+                &element.tag_name().to_lowercase(),
+                attrs,
+                children,
+            )]
+        }
+        web_sys::Node::TEXT_NODE => {
+            vec![BodyNode::Text(TextNode::from_text(
+                &node.text_content().unwrap_or_default(),
+            ))]
+        }
+        web_sys::Node::COMMENT_NODE => {
+            let comment = node.text_content().unwrap_or_default();
+            if is_placeholder_comment(&comment) {
+                vec![placeholder_node()]
+            } else {
+                Vec::new()
+            }
+        }
+        _ => vec![BodyNode::Text(TextNode::from_text(&format!(
+            "<node type {}>",
+            node.node_type()
+        )))],
+    }
+}
+
+fn serialize_dom_attributes(element: &web_sys::Element) -> Vec<RsxAttribute> {
+    let mut rendered = Vec::new();
+    let names = element.get_attribute_names();
+
+    for idx in 0..names.length() {
+        let Some(name) = names.get(idx).as_string() else {
+            continue;
+        };
+        if is_internal_attribute_name(&name) {
+            continue;
+        }
+        let value = element.get_attribute(&name).unwrap_or_default();
+        rendered.push(text_attribute(&name, &value));
+    }
+
+    rendered
+}
+
+pub(crate) fn should_skip_validation_node(node: &web_sys::Node) -> bool {
+    if node.node_type() == web_sys::Node::COMMENT_NODE {
+        // Skip every comment except a real placeholder comment — diffing
+        // shouldn't be sensitive to internal markers (`node-id*`, `#`, etc).
+        return !is_placeholder_comment(&node.text_content().unwrap_or_default());
+    }
+
+    let Some(element) = node.dyn_ref::<web_sys::Element>() else {
+        return false;
+    };
+
+    if !element.tag_name().eq_ignore_ascii_case("script") {
+        return false;
+    }
+
+    let script = node.text_content().unwrap_or_default();
+    let script = script.trim();
+
+    script.starts_with("window.hydrate_queue=")
+        || script.starts_with("window.dx_hydrate(")
+        || script.starts_with("window.initial_dioxus_hydration_data=")
+        || script.starts_with("window.initial_dioxus_hydration_debug_types=")
+        || script.starts_with("window.initial_dioxus_hydration_debug_locations=")
+}
+
+/// SSR emits placeholder comments as `placeholder<digits>` (see
+/// `ssr::renderer`); match that exactly so a stray user comment starting with
+/// "placeholder" isn't mistaken for one.
+fn is_placeholder_comment(comment: &str) -> bool {
+    let Some(rest) = comment.trim().strip_prefix("placeholder") else {
+        return false;
+    };
+    !rest.is_empty() && rest.bytes().all(|b| b.is_ascii_digit())
+}
diff --git a/packages/web/src/hydration/validation/serialize/mod.rs b/packages/web/src/hydration/validation/serialize/mod.rs
new file mode 100644
index 0000000000..b84902a137
--- /dev/null
+++ b/packages/web/src/hydration/validation/serialize/mod.rs
@@ -0,0 +1,220 @@
+pub(super) mod dom;
+pub(crate) mod vdom;
+
+use std::fmt::Write;
+
+use dioxus_autofmt::write_block_out;
+use dioxus_core::{Attribute, AttributeValue, TemplateAttribute};
+use dioxus_rsx::{
+    Attribute as RsxAttribute, AttributeName as RsxAttributeName,
+    AttributeValue as RsxAttributeValue, BodyNode, CallBody, Component as RsxComponent,
+    Diagnostics, Element as RsxElement, ElementName as RsxElementName, ExprNode, HotLiteral,
+    PartialExpr, TemplateBody, TextNode,
+};
+use syn::parse_quote;
+
+pub(crate) use self::vdom::serialize_vnode_subtree;
+
+pub(super) const STYLE_NAMESPACE: &str = "style";
+pub(super) const DANGEROUS_INNER_HTML_ATTRIBUTE: &str = "dangerous_inner_html";
+
+pub(super) fn append_style_declaration(into: &mut String, name: &str, value: &str) {
+    let _ = write!(into, "{name}:{value};");
+}
+
+pub(super) fn append_dynamic_style_declaration(
+    into: &mut String,
+    name: &str,
+    value: &AttributeValue,
+) {
+    let _ = write!(into, "{name}:");
+    match value {
+        AttributeValue::Text(value) => into.push_str(value),
+        AttributeValue::Float(value) => {
+            let _ = write!(into, "{value}");
+        }
+        AttributeValue::Int(value) => {
+            let _ = write!(into, "{value}");
+        }
+        AttributeValue::Bool(value) => {
+            let _ = write!(into, "{value}");
+        }
+        AttributeValue::Any(_) | AttributeValue::Listener(_) | AttributeValue::None => {}
+    }
+    into.push(';');
+}
+
+/// A non-style attribute yielded by [`walk_template_attrs`].
+pub(super) enum TemplateAttrRef<'a> {
+    Static {
+        name: &'static str,
+        value: &'static str,
+        namespace: Option<&'static str>,
+    },
+    Dynamic(&'a Attribute),
+}
+
+/// Walk a template's static attrs plus resolved dynamic attribute groups,
+/// folding any `style`-namespaced entries into a single declaration string and
+/// invoking the visitor for everything else. Returns the combined style value
+/// if any style fragments were collected.
+///
+/// Both the hydration-validation attribute comparator and the RSX serializer
+/// need the exact same traversal + style-folding; this is the shared seam.
+pub(super) fn walk_template_attrs<'a>(
+    static_attrs: &'static [TemplateAttribute],
+    dynamic_groups: impl IntoIterator<Item = &'a [Attribute]>,
+    mut visit: impl FnMut(TemplateAttrRef<'a>),
+) -> Option<String> {
+    let mut static_styles = String::new();
+    let mut dynamic_styles = String::new();
+
+    for attr in static_attrs {
+        let TemplateAttribute::Static {
+            name,
+            value,
+            namespace,
+        } = attr
+        else {
+            continue;
+        };
+        if *namespace == Some(STYLE_NAMESPACE) {
+            append_style_declaration(&mut static_styles, name, value);
+        } else {
+            visit(TemplateAttrRef::Static {
+                name,
+                value,
+                namespace: *namespace,
+            });
+        }
+    }
+
+    for group in dynamic_groups {
+        for attr in group {
+            if attr.namespace == Some(STYLE_NAMESPACE) {
+                append_dynamic_style_declaration(&mut dynamic_styles, attr.name, &attr.value);
+            } else {
+                visit(TemplateAttrRef::Dynamic(attr));
+            }
+        }
+    }
+
+    if static_styles.is_empty() && dynamic_styles.is_empty() {
+        None
+    } else {
+        Some(format!("{static_styles}{dynamic_styles}"))
+    }
+}
+
+pub(super) fn missing_node() -> BodyNode {
+    component_node("missing_node")
+}
+
+fn component_node(name: &str) -> BodyNode {
+    match syn::parse_str::<syn::Path>(name) {
+        Ok(path) => BodyNode::Component(RsxComponent {
+            name: path,
+            generics: None,
+            fields: Vec::new(),
+            component_literal_dyn_idx: Vec::new(),
+            spreads: Vec::new(),
+            brace: Some(Default::default()),
+            children: TemplateBody::new(Vec::new()),
+            dyn_idx: Default::default(),
+            diagnostics: Diagnostics::new(),
+        }),
+        Err(_) => BodyNode::Text(TextNode::from_text(&format!("<component {name}>"))),
+    }
+}
+
+pub(super) fn placeholder_node() -> BodyNode {
+    BodyNode::RawExpr(ExprNode {
+        expr: PartialExpr::from_expr(&parse_quote!(VNode::placeholder())),
+        dyn_idx: Default::default(),
+    })
+}
+
+fn element_node(tag: &str, mut attributes: Vec<RsxAttribute>, children: Vec<BodyNode>) -> BodyNode {
+    attributes.sort_by_key(|attr| attr.name.to_string());
+    BodyNode::Element(RsxElement {
+        name: syn::parse_str(tag).unwrap_or_else(|_| RsxElementName::Custom(parse_quote!(#tag))),
+        raw_attributes: attributes.clone(),
+        merged_attributes: attributes,
+        spreads: Vec::new(),
+        children,
+        brace: Some(Default::default()),
+        diagnostics: Diagnostics::new(),
+    })
+}
+
+fn text_attribute(name: &str, value: &str) -> RsxAttribute {
+    RsxAttribute::from_raw(
+        rsx_attribute_name(name),
+        RsxAttributeValue::AttrLiteral(HotLiteral::from_raw_text(value)),
+    )
+}
+
+fn expr_attribute(name: &str, value: syn::Expr) -> RsxAttribute {
+    RsxAttribute::from_raw(
+        rsx_attribute_name(name),
+        RsxAttributeValue::AttrExpr(PartialExpr::from_expr(&value)),
+    )
+}
+
+pub(super) fn format_rsx_nodes(nodes: Vec<BodyNode>) -> String {
+    let nodes = if nodes.is_empty() {
+        vec![missing_node()]
+    } else {
+        nodes
+    };
+
+    let body = CallBody::new(TemplateBody::new(nodes));
+    write_block_out(&body)
+        .map(normalize_formatted_rsx)
+        .unwrap_or_else(|| format!("{body:?}"))
+}
+
+pub(super) fn normalize_formatted_rsx(formatted: String) -> String {
+    if formatted.trim().is_empty() {
+        return String::new();
+    }
+
+    let shared_indent = formatted
+        .lines()
+        .filter(|line| !line.trim().is_empty())
+        .map(|line| {
+            line.chars()
+                .take_while(|ch| ch.is_whitespace())
+                .collect::<String>()
+        })
+        .reduce(|left, right| {
+            left.chars()
+                .zip(right.chars())
+                .take_while(|(left, right)| left == right)
+                .map(|(ch, _)| ch)
+                .collect()
+        })
+        .unwrap_or_default();
+
+    let dedented = if shared_indent.is_empty() {
+        formatted
+    } else {
+        formatted
+            .lines()
+            .map(|line| line.strip_prefix(&shared_indent).unwrap_or(line))
+            .collect::<Vec<_>>()
+            .join("\n")
+    };
+
+    dedented.trim().to_string()
+}
+
+fn rsx_attribute_name(name: &str) -> RsxAttributeName {
+    syn::parse_str(name)
+        .map(RsxAttributeName::BuiltIn)
+        .unwrap_or_else(|_| RsxAttributeName::Custom(parse_quote!(#name)))
+}
+
+pub(super) fn is_internal_attribute_name(name: &str) -> bool {
+    name.starts_with("on") || name.starts_with("data-node") || name.starts_with("data-dioxus")
+}
diff --git a/packages/web/src/hydration/validation/serialize/vdom.rs b/packages/web/src/hydration/validation/serialize/vdom.rs
new file mode 100644
index 0000000000..62bb39741c
--- /dev/null
+++ b/packages/web/src/hydration/validation/serialize/vdom.rs
@@ -0,0 +1,230 @@
+use dioxus_core::{
+    Attribute, AttributeValue, DynamicNode, TemplateAttribute, TemplateNode, VNode, VirtualDom,
+};
+use dioxus_rsx::{Attribute as RsxAttribute, BodyNode, TextNode};
+use dioxus_rsx_rosetta::{rsx_from_html, Dom};
+use syn::parse_quote;
+
+use super::{
+    component_node, element_node, expr_attribute, format_rsx_nodes, is_internal_attribute_name,
+    placeholder_node, text_attribute, walk_template_attrs, TemplateAttrRef,
+    DANGEROUS_INNER_HTML_ATTRIBUTE, STYLE_NAMESPACE,
+};
+
+pub(crate) fn serialize_template_subtree(
+    dom: &VirtualDom,
+    vnode: &VNode,
+    node: &TemplateNode,
+) -> String {
+    format_rsx_nodes(serialize_template_node_items(dom, vnode, node))
+}
+
+pub(crate) fn serialize_vnode_subtree(dom: &VirtualDom, vnode: &VNode) -> String {
+    format_rsx_nodes(serialize_vnode_items(dom, vnode))
+}
+
+fn serialize_template_node_items(
+    dom: &VirtualDom,
+    vnode: &VNode,
+    node: &TemplateNode,
+) -> Vec<BodyNode> {
+    match node {
+        TemplateNode::Element {
+            tag,
+            attrs,
+            children,
+            ..
+        } => {
+            let attributes = serialize_template_attributes(attrs, vnode);
+            let mut child_items = dangerous_inner_html_nodes(attrs, vnode);
+            for child in *children {
+                child_items.extend(serialize_template_node_items(dom, vnode, child));
+            }
+            vec![element_node(tag, attributes, child_items)]
+        }
+        TemplateNode::Text { text } => vec![BodyNode::Text(TextNode::from_text(text))],
+        TemplateNode::Dynamic { id } => serialize_dynamic_node_items(dom, vnode, *id),
+    }
+}
+
+fn serialize_dynamic_node_items(
+    dom: &VirtualDom,
+    vnode: &VNode,
+    dynamic_id: usize,
+) -> Vec<BodyNode> {
+    match &vnode.dynamic_nodes[dynamic_id] {
+        DynamicNode::Text(text) => vec![BodyNode::Text(TextNode::from_text(&text.value))],
+        DynamicNode::Placeholder(_) => vec![placeholder_node()],
+        DynamicNode::Fragment(fragment) => fragment
+            .iter()
+            .flat_map(|fragment_vnode| serialize_vnode_items(dom, fragment_vnode))
+            .collect(),
+        DynamicNode::Component(comp) => comp
+            .mounted_scope(dynamic_id, vnode, dom)
+            .map(|scope| serialize_vnode_items(dom, scope.root_node()))
+            .unwrap_or_else(|| vec![component_node(comp.name)]),
+    }
+}
+
+fn serialize_vnode_items(dom: &VirtualDom, vnode: &VNode) -> Vec<BodyNode> {
+    vnode
+        .template
+        .roots
+        .iter()
+        .flat_map(|root| serialize_template_node_items(dom, vnode, root))
+        .collect()
+}
+
+fn serialize_template_attributes(
+    attrs: &'static [TemplateAttribute],
+    vnode: &VNode,
+) -> Vec<RsxAttribute> {
+    let mut rendered = Vec::new();
+
+    let dynamic_groups = attrs.iter().filter_map(|attr| match attr {
+        TemplateAttribute::Dynamic { id } => Some(&*vnode.dynamic_attrs[*id]),
+        _ => None,
+    });
+
+    let style = walk_template_attrs(attrs, dynamic_groups, |item| match item {
+        TemplateAttrRef::Static {
+            name,
+            value,
+            namespace,
+        } => {
+            if let Some(attr) = render_static_template_attribute(name, value, namespace) {
+                rendered.push(attr);
+            }
+        }
+        TemplateAttrRef::Dynamic(attr) => {
+            if let Some(attr) = render_dynamic_template_attribute(attr) {
+                rendered.push(attr);
+            }
+        }
+    });
+
+    if let Some(style) = style {
+        rendered.push(text_attribute(STYLE_NAMESPACE, &style));
+    }
+
+    rendered
+}
+
+pub(crate) fn serialize_dangerous_inner_html(
+    attrs: &'static [TemplateAttribute],
+    vnode: &VNode,
+) -> Option<String> {
+    dangerous_inner_html_value(attrs, vnode)
+        .map(parse_inner_html_nodes)
+        .map(format_rsx_nodes)
+}
+
+fn render_static_template_attribute(
+    name: &str,
+    value: &str,
+    namespace: Option<&str>,
+) -> Option<RsxAttribute> {
+    if is_internal_attribute_name(name)
+        || name == DANGEROUS_INNER_HTML_ATTRIBUTE
+        || matches!(namespace, Some(ns) if ns == STYLE_NAMESPACE)
+    {
+        return None;
+    }
+
+    Some(text_attribute(name, value))
+}
+
+fn render_dynamic_template_attribute(attr: &Attribute) -> Option<RsxAttribute> {
+    if is_internal_attribute_name(attr.name)
+        || attr.name == DANGEROUS_INNER_HTML_ATTRIBUTE
+        || matches!(
+            attr.value,
+            AttributeValue::Listener(_) | AttributeValue::None
+        )
+    {
+        return None;
+    }
+
+    let rendered_value = match &attr.value {
+        AttributeValue::Text(value) => text_attribute(attr.name, value),
+        AttributeValue::Float(value) if value.is_finite() => {
+            let value = *value;
+            expr_attribute(attr.name, parse_quote!(#value))
+        }
+        AttributeValue::Float(_) => text_attribute(attr.name, "<non-finite-float>"),
+        AttributeValue::Int(value) => {
+            let value = *value;
+            expr_attribute(attr.name, parse_quote!(#value))
+        }
+        AttributeValue::Bool(value) => {
+            let value = *value;
+            expr_attribute(attr.name, parse_quote!(#value))
+        }
+        AttributeValue::Any(_) => text_attribute(attr.name, "<any>"),
+        AttributeValue::Listener(_) | AttributeValue::None => return None,
+    };
+
+    Some(rendered_value)
+}
+
+fn dangerous_inner_html_nodes(attrs: &'static [TemplateAttribute], vnode: &VNode) -> Vec<BodyNode> {
+    dangerous_inner_html_value(attrs, vnode)
+        .map(parse_inner_html_nodes)
+        .unwrap_or_default()
+}
+
+fn dangerous_inner_html_value<'a>(
+    attrs: &'static [TemplateAttribute],
+    vnode: &'a VNode,
+) -> Option<String> {
+    let mut static_inner_html = None;
+    let mut dynamic_inner_html = None;
+
+    for attr in attrs {
+        match attr {
+            TemplateAttribute::Static {
+                name,
+                value,
+                namespace: None,
+            } if *name == DANGEROUS_INNER_HTML_ATTRIBUTE => {
+                static_inner_html = Some((*value).to_string());
+            }
+            TemplateAttribute::Dynamic { id } => {
+                for attr in vnode.dynamic_attrs[*id].iter() {
+                    if attr.name == DANGEROUS_INNER_HTML_ATTRIBUTE {
+                        dynamic_inner_html =
+                            Some(dangerous_inner_html_value_to_string(&attr.value));
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+
+    static_inner_html.or(dynamic_inner_html)
+}
+
+fn dangerous_inner_html_value_to_string(value: &AttributeValue) -> String {
+    match value {
+        AttributeValue::Text(value) => value.clone(),
+        AttributeValue::Float(value) => value.to_string(),
+        AttributeValue::Int(value) => value.to_string(),
+        AttributeValue::Bool(value) => value.to_string(),
+        AttributeValue::Any(_) | AttributeValue::Listener(_) | AttributeValue::None => {
+            String::new()
+        }
+    }
+}
+
+fn parse_inner_html_nodes(inner_html: String) -> Vec<BodyNode> {
+    if inner_html.is_empty() {
+        return Vec::new();
+    }
+
+    Dom::parse(&inner_html)
+        .ok()
+        .map(|dom| rsx_from_html(&dom))
+        .map(|body| body.body.roots)
+        .unwrap_or_else(|| vec![BodyNode::Text(TextNode::from_text(&inner_html))])
+}
+
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index af275c0f22..56ca3257f1 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -147,7 +147,7 @@ pub async fn run(mut virtual_dom: VirtualDom, web_config: Config) -> ! {
             });
             websys_dom.skip_mutations = false;
 
-            let rx = websys_dom.rehydrate(&virtual_dom).unwrap();
+            let rx = websys_dom.rehydrate(&mut virtual_dom).unwrap();
             hydration_receiver = Some(rx);
 
             #[cfg(feature = "mounted")]