diff --git a/packages/native-core-macro/tests/peristant_iterator.rs b/packages/native-core-macro/tests/peristant_iterator.rs
new file mode 100644
index 000000000..29df3afe5
--- /dev/null
+++ b/packages/native-core-macro/tests/peristant_iterator.rs
@@ -0,0 +1,342 @@
+use dioxus_native_core::{
+    real_dom::{NodeType, RealDom},
+    state::State,
+    utils::PersistantElementIter,
+};
+use dioxus_native_core_macro::State;
+
+#[derive(State, Default, Clone)]
+struct Empty {}
+
+#[test]
+#[allow(unused_variables)]
+fn traverse() {
+    use dioxus_core::*;
+    use dioxus_core_macro::*;
+    use dioxus_html as dioxus_elements;
+
+    #[allow(non_snake_case)]
+    fn Base(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+    let vdom = VirtualDom::new(Base);
+    let mutations = vdom.create_vnodes(rsx! {
+        div{
+            div{
+                "hello"
+                p{
+                    "world"
+                }
+                "hello world"
+            }
+        }
+    });
+
+    let mut rdom: RealDom<Empty> = RealDom::new();
+
+    let _to_update = rdom.apply_mutations(vec![mutations]);
+
+    let mut iter = PersistantElementIter::new();
+    let div_tag = "div".to_string();
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+    let text1 = "hello".to_string();
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Text { text: text1, .. }
+    ));
+    let p_tag = "p".to_string();
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Element { tag: p_tag, .. }
+    ));
+    let text2 = "world".to_string();
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Text { text: text2, .. }
+    ));
+    let text3 = "hello world".to_string();
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Text { text: text3, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.next(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Text { text: text3, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Text { text: text2, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Element { tag: p_tag, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Text { text: text1, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+    assert!(matches!(
+        &rdom[iter.prev(&rdom).id()].node_type,
+        NodeType::Text { text: text3, .. }
+    ));
+}
+
+#[test]
+#[allow(unused_variables)]
+fn persist_removes() {
+    use dioxus_core::VNode;
+    use dioxus_core::*;
+    use dioxus_core_macro::*;
+    use dioxus_html as dioxus_elements;
+
+    #[allow(non_snake_case)]
+    fn Base(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+    let vdom = VirtualDom::new(Base);
+    let (build, update) = vdom.diff_lazynodes(
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "2",
+                    "world"
+                }
+                p{
+                    key: "3",
+                    "hello world"
+                }
+            }
+        },
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "3",
+                    "hello world"
+                }
+            }
+        },
+    );
+
+    let mut rdom: RealDom<Empty> = RealDom::new();
+
+    let _to_update = rdom.apply_mutations(vec![build]);
+
+    // this will end on the node that is removed
+    let mut iter1 = PersistantElementIter::new();
+    // this will end on the after node that is removed
+    let mut iter2 = PersistantElementIter::new();
+    // div
+    iter1.next(&rdom).id();
+    iter2.next(&rdom).id();
+    // p
+    iter1.next(&rdom).id();
+    iter2.next(&rdom).id();
+    // "hello"
+    iter1.next(&rdom).id();
+    iter2.next(&rdom).id();
+    // p
+    iter1.next(&rdom).id();
+    iter2.next(&rdom).id();
+    // "world"
+    iter1.next(&rdom).id();
+    iter2.next(&rdom).id();
+    // p
+    iter2.next(&rdom).id();
+    // "hello world"
+    iter2.next(&rdom).id();
+
+    iter1.prune(&update, &rdom);
+    iter2.prune(&update, &rdom);
+    let _to_update = rdom.apply_mutations(vec![update]);
+
+    let p_tag = "p".to_string();
+    let idx = iter1.next(&rdom).id();
+    assert!(matches!(
+        &rdom[idx].node_type,
+        NodeType::Element { tag: p_tag, .. }
+    ));
+    let text = "hello world".to_string();
+    let idx = iter1.next(&rdom).id();
+    assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
+    let div_tag = "div".to_string();
+    let idx = iter2.next(&rdom).id();
+    assert!(matches!(
+        &rdom[idx].node_type,
+        NodeType::Element { tag: div_tag, .. }
+    ));
+}
+
+#[test]
+#[allow(unused_variables)]
+fn persist_instertions_before() {
+    use dioxus_core::*;
+    use dioxus_core_macro::*;
+    use dioxus_html as dioxus_elements;
+
+    #[allow(non_snake_case)]
+    fn Base(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+    let vdom = VirtualDom::new(Base);
+    let (build, update) = vdom.diff_lazynodes(
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "3",
+                    "hello world"
+                }
+            }
+        },
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "2",
+                    "world"
+                }
+                p{
+                    key: "3",
+                    "hello world"
+                }
+            }
+        },
+    );
+
+    let mut rdom: RealDom<Empty> = RealDom::new();
+
+    let _to_update = rdom.apply_mutations(vec![build]);
+
+    let mut iter = PersistantElementIter::new();
+    // div
+    iter.next(&rdom).id();
+    // p
+    iter.next(&rdom).id();
+    // "hello"
+    iter.next(&rdom).id();
+    // p
+    iter.next(&rdom).id();
+    // "hello world"
+    iter.next(&rdom).id();
+
+    iter.prune(&update, &rdom);
+    let _to_update = rdom.apply_mutations(vec![update]);
+
+    let p_tag = "div".to_string();
+    let idx = iter.next(&rdom).id();
+    assert!(matches!(
+        &rdom[idx].node_type,
+        NodeType::Element { tag: p_tag, .. }
+    ));
+}
+
+#[test]
+#[allow(unused_variables)]
+fn persist_instertions_after() {
+    use dioxus_core::*;
+    use dioxus_core_macro::*;
+    use dioxus_html as dioxus_elements;
+
+    #[allow(non_snake_case)]
+    fn Base(cx: Scope) -> Element {
+        rsx!(cx, div {})
+    }
+    let vdom = VirtualDom::new(Base);
+    let (build, update) = vdom.diff_lazynodes(
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "2",
+                    "world"
+                }
+            }
+        },
+        rsx! {
+            div{
+                p{
+                    key: "1",
+                    "hello"
+                }
+                p{
+                    key: "2",
+                    "world"
+                }
+                p{
+                    key: "3",
+                    "hello world"
+                }
+            }
+        },
+    );
+
+    let mut rdom: RealDom<Empty> = RealDom::new();
+
+    let _to_update = rdom.apply_mutations(vec![build]);
+
+    let mut iter = PersistantElementIter::new();
+    // div
+    iter.next(&rdom).id();
+    // p
+    iter.next(&rdom).id();
+    // "hello"
+    iter.next(&rdom).id();
+    // p
+    iter.next(&rdom).id();
+    // "world"
+    iter.next(&rdom).id();
+
+    iter.prune(&update, &rdom);
+    let _to_update = rdom.apply_mutations(vec![update]);
+
+    let p_tag = "p".to_string();
+    let idx = iter.next(&rdom).id();
+    assert!(matches!(
+        &rdom[idx].node_type,
+        NodeType::Element { tag: p_tag, .. }
+    ));
+    let text = "hello world".to_string();
+    let idx = iter.next(&rdom).id();
+    assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
+}
diff --git a/packages/native-core/src/lib.rs b/packages/native-core/src/lib.rs
index a6e011fa9..2319ca4ac 100644
--- a/packages/native-core/src/lib.rs
+++ b/packages/native-core/src/lib.rs
@@ -2,3 +2,4 @@ pub mod layout_attributes;
 pub mod node_ref;
 pub mod real_dom;
 pub mod state;
