From 2e9938df9d7734435316aaff361779542a07a79f Mon Sep 17 00:00:00 2001
From: mcmah309 <dillonmcmahon79@gmail.com>
Date: Tue, 12 Aug 2025 11:52:00 +0000
Subject: [PATCH] Add section on externally managed nodes

---
 .../src/essentials/advanced/breaking_out.md   | 15 ++++++++++
 .../src/doc_examples/breaking_out.rs          | 28 +++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/docs-src/0.7/src/essentials/advanced/breaking_out.md b/docs-src/0.7/src/essentials/advanced/breaking_out.md
index 2de0eec7d..24561c07a 100644
--- a/docs-src/0.7/src/essentials/advanced/breaking_out.md
+++ b/docs-src/0.7/src/essentials/advanced/breaking_out.md
@@ -73,3 +73,18 @@ DemoFrame {
     breaking_out::Downcast {}
 }
 ```
+
+## Externally Managed Nodes
+
+Dioxus uses diffs between templates to determine which elements have changed in the DOM and applies those changes to the existing DOM. A great post about this can be found [here](https://dioxuslabs.com/blog/templates-diffing/). In short, what these means for managing elements outside of Dioxus with Javascript is, one must be careful that the diffing process does not overwite the changes or if so, this is accounted for.
+
+An `rsx` block creates a tree of static and dynamic elements. If the structure of this tree changes then everything underneath it is replaced as well.
+
+```rust, no_run
+{{#include ../docs-router/src/doc_examples/breaking_out.rs:template_diffing}}
+```
+```inject-dioxus
+DemoFrame {
+    breaking_out::TemplateDiffing {}
+}
+```
\ No newline at end of file
diff --git a/packages/docs-router/src/doc_examples/breaking_out.rs b/packages/docs-router/src/doc_examples/breaking_out.rs
index d97f2a833..c7061288f 100644
--- a/packages/docs-router/src/doc_examples/breaking_out.rs
+++ b/packages/docs-router/src/doc_examples/breaking_out.rs
@@ -4,6 +4,7 @@ pub use eval::Eval;
 pub use onmounted_::OnMounted;
 pub use use_effect::Canvas;
 pub use web_sys::WebSys;
+pub use template_diffing::TemplateDiffing;
 
 mod eval {
     use super::*;
@@ -143,3 +144,30 @@ mod onmounted_ {
     }
     // ANCHOR_END: onmounted
 }
+
+mod template_diffing {
+    use super::*;
+
+    // ANCHOR: template_diffing
+    pub fn TemplateDiffing() -> Element {
+        let mut signal = use_signal(|| false);
+
+        rsx! {
+            div { style: if *signal.read() { "background-color:lightcoral;" } else { "background-color:lightsteelblue;" },
+                "Only the style property of the parent div is relaced"
+            }
+            if *signal.read() {
+                div { style: "background-color:lightcoral;", "The entire parent div is replaced" }
+            } else {
+                div { style: "background-color:lightsteelblue;", "The entire parent div is replaced" }
+            }
+            button {
+                onclick: move |_| {
+                    signal.set(!signal());
+                },
+                "Click me and watch changes in the DOM with your browsers dev tools"
+            }
+        }
+    }
+    // ANCHOR_END: template_diffing
+}