diff --git a/crates/bevy_ui/src/layout/convert.rs b/crates/bevy_ui/src/layout/convert.rs
index d3fe37679849d..57e2e3b2dab88 100644
--- a/crates/bevy_ui/src/layout/convert.rs
+++ b/crates/bevy_ui/src/layout/convert.rs
@@ -63,7 +63,7 @@ impl UiRect {
     }
 }
 
-pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style {
+pub fn from_style(style: &Style, context: &LayoutContext) -> taffy::style::Style {
     taffy::style::Style {
         display: style.display.into(),
         position: style.position_type.into(),
@@ -466,8 +466,8 @@ mod tests {
             grid_column: GridPlacement::start(4),
             grid_row: GridPlacement::span(3),
         };
-        let viewport_values = LayoutContext::new(1.0, bevy_math::Vec2::new(800., 600.));
-        let taffy_style = from_style(&viewport_values, &bevy_style);
+        let context = LayoutContext::new(bevy_math::Vec2::new(800., 600.), 1.0);
+        let taffy_style = from_style(&bevy_style, &context);
         assert_eq!(taffy_style.display, taffy::style::Display::Flex);
         assert_eq!(taffy_style.position, taffy::style::Position::Absolute);
         assert!(matches!(
@@ -633,7 +633,7 @@ mod tests {
     #[test]
     fn test_into_length_percentage() {
         use taffy::style::LengthPercentage;
-        let context = LayoutContext::new(2.0, bevy_math::Vec2::new(800., 600.));
+        let context = LayoutContext::new(bevy_math::Vec2::new(800., 600.), 2.);
         let cases = [
             (Val::Auto, LengthPercentage::Points(0.)),
             (Val::Percent(1.), LengthPercentage::Percent(0.01)),
diff --git a/crates/bevy_ui/src/layout/mod.rs b/crates/bevy_ui/src/layout/mod.rs
index cbe2c14f4fc81..a2a368c9b813c 100644
--- a/crates/bevy_ui/src/layout/mod.rs
+++ b/crates/bevy_ui/src/layout/mod.rs
@@ -6,19 +6,48 @@ use bevy_ecs::{
     change_detection::DetectChanges,
     entity::Entity,
     event::EventReader,
+    prelude::Component,
     query::{With, Without},
+    reflect::ReflectComponent,
     removal_detection::RemovedComponents,
-    system::{Query, Res, ResMut, Resource},
+    system::{ParamSet, Query, Res, ResMut, Resource},
     world::Ref,
 };
 use bevy_hierarchy::{Children, Parent};
 use bevy_log::warn;
 use bevy_math::Vec2;
+use bevy_reflect::{std_traits::ReflectDefault, Reflect};
 use bevy_transform::components::Transform;
 use bevy_utils::HashMap;
 use bevy_window::{PrimaryWindow, Window, WindowResolution, WindowScaleFactorChanged};
 use std::fmt;
-use taffy::{prelude::Size, style_helpers::TaffyMaxContent, Taffy};
+use taffy::{node::MeasureFunc, prelude::Size, style_helpers::TaffyMaxContent, Taffy};
+
+type TaffyKey = taffy::node::Node;
+
+/// Identifier for the UI node's associated entry in the UI's layout tree.
+///
+/// Users can only instantiate null nodes using `UiKey::default()`, the keys are set and managed internally by [`super::layout::ui_layout_system`].
+/// All UI nodes must have this component.
+#[derive(Component, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct UiKey {
+    // The id of the taffy node associated with the entity possessing this component.
+    #[reflect(ignore)]
+    taffy_key: TaffyKey,
+}
+
+impl UiKey {
+    // Returns the id of the taffy node associated with the entity that has this component.
+    pub fn get(&self) -> TaffyKey {
+        self.taffy_key
+    }
+
+    // A null `UiKey` signifies that a UI node entity does not have an associated Taffy node in the UI layout tree.
+    pub fn is_null(&self) -> bool {
+        self.taffy_key == Default::default()
+    }
+}
 
 pub struct LayoutContext {
     pub scale_factor: f64,
@@ -29,7 +58,7 @@ pub struct LayoutContext {
 
 impl LayoutContext {
     /// create new a [`LayoutContext`] from the window's physical size and scale factor
-    fn new(scale_factor: f64, physical_size: Vec2) -> Self {
+    fn new(physical_size: Vec2, scale_factor: f64) -> Self {
         Self {
             scale_factor,
             physical_size,
@@ -41,14 +70,14 @@ impl LayoutContext {
 
 #[derive(Resource)]
 pub struct UiSurface {
-    entity_to_taffy: HashMap<Entity, taffy::node::Node>,
-    window_nodes: HashMap<Entity, taffy::node::Node>,
+    entity_to_taffy: HashMap<Entity, TaffyKey>,
+    window_nodes: HashMap<Entity, TaffyKey>,
     taffy: Taffy,
 }
 
 fn _assert_send_sync_ui_surface_impl_safe() {
     fn _assert_send_sync<T: Send + Sync>() {}
-    _assert_send_sync::<HashMap<Entity, taffy::node::Node>>();
+    _assert_send_sync::<HashMap<Entity, TaffyKey>>();
     _assert_send_sync::<Taffy>();
     _assert_send_sync::<UiSurface>();
 }
@@ -75,35 +104,41 @@ impl Default for UiSurface {
 }
 
 impl UiSurface {
-    /// Retrieves the Taffy node associated with the given UI node entity and updates its style.
-    /// If no associated Taffy node exists a new Taffy node is inserted into the Taffy layout.
-    pub fn upsert_node(&mut self, entity: Entity, style: &Style, context: &LayoutContext) {
-        let mut added = false;
-        let taffy = &mut self.taffy;
-        let taffy_node = self.entity_to_taffy.entry(entity).or_insert_with(|| {
-            added = true;
-            taffy.new_leaf(convert::from_style(context, style)).unwrap()
-        });
+    /// Returns a key identifying the internal layout tree node associated with the given `Entity`
+    /// or `None` if no such association exists.
+    #[inline]
+    pub fn get_key(&self, entity: Entity) -> Option<TaffyKey> {
+        self.entity_to_taffy.get(&entity).copied()
+    }
 
-        if !added {
-            self.taffy
-                .set_style(*taffy_node, convert::from_style(context, style))
-                .unwrap();
-        }
+    /// Inserts a node into the Taffy layout, associates it with the given entity, and returns its taffy id.
+    pub fn insert_node(&mut self, uinode: Entity) -> TaffyKey {
+        // It's possible for a user to overwrite an active `UiKey` component with `UiKey::default()`.
+        // In which case we reuse the existing taffy node.
+        *self
+            .entity_to_taffy
+            .entry(uinode)
+            .or_insert_with(|| self.taffy.new_leaf(taffy::style::Style::default()).unwrap())
+    }
+
+    /// Converts the given Bevy UI `Style` to a taffy style and applies it to the taffy node with identifier `key`.
+    pub fn set_style(&mut self, key: TaffyKey, style: &Style, layout_context: &LayoutContext) {
+        self.taffy
+            .set_style(key, convert::from_style(style, layout_context))
+            .unwrap();
     }
 
-    /// Update the `MeasureFunc` of the taffy node corresponding to the given [`Entity`].
-    pub fn update_measure(&mut self, entity: Entity, measure_func: taffy::node::MeasureFunc) {
-        let taffy_node = self.entity_to_taffy.get(&entity).unwrap();
-        self.taffy.set_measure(*taffy_node, Some(measure_func)).ok();
+    /// Sets the `MeasureFunc` for the taffy node `key` to `measure`.
+    pub fn set_measure(&mut self, key: TaffyKey, measure: MeasureFunc) {
+        self.taffy.set_measure(key, Some(measure)).unwrap();
     }
 
-    /// Update the children of the taffy node corresponding to the given [`Entity`].
-    pub fn update_children(&mut self, entity: Entity, children: &Children) {
+    /// Update the children of the taffy node `parent_key` .
+    pub fn update_children(&mut self, parent_key: TaffyKey, children: &Children) {
         let mut taffy_children = Vec::with_capacity(children.len());
-        for child in children {
-            if let Some(taffy_node) = self.entity_to_taffy.get(child) {
-                taffy_children.push(*taffy_node);
+        for &child in children {
+            if let Some(child_key) = self.get_key(child) {
+                taffy_children.push(child_key);
             } else {
                 warn!(
                     "Unstyled child in a UI entity hierarchy. You are using an entity \
@@ -112,37 +147,36 @@ without UI components as a child of an entity with UI components, results may be
             }
         }
 
-        let taffy_node = self.entity_to_taffy.get(&entity).unwrap();
         self.taffy
-            .set_children(*taffy_node, &taffy_children)
+            .set_children(parent_key, &taffy_children)
             .unwrap();
     }
 
     /// Removes children from the entity's taffy node if it exists. Does nothing otherwise.
-    pub fn try_remove_children(&mut self, entity: Entity) {
-        if let Some(taffy_node) = self.entity_to_taffy.get(&entity) {
-            self.taffy.set_children(*taffy_node, &[]).unwrap();
+    pub fn try_remove_children(&mut self, parent: Entity) {
+        if let Some(key) = self.get_key(parent) {
+            self.taffy.set_children(key, &[]).unwrap();
         }
     }
 
     /// Removes the measure from the entity's taffy node if it exists. Does nothing otherwise.
     pub fn try_remove_measure(&mut self, entity: Entity) {
-        if let Some(taffy_node) = self.entity_to_taffy.get(&entity) {
-            self.taffy.set_measure(*taffy_node, None).unwrap();
+        if let Some(key) = self.get_key(entity) {
+            self.taffy.set_measure(key, None).unwrap();
         }
     }
 
     /// Retrieve or insert the root layout node and update its size to match the size of the window.
     pub fn update_window(&mut self, window: Entity, window_resolution: &WindowResolution) {
         let taffy = &mut self.taffy;
-        let node = self
+        let key = self
             .window_nodes
             .entry(window)
             .or_insert_with(|| taffy.new_leaf(taffy::style::Style::default()).unwrap());
 
         taffy
             .set_style(
-                *node,
+                *key,
                 taffy::style::Style {
                     size: taffy::geometry::Size {
                         width: taffy::style::Dimension::Points(
@@ -162,20 +196,18 @@ without UI components as a child of an entity with UI components, results may be
     pub fn set_window_children(
         &mut self,
         parent_window: Entity,
-        children: impl Iterator<Item = Entity>,
+        children: impl Iterator<Item = TaffyKey>,
     ) {
-        let taffy_node = self.window_nodes.get(&parent_window).unwrap();
-        let child_nodes = children
-            .map(|e| *self.entity_to_taffy.get(&e).unwrap())
-            .collect::<Vec<taffy::node::Node>>();
-        self.taffy.set_children(*taffy_node, &child_nodes).unwrap();
+        let window_key = self.window_nodes.get(&parent_window).unwrap();
+        let child_keys = children.collect::<Vec<TaffyKey>>();
+        self.taffy.set_children(*window_key, &child_keys).unwrap();
     }
 
     /// Compute the layout for each window entity's corresponding root node in the layout.
     pub fn compute_window_layouts(&mut self) {
-        for window_node in self.window_nodes.values() {
+        for window_key in self.window_nodes.values() {
             self.taffy
-                .compute_layout(*window_node, Size::MAX_CONTENT)
+                .compute_layout(*window_key, Size::MAX_CONTENT)
                 .unwrap();
         }
     }
@@ -183,33 +215,11 @@ without UI components as a child of an entity with UI components, results may be
     /// Removes each entity from the internal map and then removes their associated node from taffy
     pub fn remove_entities(&mut self, entities: impl IntoIterator<Item = Entity>) {
         for entity in entities {
-            if let Some(node) = self.entity_to_taffy.remove(&entity) {
-                self.taffy.remove(node).unwrap();
+            if let Some(key) = self.entity_to_taffy.remove(&entity) {
+                self.taffy.remove(key).unwrap();
             }
         }
     }
-
-    /// Get the layout geometry for the taffy node corresponding to the ui node [`Entity`].
-    /// Does not compute the layout geometry, `compute_window_layouts` should be run before using this function.
-    pub fn get_layout(&self, entity: Entity) -> Result<&taffy::layout::Layout, LayoutError> {
-        if let Some(taffy_node) = self.entity_to_taffy.get(&entity) {
-            self.taffy
-                .layout(*taffy_node)
-                .map_err(LayoutError::TaffyError)
-        } else {
-            warn!(
-                "Styled child in a non-UI entity hierarchy. You are using an entity \
-with UI components as a child of an entity without UI components, results may be unexpected."
-            );
-            Err(LayoutError::InvalidHierarchy)
-        }
-    }
-}
-
-#[derive(Debug)]
-pub enum LayoutError {
-    InvalidHierarchy,
-    TaffyError(taffy::error::TaffyError),
 }
 
 /// Updates the UI's layout tree, computes the new layout geometry and then updates the sizes and transforms of all the UI nodes.
@@ -219,17 +229,24 @@ pub fn ui_layout_system(
     windows: Query<(Entity, &Window)>,
     ui_scale: Res<UiScale>,
     mut scale_factor_events: EventReader<WindowScaleFactorChanged>,
-    mut resize_events: EventReader<bevy_window::WindowResized>,
+    mut window_resized_events: EventReader<bevy_window::WindowResized>,
+    mut window_created_events: EventReader<bevy_window::WindowCreated>,
     mut ui_surface: ResMut<UiSurface>,
-    root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
-    style_query: Query<(Entity, Ref<Style>), With<Node>>,
-    mut measure_query: Query<(Entity, &mut ContentSize)>,
-    children_query: Query<(Entity, Ref<Children>), With<Node>>,
-    just_children_query: Query<&Children>,
+    mut removed_nodes: RemovedComponents<UiKey>,
     mut removed_children: RemovedComponents<Children>,
     mut removed_content_sizes: RemovedComponents<ContentSize>,
-    mut node_transform_query: Query<(&mut Node, &mut Transform)>,
-    mut removed_nodes: RemovedComponents<Node>,
+    mut ui_queries_param_set: ParamSet<(
+        Query<(Entity, &mut UiKey)>,
+        (
+            Query<(&UiKey, &mut Node, &mut Transform)>,
+            Query<(&UiKey, Ref<Children>)>,
+            Query<(&UiKey, &mut ContentSize)>,
+            Query<(&UiKey, Ref<Style>)>,
+            Query<&UiKey, Without<Parent>>,
+            Query<Entity, (With<UiKey>, Without<Parent>)>,
+            Query<&Children, With<UiKey>>,
+        ),
+    )>,
 ) {
     // assume one window for time being...
     // TODO: Support window-independent scaling: https://github.com/bevyengine/bevy/issues/5621
@@ -247,9 +264,43 @@ pub fn ui_layout_system(
             return;
         };
 
-    let resized = resize_events
+    // Set the `window_changed` flag if the primary window was resized or created since the last UI update.
+    let window_changed = window_resized_events
         .iter()
-        .any(|resized_window| resized_window.window == primary_window_entity);
+        .map(|resized| resized.window)
+        .chain(window_created_events.iter().map(|created| created.window))
+        .any(|window| window == primary_window_entity);
+
+    // clean up removed nodes first
+    ui_surface.remove_entities(removed_nodes.iter());
+
+    let mut ids_query = ui_queries_param_set.p0();
+    for (entity, mut uikey) in ids_query.iter_mut() {
+        // Users can only instantiate `UiKey` components containing a null key with `UiKey::default()`
+        if uikey.is_null() {
+            uikey.taffy_key = ui_surface.insert_node(entity);
+        }
+    }
+
+    // When a `ContentSize` component is removed from an entity, we need to remove the measure from the corresponding taffy node.
+    for entity in removed_content_sizes.iter() {
+        ui_surface.try_remove_measure(entity);
+    }
+
+    // remove children
+    for entity in removed_children.iter() {
+        ui_surface.try_remove_children(entity);
+    }
+
+    let (mut node_transform_query, children_query, mut measure_query, style_query, root_node_uikey_query, root_node_query, just_children_query) =
+        ui_queries_param_set.p1();
+
+    // update children
+    for (uikey, children) in &children_query {
+        if children.is_changed() {
+            ui_surface.update_children(uikey.get(), &children);
+        }
+    }
 
     // update window root nodes
     for (entity, window) in windows.iter() {
@@ -258,48 +309,34 @@ pub fn ui_layout_system(
 
     let scale_factor = logical_to_physical_factor * ui_scale.0;
 
-    let layout_context = LayoutContext::new(scale_factor, physical_size);
+    let layout_context = LayoutContext::new(physical_size, scale_factor);
 
-    if !scale_factor_events.is_empty() || ui_scale.is_changed() || resized {
+    if !scale_factor_events.is_empty() || ui_scale.is_changed() || window_changed {
         scale_factor_events.clear();
         // update all nodes
-        for (entity, style) in style_query.iter() {
-            ui_surface.upsert_node(entity, &style, &layout_context);
+        for (uikey, style) in style_query.iter() {
+            ui_surface.set_style(uikey.get(), &style, &layout_context);
         }
     } else {
-        for (entity, style) in style_query.iter() {
+        for (uikey, style) in style_query.iter() {
             if style.is_changed() {
-                ui_surface.upsert_node(entity, &style, &layout_context);
+                ui_surface.set_style(uikey.get(), &style, &layout_context);
             }
         }
     }
 
-    for (entity, mut content_size) in measure_query.iter_mut() {
+    // The `Taffy` tree takes ownership of any new `MeasureFunc`s
+    for (uikey, mut content_size) in measure_query.iter_mut() {
         if let Some(measure_func) = content_size.measure_func.take() {
-            ui_surface.update_measure(entity, measure_func);
+            ui_surface.set_measure(uikey.get(), measure_func);
         }
     }
 
-    // clean up removed nodes
-    ui_surface.remove_entities(removed_nodes.iter());
-
-    // When a `ContentSize` component is removed from an entity, we need to remove the measure from the corresponding taffy node.
-    for entity in removed_content_sizes.iter() {
-        ui_surface.try_remove_measure(entity);
-    }
-
     // update window children (for now assuming all Nodes live in the primary window)
-    ui_surface.set_window_children(primary_window_entity, root_node_query.iter());
-
-    // update and remove children
-    for entity in removed_children.iter() {
-        ui_surface.try_remove_children(entity);
-    }
-    for (entity, children) in &children_query {
-        if children.is_changed() {
-            ui_surface.update_children(entity, &children);
-        }
-    }
+    ui_surface.set_window_children(
+        primary_window_entity,
+        root_node_uikey_query.iter().map(|uikey| uikey.get()),
+    );
 
     // compute layouts
     ui_surface.compute_window_layouts();
@@ -309,22 +346,20 @@ pub fn ui_layout_system(
     fn update_uinode_geometry_recursive(
         entity: Entity,
         ui_surface: &UiSurface,
-        node_transform_query: &mut Query<(&mut Node, &mut Transform)>,
-        children_query: &Query<&Children>,
+        node_transform_query: &mut Query<(&UiKey, &mut Node, &mut Transform)>,
+        children_query: &Query<&Children, With<UiKey>>,
         inverse_target_scale_factor: f32,
         parent_size: Vec2,
         mut absolute_location: Vec2,
     ) {
-        if let Ok((mut node, mut transform)) = node_transform_query.get_mut(entity) {
-            let layout = ui_surface.get_layout(entity).unwrap();
+        if let Ok((uikey, mut node, mut transform)) = node_transform_query.get_mut(entity) {
+            let layout = ui_surface.taffy.layout(uikey.get()).unwrap();
             let layout_size = Vec2::new(layout.size.width, layout.size.height);
             let layout_location = Vec2::new(layout.location.x, layout.location.y);
-
             absolute_location += layout_location;
             let rounded_location = round_layout_coords(layout_location);
             let rounded_size = round_layout_coords(absolute_location + layout_size)
                 - round_layout_coords(absolute_location);
-
             let new_size = inverse_target_scale_factor * rounded_size;
             let new_position =
                 inverse_target_scale_factor * rounded_location + 0.5 * (new_size - parent_size);
@@ -389,3 +424,66 @@ fn round_layout_coords(value: Vec2) -> Vec2 {
         y: round_ties_up(value.y),
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use bevy_ecs::world::World;
+    use bevy_math::Vec2;
+
+    use crate::layout::convert::from_style;
+    use crate::UiSurface;
+
+    #[test]
+    fn uisurface_insert_and_remove_nodes() {
+        let mut world = World::new();
+        let mut ui_surface = UiSurface::default();
+        let uinode_a = world.spawn_empty().id();
+        let uinode_b = world.spawn_empty().id();
+        let context = crate::LayoutContext::new(Vec2::new(800., 600.), 1.0);
+        let style_a = crate::Style::default();
+        let style_b = crate::Style {
+            flex_direction: crate::FlexDirection::Column,
+            ..Default::default()
+        };
+        let taffystyle_a = from_style(&style_a, &context);
+        let taffystyle_b = from_style(&style_a, &context);
+        let taffykey_a = ui_surface.insert_node(uinode_a);
+        let taffykey_b = ui_surface.insert_node(uinode_b);
+        ui_surface.set_style(taffykey_a, &style_a, &context);
+        ui_surface.set_style(taffykey_b, &style_b, &context);
+        assert_eq!(taffykey_a, ui_surface.get_key(uinode_a).unwrap());
+        assert_eq!(taffykey_b, ui_surface.get_key(uinode_b).unwrap());
+
+        // The should be be two nodes in the layout
+        assert_eq!(ui_surface.entity_to_taffy.len(), 2);
+
+        // The ids for the associated taffy nodes should be different
+        assert_ne!(taffykey_a, taffykey_b);
+
+        // Check the UI nodes each have an associated taffy node with the correct style
+        assert_eq!(ui_surface.taffy.style(taffykey_a).unwrap(), &taffystyle_a);
+        assert_eq!(ui_surface.taffy.style(taffykey_b).unwrap(), &taffystyle_b);
+
+        // Swap the styles of the associated nodes
+        ui_surface.set_style(taffykey_a, &style_b, &context);
+        ui_surface.set_style(taffykey_b, &style_a, &context);
+
+        // The styles should be swapped
+        assert_eq!(ui_surface.taffy.style(taffykey_a).unwrap(), &taffystyle_b);
+        assert_eq!(ui_surface.taffy.style(taffykey_b).unwrap(), &taffystyle_a);
+
+        // But the ids of the associated nodes should be unchanged
+        assert_eq!(ui_surface.get_key(uinode_a).unwrap(), taffykey_a);
+        assert_eq!(ui_surface.get_key(uinode_b).unwrap(), taffykey_b);
+
+        // There should still be exactly two nodes in the layout
+        assert_eq!(ui_surface.entity_to_taffy.len(), 2);
+
+        // Remove the uinodes from the layout and check styles are also removed
+        ui_surface.remove_entities([uinode_a, uinode_b]);
+
+        assert!(ui_surface.entity_to_taffy.is_empty());
+        assert!(ui_surface.taffy.style(taffykey_a).is_err());
+        assert!(ui_surface.taffy.style(taffykey_b).is_err());
+    }
+}
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 1752180b77d86..eaa1b21adbbb2 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -101,6 +101,7 @@ impl Plugin for UiPlugin {
             .register_type::<JustifyContent>()
             .register_type::<JustifyItems>()
             .register_type::<JustifySelf>()
+            .register_type::<UiKey>()
             .register_type::<Node>()
             // NOTE: used by Style::aspect_ratio
             .register_type::<Option<f32>>()
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 84f7940fe1734..ae0266c49d99f 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -4,7 +4,7 @@
 use crate::widget::TextFlags;
 use crate::{
     widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
+    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage, UiKey,
     UiTextureAtlasImage, ZIndex,
 };
 use bevy_asset::Handle;
@@ -21,8 +21,10 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
 /// The basic UI node
 ///
 /// Useful as a container for a variety of child nodes.
-#[derive(Bundle, Clone, Debug)]
+#[derive(Bundle, Debug)]
 pub struct NodeBundle {
+    /// Used internally. All UI nodes must have this component.
+    pub key: UiKey,
     /// Describes the logical size of the node
     pub node: Node,
     /// Styles which control the layout (size and position) of the node and it's children
@@ -57,6 +59,7 @@ impl Default for NodeBundle {
         NodeBundle {
             // Transparent background
             background_color: Color::NONE.into(),
+            key: Default::default(),
             border_color: Color::NONE.into(),
             node: Default::default(),
             style: Default::default(),
@@ -73,6 +76,8 @@ impl Default for NodeBundle {
 /// A UI node that is an image
 #[derive(Bundle, Debug, Default)]
 pub struct ImageBundle {
+    /// Used internally. All UI nodes must have this component.
+    pub key: UiKey,
     /// Describes the logical size of the node
     pub node: Node,
     /// Styles which control the layout (size and position) of the node and it's children
@@ -156,6 +161,8 @@ pub struct AtlasImageBundle {
 /// A UI node that is text
 #[derive(Bundle, Debug)]
 pub struct TextBundle {
+    /// Used internally. All UI nodes must have this component.
+    pub key: UiKey,
     /// Describes the logical size of the node
     pub node: Node,
     /// Styles which control the layout (size and position) of the node and it's children
@@ -201,6 +208,7 @@ impl Default for TextBundle {
             calculated_size: Default::default(),
             // Transparent background
             background_color: BackgroundColor(Color::NONE),
+            key: Default::default(),
             node: Default::default(),
             style: Default::default(),
             focus_policy: Default::default(),
@@ -262,8 +270,10 @@ impl TextBundle {
 }
 
 /// A UI node that is a button
-#[derive(Bundle, Clone, Debug)]
+#[derive(Bundle, Debug)]
 pub struct ButtonBundle {
+    /// Used internally. All UI nodes must have this component.
+    pub key: UiKey,
     /// Describes the logical size of the node
     pub node: Node,
     /// Marker component that signals this node is a button
@@ -305,6 +315,7 @@ impl Default for ButtonBundle {
     fn default() -> Self {
         Self {
             focus_policy: FocusPolicy::Block,
+            key: Default::default(),
             node: Default::default(),
             button: Default::default(),
             style: Default::default(),
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 9580bd8002258..2a214ae65f896 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -283,6 +283,8 @@ impl Val {
 
 /// Describes the style of a UI container node
 ///
+/// All UI nodes must have this component
+///
 /// Node's can be laid out using either Flexbox or CSS Grid Layout.<br />
 /// See below for general learning resources and for documentation on the individual style properties.
 ///