+pub mod utils;
diff --git a/packages/native-core/src/utils.rs b/packages/native-core/src/utils.rs
new file mode 100644
index 000000000..41f79a04b
--- /dev/null
+++ b/packages/native-core/src/utils.rs
@@ -0,0 +1,224 @@
+use crate::{
+    real_dom::{NodeType, RealDom},
+    state::State,
+};
+use dioxus_core::{DomEdit, ElementId, Mutations};
+
+pub enum ElementProduced {
+    Progressed(ElementId),
+    Looped(ElementId),
+}
+impl ElementProduced {
+    pub fn id(&self) -> ElementId {
+        match self {
+            ElementProduced::Progressed(id) => *id,
+            ElementProduced::Looped(id) => *id,
+        }
+    }
+}
+
+#[derive(Debug)]
+enum NodePosition {
+    AtNode,
+    InChild(usize),
+}
+
+impl NodePosition {
+    fn map(&self, mut f: impl FnMut(usize) -> usize) -> Self {
+        match self {
+            Self::AtNode => Self::AtNode,
+            Self::InChild(i) => Self::InChild(f(*i)),
+        }
+    }
+
+    fn get_or_insert(&mut self, child_idx: usize) -> usize {
+        match self {
+            Self::AtNode => {
+                *self = Self::InChild(child_idx);
+                child_idx
+            }
+            Self::InChild(i) => *i,
+        }
+    }
+}
+
+/// The focus system needs a iterator that can persist through changes in the [VirtualDom].
+/// Iterate through it with [ElementIter::next] [ElementIter::prev], and update it with [ElementIter::update] (with data from [`VirtualDom::work_with_deadline`]).
+/// The iterator loops around when it reaches the end or the beginning.
+pub struct PersistantElementIter {
+    // stack of elements and fragments
+    stack: smallvec::SmallVec<[(ElementId, NodePosition); 5]>,
+}
+
+impl Default for PersistantElementIter {
+    fn default() -> Self {
+        PersistantElementIter {
+            stack: smallvec::smallvec![(ElementId(0), NodePosition::AtNode)],
+        }
+    }
+}
+
+impl PersistantElementIter {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// remove stale element refreneces
+    pub fn prune<S: State>(&mut self, mutations: &Mutations, rdom: &RealDom<S>) {
+        let ids_removed: Vec<_> = mutations
+            .edits
+            .iter()
+            .filter_map(|e| {
+                if let DomEdit::Remove { root } = e {
+                    Some(*root)
+                } else {
+                    None
+                }
+            })
+            .collect();
+        if let Some(r) = self
+            .stack
+            .iter()
+            .position(|(el_id, _)| ids_removed.iter().any(|id| el_id.as_u64() == *id))
+        {
+            self.stack.truncate(r);
+        }
+        // if a child is removed or inserted before or at the current element, update the child index
+        for (el_id, child_idx) in self.stack.iter_mut() {
+            if let NodePosition::InChild(child_idx) = child_idx {
+                if let NodeType::Element { children, .. } = &rdom[*el_id].node_type {
+                    for m in &mutations.edits {
+                        match m {
+                            DomEdit::Remove { root } => {
+                                if children
+                                    .iter()
+                                    .take(*child_idx + 1)
+                                    .any(|c| c.as_u64() == *root)
+                                {
+                                    *child_idx -= 1;
+                                }
+                            }
+                            DomEdit::InsertBefore { root, n } => {
+                                if children
+                                    .iter()
+                                    .take(*child_idx + 1)
+                                    .any(|c| c.as_u64() == *root)
+                                {
+                                    *child_idx += *n as usize;
+                                }
+                            }
+                            DomEdit::InsertAfter { root, n } => {
+                                if children
+                                    .iter()
+                                    .take(*child_idx)
+                                    .any(|c| c.as_u64() == *root)
+                                {
+                                    *child_idx += *n as usize;
+                                }
+                            }
+                            _ => (),
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /// get the next element
+    pub fn next<S: State>(&mut self, rdom: &RealDom<S>) -> ElementProduced {
+        if self.stack.is_empty() {
+            let id = ElementId(0);
+            let new = (id, NodePosition::AtNode);
+            self.stack.push(new);
+            ElementProduced::Looped(id)
+        } else {
+            let (last, o_child_idx) = self.stack.last_mut().unwrap();
+            let node = &rdom[*last];
+            match &node.node_type {
+                NodeType::Element { children, .. } => {
+                    *o_child_idx = o_child_idx.map(|i| i + 1);
+                    // if we have children, go to the next child
+                    let child_idx = o_child_idx.get_or_insert(0);
+                    if child_idx >= children.len() {
+                        self.pop();
+                        self.next(rdom)
+                    } else {
+                        let id = children[child_idx];
+                        if let NodeType::Element { .. } = &rdom[id].node_type {
+                            self.stack.push((id, NodePosition::AtNode));
+                        }
+                        ElementProduced::Progressed(id)
+                    }
+                }
+
+                NodeType::Text { .. } | NodeType::Placeholder { .. } => {
+                    // we are at a leaf, so we are done
+                    ElementProduced::Progressed(self.pop())
+                }
+            }
+        }
+    }
+
+    /// get the previous element
+    pub fn prev<S: State>(&mut self, rdom: &RealDom<S>) -> ElementProduced {
+        fn push_back<S: State>(
+            stack: &mut smallvec::SmallVec<[(ElementId, NodePosition); 5]>,
+            new_node: ElementId,
+            rdom: &RealDom<S>,
+        ) -> ElementId {
+            match &rdom[new_node].node_type {
+                NodeType::Element { children, .. } => {
+                    if children.is_empty() {
+                        new_node
+                    } else {
+                        stack.push((new_node, NodePosition::InChild(children.len() - 1)));
+                        push_back(stack, *children.last().unwrap(), rdom)
+                    }
+                }
+                _ => new_node,
+            }
+        }
+        if self.stack.is_empty() {
+            let new_node = ElementId(0);
+            ElementProduced::Looped(push_back(&mut self.stack, new_node, rdom))
+        } else {
+            let (last, o_child_idx) = self.stack.last_mut().unwrap();
+            let node = &rdom[*last];
+            match &node.node_type {
+                NodeType::Element { children, .. } => {
+                    // if we have children, go to the next child
+                    if let NodePosition::InChild(0) = o_child_idx {
+                        ElementProduced::Progressed(self.pop())
+                    } else {
+                        *o_child_idx = o_child_idx.map(|i| i - 1);
+                        if let NodePosition::InChild(child_idx) = o_child_idx {
+                            if *child_idx >= children.len() || children.len() == 0 {
+                                self.pop();
+                                self.prev(rdom)
+                            } else {
+                                let new_node = children[*child_idx];
+                                ElementProduced::Progressed(push_back(
+                                    &mut self.stack,
+                                    new_node,
+                                    rdom,
+                                ))
+                            }
+                        } else {
+                            self.pop();
+                            self.prev(rdom)
+                        }
+                    }
+                }
+
+                NodeType::Text { .. } | NodeType::Placeholder { .. } => {
+                    // we are at a leaf, so we are done
+                    ElementProduced::Progressed(self.pop())
+                }
+            }
+        }
+    }
+
+    fn pop(&mut self) -> ElementId {
+        self.stack.pop().unwrap().0
+    }
+}