diff --git a/Test/Pages/home.js b/Test/Pages/home.js
deleted file mode 100644
index 8442831..0000000
--- a/Test/Pages/home.js
+++ /dev/null
@@ -1,7 +0,0 @@
-class Home extends Page {
-
-    render = () => {
-    }
-}
-
-export default Home
\ No newline at end of file
diff --git a/Test/state/state.test.js b/Test/state/state.test.js
new file mode 100644
index 0000000..b8ea51d
--- /dev/null
+++ b/Test/state/state.test.js
@@ -0,0 +1,71 @@
+window.testSuites.push( class testState {
+    SimpleState() {
+        class Home extends Shadow {
+            state = {
+                pathname: "/"
+            }
+
+            render() {
+                VStack(() => {
+                    p("hi")
+                        .top(() => {return (this.state.pathname === "/" ? [11, vw] : [7, vw])})
+                })
+                .onAppear(() => {
+                    this.state.pathname = "/asd"
+                })
+            }
+        }
+
+        register(Home, randomName("home"))
+        window.Home()
+        if(!($("p").style.top === "7vw")) return "state was not respeccted"
+    }
+
+    StateArrayPush() {
+        class Home extends Shadow {
+            state = {
+                logs: []
+            }
+
+            render() {
+                VStack(() => {
+                    p("hi")
+                        .fontSize(() => {return this.state.logs.length > 0 ? [2, em] : [1, em]})
+                })
+                .onAppear(() => {
+                    this.state.logs = ["one", "two"]
+                })
+            }
+        }
+
+        register(Home, randomName("home"))
+        window.Home()
+
+        if(!($("p").style.fontSize === "2em")) return "state did not update!"
+    }
+
+    SimpleStack() {
+        class Home extends Shadow {
+            state = {
+                logs: []
+            }
+
+            render() {
+                VStack(() => {
+                    let asd = this.state.logs.length * 2
+                    p("hi")
+                        .fontSize(asd, vw)
+                })
+                .onAppear(() => {
+                    this.state.logs = ["one", "two"]
+                })
+            }
+        }
+
+        register(Home, randomName("home"))
+        window.Home()
+        
+        if(!($("p").style.fontSize === "4vw")) return "state did not update!"
+    }
+
+})
\ No newline at end of file
diff --git a/Test/test.html b/Test/test.html
index 5ff821c..4520f23 100644
--- a/Test/test.html
+++ b/Test/test.html
@@ -6,13 +6,6 @@
     <link rel="stylesheet" href="">
     <script src="../index.js"></script>
     <script src="test.js" type="module"></script>
-    <script type="module">
-      import Home from "./Pages/home.js";
-
-      window.routes = {
-          "/Test": Home
-      }
-    </script>
   </head>
   <body style="background: rgb(242, 194, 147)">
 
diff --git a/Test/test.js b/Test/test.js
index 0acb1bf..cf8634d 100644
--- a/Test/test.js
+++ b/Test/test.js
@@ -1,13 +1,7 @@
 console.log("Tests initializing.")
 window.testSuites = [];
 
