diff --git a/packages/autofmt/src/element.rs b/packages/autofmt/src/element.rs
index 6d2cdc830..5bb7d42fc 100644
--- a/packages/autofmt/src/element.rs
+++ b/packages/autofmt/src/element.rs
@@ -276,13 +276,12 @@ impl Writer<'_> {
         let start = location.start();
         let line_start = start.line - 1;
 
-        let this_line = self.src[line_start];
-
-        let beginning = if this_line.len() > start.column {
-            this_line[..start.column].trim()
-        } else {
-            ""
-        };
+        let beginning = self
+            .src
+            .get(line_start)
+            .filter(|this_line| this_line.len() > start.column)
+            .map(|this_line| this_line[..start.column].trim())
+            .unwrap_or_default();
 
         beginning.is_empty()
     }
diff --git a/packages/rsx-rosetta/Cargo.toml b/packages/rsx-rosetta/Cargo.toml
index d160d2bf9..e6bc45225 100644
--- a/packages/rsx-rosetta/Cargo.toml
+++ b/packages/rsx-rosetta/Cargo.toml
@@ -25,3 +25,6 @@ convert_case = "0.5.0"
 # default = ["html"]
 
 # eventually more output options
+
+[dev-dependencies]
+pretty_assertions = "1.2.1"
\ No newline at end of file
diff --git a/packages/rsx-rosetta/tests/simple.rs b/packages/rsx-rosetta/tests/simple.rs
new file mode 100644
index 000000000..b8fd095e1
--- /dev/null
+++ b/packages/rsx-rosetta/tests/simple.rs
@@ -0,0 +1,68 @@
+use html_parser::Dom;
+
+#[test]
+fn simple_elements() {
+    let html = r#"
+    <div>
+        <div class="asd">hello world!</div>
+        <div id="asd">hello world!</div>
+        <div id="asd">hello world!</div>
+        <div for="asd">hello world!</div>
+        <div async="asd">hello world!</div>
+        <div LargeThing="asd">hello world!</div>
+        <ai-is-awesome>hello world!</ai-is-awesome>
+    </div>
+    "#
+    .trim();
+
+    let dom = Dom::parse(html).unwrap();
+
+    let body = rsx_rosetta::rsx_from_html(&dom);
+
+    let out = dioxus_autofmt::write_block_out(body).unwrap();
+
+    let expected = r#"
+    div {
+        div { class: "asd", "hello world!" }
+        div { id: "asd", "hello world!" }
+        div { id: "asd", "hello world!" }
+        div { r#for: "asd", "hello world!" }
+        div { r#async: "asd", "hello world!" }
+        div { large_thing: "asd", "hello world!" }
+        ai_is_awesome { "hello world!" }
+    }"#;
+    pretty_assertions::assert_eq!(&out, &expected);
+}
+
+#[test]
+fn deeply_nested() {
+    let html = r#"
+    <div>
+        <div class="asd">
+            <div class="asd">
+                <div class="asd">
+                    <div class="asd">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    "#
+    .trim();
+
+    let dom = Dom::parse(html).unwrap();
+
+    let body = rsx_rosetta::rsx_from_html(&dom);
+
+    let out = dioxus_autofmt::write_block_out(body).unwrap();
+
+    let expected = r#"
+    div {
+        div { class: "asd",
+            div { class: "asd",
+                div { class: "asd", div { class: "asd" } }
+            }
+        }
+    }"#;
+    pretty_assertions::assert_eq!(&out, &expected);
+}