-await import ("./Skeleton/parse.test.js")
-await import ("./Skeleton/init.test.js")
-await import ("./Skeleton/observedobject.test.js")
-await import ("./Skeleton/parserender.test.js")
-await import ("./Skeleton/state.test.js")
-await import ("./Element/stacks.test.js")
-await import ("./Element/Group.test.js")
+await import ("./state/state.test.js")
 
 window.randomName = function randomName(prefix) {
     const sanitizedPrefix = prefix.toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -43,6 +37,7 @@ window.test = async function() {
             let test = suiteContents[i];
             if(typeof suite[test] === 'function' && test !== "constructor") {
                 testNum++;
+                document.body.innerHTML = ""
                 console.log(`%c${testNum}. ${test}`, "margin-top: 10px; border-top: 2px solid #e9c9a0; color: #e9c9a0; border-radius: 10px; padding: 10px;");
                 
                 let fail;
diff --git a/experiment.html b/experiment.html
new file mode 100644
index 0000000..a424464
--- /dev/null
+++ b/experiment.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Canvas Text Editor</title>
+<style>
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background: #d8cbb0;
+        overflow: hidden;
+    }
+    canvas {
+        display: block;
+        background: #e7dcc6;
+    }
+</style>
+</head>
+<body>
+
+<canvas id="c"></canvas>
+
+<script>
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d");
+
+const dpr = window.devicePixelRatio || 1;
+
+function resize() {
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+
+    canvas.style.width = w + "px";
+    canvas.style.height = h + "px";
+
+    canvas.width = Math.floor(w * dpr);
+    canvas.height = Math.floor(h * dpr);
+
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+window.addEventListener("resize", resize);
+resize();
+
+/* =====================
+   Editor State
+===================== */
+
+const fontSize = 13;
+const lineHeight = 20;
+const padding = 20;
+const font = `${fontSize}px monospace`;
+
+let lines = [""];
+let cursor = { line: 0, col: 0 };
+
+let blink = true;
+let blinkEnabled = true;
+let typingTimeout = null;
+
+/* =====================
+   Rendering
+===================== */
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = "#631414";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.font = font;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = "#d2531a";
+
+    for (let i = 0; i < lines.length; i++) {
+        ctx.fillText(
+            lines[i],
+            padding,
+            padding + i * lineHeight
+        );
+    }
+
+    if (blink) {
+        const before = lines[cursor.line].slice(0, cursor.col);
+        const x = padding + ctx.measureText(before).width;
+        const y = padding - 2 + cursor.line * lineHeight;
+
+        ctx.fillRect(x, y, 2, fontSize + 2);
+    }
+}
+
+/* =====================
+   Cursor Blink Logic
+===================== */
+
+setInterval(() => {
+    if (!blinkEnabled) return;
+    blink = !blink;
+    draw();
+}, 500);
+
+function stopBlinkWhileTyping() {
+    blinkEnabled = false;
+    blink = true;
+    draw();
+
+    clearTimeout(typingTimeout);
+    typingTimeout = setTimeout(() => {
+        blinkEnabled = true;
+        blink = true;
+        draw();
+    }, 600);
+}
+
+/* =====================
+   Helpers
+===================== */
+
+function clampCursor() {
+    cursor.line = Math.max(0, Math.min(cursor.line, lines.length - 1));
+    cursor.col = Math.max(0, Math.min(cursor.col, lines[cursor.line].length));
+}
+
+function insertText(text) {
+    const line = lines[cursor.line];
+    lines[cursor.line] =
+        line.slice(0, cursor.col) +
+        text +
+        line.slice(cursor.col);
+    cursor.col += text.length;
+}
+
+function newline() {
+    const line = lines[cursor.line];
+    lines[cursor.line] = line.slice(0, cursor.col);
+    lines.splice(cursor.line + 1, 0, line.slice(cursor.col));
+    cursor.line++;
+    cursor.col = 0;
+}
+
+function backspace() {
+    if (cursor.col > 0) {
+        const line = lines[cursor.line];
+        lines[cursor.line] =
+            line.slice(0, cursor.col - 1) +
+            line.slice(cursor.col);
+        cursor.col--;
+    } else if (cursor.line > 0) {
+        const prevLen = lines[cursor.line - 1].length;
+        lines[cursor.line - 1] += lines[cursor.line];
+        lines.splice(cursor.line, 1);
+        cursor.line--;
+        cursor.col = prevLen;
+    }
+}
+
+/* =====================
+   Keyboard Input
+===================== */
+
+window.addEventListener("keydown", (e) => {
+    if (e.metaKey || e.ctrlKey) return;
+
+    let changed = true;
+
+    switch (e.key) {
+        case "ArrowLeft": cursor.col--; break;
+        case "ArrowRight": cursor.col++; break;
+        case "ArrowUp": cursor.line--; break;
+        case "ArrowDown": cursor.line++; break;
+        case "Backspace": backspace(); e.preventDefault(); break;
+        case "Enter": newline(); e.preventDefault(); break;
+        case "Tab": insertText("    "); e.preventDefault(); break;
+        default:
+            if (e.key.length === 1) {
+                insertText(e.key);
+                e.preventDefault();
+            } else {
+                changed = false;
+            }
+    }
+
+    clampCursor();
+
+    if (changed) {
+        stopBlinkWhileTyping();
+    }
+
+    draw();
+});
+
+/* =====================
+   Mouse → Cursor
+===================== */
+
+canvas.addEventListener("mousedown", (e) => {
+    ctx.font = font;
+
+    const mx = e.offsetX - padding;
+    const my = e.offsetY - padding;
+
+    cursor.line = Math.max(
+        0,
+        Math.min(Math.floor(my / lineHeight), lines.length - 1)
+    );
+
+    let x = 0;
+    cursor.col = 0;
+    for (let i = 0; i < lines[cursor.line].length; i++) {
+        const w = ctx.measureText(lines[cursor.line][i]).width;
+        if (x + w / 2 >= mx) break;
+        x += w;
+        cursor.col++;
+    }
+
+    blink = true;
+    blinkEnabled = true;
+    draw();
+});
+
+/* =====================
+   Initial Draw
+===================== */
+
+draw();
+</script>
+
+</body>
+</html>
