diff --git a/cypress.config.ts b/cypress.config.ts
index a365f0dac..142e38ef3 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -2,9 +2,10 @@ import { defineConfig } from "cypress";
 import { configureVisualRegression } from "cypress-visual-regression";
 
 module.exports = defineConfig({
+  viewportWidth: 1000,
   trashAssetsBeforeRuns: true,
   env: {
-    failSilently: false,
+    visualRegressionFailSilently: false,
   },
   e2e: {
     screenshotsFolder: "./cypress/snapshots/actual",
diff --git a/cypress/setup/index.html b/cypress/setup/index.html
index c2a6e9cbb..180467dd8 100644
--- a/cypress/setup/index.html
+++ b/cypress/setup/index.html
@@ -14,15 +14,15 @@
       crossorigin="anonymous"
     />
 
-    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
-    <link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />
-
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
       rel="stylesheet"
     />
 
+    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
+    <link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />
+
     <style type="text/css">
       body,
       h1,
@@ -157,7 +157,7 @@ <h2 data-intro="fourth header step" data-hint="secondary header">
           class="pt-3 mt-4 text-muted border-top"
           data-hint="this is the footer"
         >
-          &copy; YEAR
+          &copy; 2021
         </footer>
       </div>
     </main>
diff --git a/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_checkbox_first_step.png b/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-checkbox-first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_checkbox_first_step.png
rename to cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-checkbox-first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_checkbox_second_step.png b/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-checkbox-second-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_checkbox_second_step.png
rename to cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-checkbox-second-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_after_exit.png b/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-after-exit.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_after_exit.png
rename to cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-after-exit.png
diff --git a/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_after_second_start.png b/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-after-second-start.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_after_second_start.png
rename to cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-after-second-start.png
diff --git a/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_first_step.png b/cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont_show_again_clicked_first_step.png
rename to cypress/snapshots/base/src/packages/tour/dont-show-again.cy.ts/dont-show-again-clicked-first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_element_first_step.png b/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-element-first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_element_first_step.png
rename to cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-element-first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_element_second_step.png b/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-element-second-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_element_second_step.png
rename to cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-element-second-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_element_scroll.png b/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-element-scroll.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_element_scroll.png
rename to cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-element-scroll.png
diff --git a/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_element.png b/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-element.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_element.png
rename to cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-element.png
diff --git a/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_parent_element_scroll.png b/cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-parent-element-scroll.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight_fixed_parent_element_scroll.png
rename to cypress/snapshots/base/src/packages/tour/highlight.cy.ts/highlight-fixed-parent-element-scroll.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/first_step.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/first_step.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_bottom.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-bottom.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_bottom.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-bottom.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_left.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-left.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_left.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-left.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_right.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-right.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/position_right.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/position-right.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_first_step.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_first_step.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_second_step.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-second-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_second_step.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-second-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_third_step.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-third-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh_third_step.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/refresh-third-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/modal.cy.ts/second_step.png b/cypress/snapshots/base/src/packages/tour/modal.cy.ts/second-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/modal.cy.ts/second_step.png
rename to cypress/snapshots/base/src/packages/tour/modal.cy.ts/second-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first_step.png b/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first_step.png
rename to cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/first-step.png
diff --git a/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second_step.png b/cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second-step.png
similarity index 100%
rename from cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second_step.png
rename to cypress/snapshots/base/src/packages/tour/progressbar.cy.ts/second-step.png
diff --git a/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-checkbox-first-step-diff.png b/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-checkbox-first-step-diff.png
deleted file mode 100644
index a3dcc6eb5..000000000
Binary files a/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-checkbox-first-step-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-clicked-first-step-diff.png b/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-clicked-first-step-diff.png
deleted file mode 100644
index 0a315441c..000000000
Binary files a/cypress/snapshots/diff/tour/dont-show-again.cy.js/dont-show-again-clicked-first-step-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-element-first-step-diff.png b/cypress/snapshots/diff/tour/highlight.cy.js/highlight-element-first-step-diff.png
deleted file mode 100644
index e44670a66..000000000
Binary files a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-element-first-step-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-diff.png b/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-diff.png
deleted file mode 100644
index e786f1dad..000000000
Binary files a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-scroll-diff.png b/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-scroll-diff.png
deleted file mode 100644
index 45dea2c54..000000000
Binary files a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-element-scroll-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-parent-element-scroll-diff.png b/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-parent-element-scroll-diff.png
deleted file mode 100644
index 361d263ce..000000000
Binary files a/cypress/snapshots/diff/tour/highlight.cy.js/highlight-fixed-parent-element-scroll-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/modal.cy.js/first-step-diff.png b/cypress/snapshots/diff/tour/modal.cy.js/first-step-diff.png
deleted file mode 100644
index e44670a66..000000000
Binary files a/cypress/snapshots/diff/tour/modal.cy.js/first-step-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/modal.cy.js/position-bottom-diff.png b/cypress/snapshots/diff/tour/modal.cy.js/position-bottom-diff.png
deleted file mode 100644
index 164cb4ea8..000000000
Binary files a/cypress/snapshots/diff/tour/modal.cy.js/position-bottom-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/modal.cy.js/refresh-first-step-diff.png b/cypress/snapshots/diff/tour/modal.cy.js/refresh-first-step-diff.png
deleted file mode 100644
index 74dd5ce46..000000000
Binary files a/cypress/snapshots/diff/tour/modal.cy.js/refresh-first-step-diff.png and /dev/null differ
diff --git a/cypress/snapshots/diff/tour/progressbar.cy.js/first-step-diff.png b/cypress/snapshots/diff/tour/progressbar.cy.js/first-step-diff.png
deleted file mode 100644
index 90cfc96f7..000000000
Binary files a/cypress/snapshots/diff/tour/progressbar.cy.js/first-step-diff.png and /dev/null differ
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index daca73448..351a662e5 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -4,6 +4,7 @@ import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/comman
 
 addCompareSnapshotCommand({
   capture: "fullPage",
+  errorThreshold: 0.09
 });
 
 Cypress.Commands.add("nextStep", () => {
diff --git a/package-lock.json b/package-lock.json
index 72e3f6153..c4267f55b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "core-js": "^3.6.5",
         "cypress": "^13.12.0",
         "cypress-real-events": "^1.13.0",
-        "cypress-visual-regression": "^5.0.2",
+        "cypress-visual-regression": "^5.2.1",
         "eslint": "^8.0.1",
         "jest": "^29.5.0",
         "jest-extended": "^3.2.4",
@@ -5639,9 +5639,9 @@
       }
     },
     "node_modules/cypress-visual-regression": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-5.0.2.tgz",
-      "integrity": "sha512-Rr/W2uSw1KxG5AE9q6MT8yZfT81GaLVO0z/QyKg9pCZ7XvObUklyh9j5gWe7yUzDnY/2g9XpczZKNKL2zZ2PAg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-5.2.1.tgz",
+      "integrity": "sha512-TX2sv3Omx3m1c92zRy0gd3CKW8l4StzZaDNV3hF4w/7BUVp6SQABbVpjnJETDvpXkJK2el8zMHSdzM9Ox6iJvA==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.2",
@@ -22050,9 +22050,9 @@
       "requires": {}
     },
     "cypress-visual-regression": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-5.0.2.tgz",
-      "integrity": "sha512-Rr/W2uSw1KxG5AE9q6MT8yZfT81GaLVO0z/QyKg9pCZ7XvObUklyh9j5gWe7yUzDnY/2g9XpczZKNKL2zZ2PAg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-5.2.1.tgz",
+      "integrity": "sha512-TX2sv3Omx3m1c92zRy0gd3CKW8l4StzZaDNV3hF4w/7BUVp6SQABbVpjnJETDvpXkJK2el8zMHSdzM9Ox6iJvA==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.2",
diff --git a/package.json b/package.json
index de74666c5..ea6c20de3 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "test:prettier": "prettier --check '(src|tests)/**/*.(js|ts|json|html)' '!tests/cypress/setup/dist'",
     "test:watch": "jest --watch",
     "test:jest": "jest --coverage --silent --ci --coverage --coverageReporters=\"text\" --coverageReporters=\"text-summary\"",
-    "test:cypress": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included run --env type=regression || cypress run --env type=regression'",
+    "test:cypress": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included run --env visualRegressionType=regression || cypress run --env visualRegressionType=regression'",
     "release": "./bin/release.sh || true",
     "prebuild": "rimraf ./dist",
     "build": "rollup -c",
@@ -48,7 +48,7 @@
     "core-js": "^3.6.5",
     "cypress": "^13.12.0",
     "cypress-real-events": "^1.13.0",
-    "cypress-visual-regression": "^5.0.2",
+    "cypress-visual-regression": "^5.2.1",
     "eslint": "^8.0.1",
     "jest": "^29.5.0",
     "jest-extended": "^3.2.4",
diff --git a/src/packages/dom/index.test.ts b/src/packages/dom/index.test.ts
new file mode 100644
index 000000000..455246e0a
--- /dev/null
+++ b/src/packages/dom/index.test.ts
@@ -0,0 +1,2581 @@
+import van, { State } from ".";
+
+const {
+  a,
+  b,
+  button,
+  div,
+  h2,
+  i,
+  input,
+  li,
+  option,
+  p,
+  pre,
+  select,
+  span,
+  sup,
+  table,
+  tbody,
+  td,
+  th,
+  thead,
+  tr,
+  ul,
+} = van.tags;
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const waitMsForDerivations = 5;
+
+const createHiddenDom = () => {
+  const dom = div({ class: "hidden" });
+  van.add(document.body, dom);
+  return dom;
+};
+
+describe("van", () => {
+  describe("tag", () => {
+    it("should create basic tag", () => {
+      const dom = div(
+        p("👋Hello"),
+        ul(li("🗺️World"), li(a({ href: "https://vanjs.org/" }, "🍦VanJS")))
+      );
+
+      expect(dom.outerHTML).toBe(
+        '<div><p>👋Hello</p><ul><li>🗺️World</li><li><a href="https://vanjs.org/">🍦VanJS</a></li></ul></div>'
+      );
+    });
+
+    it("should add onclick event", () => {
+      const dom = div(
+        button({ onclick: () => van.add(dom, p("Button clicked!")) })
+      );
+      dom.querySelector("button")!.click();
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p></div>"
+      );
+    });
+
+    it("should escape html tags", () => {
+      expect(p("<input>").outerHTML).toBe("<p>&lt;input&gt;</p>");
+      expect(div("a && b").outerHTML).toBe("<div>a &amp;&amp; b</div>");
+      expect(div("<input a && b>").outerHTML).toBe(
+        "<div>&lt;input a &amp;&amp; b&gt;</div>"
+      );
+    });
+
+    it("should create nested tags", () => {
+      expect(ul([li("Item 1"), li("Item 2"), li("Item 3")]).outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
+      );
+    });
+
+    it("should create deep nested tags", () => {
+      expect(ul([[li("Item 1"), [li("Item 2")]], li("Item 3")]).outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
+      );
+    });
+
+    it("should create tags with null props", () => {
+      const dom = button({ onclick: null });
+      expect(dom.onclick === null);
+    });
+
+    it("should connect props to state", async () => {
+      const href = van.state("http://example.com/");
+      const dom = a({ href }, "Test Link");
+      van.add(createHiddenDom(), dom);
+      expect(dom.href).toBe("http://example.com/");
+      href.val = "https://vanjs.org/";
+      await sleep(waitMsForDerivations);
+      expect(dom.href).toBe("https://vanjs.org/");
+    });
+
+    it("should not change props when state is disconnected", async () => {
+      const href = van.state("http://example.com/");
+      const dom = a({ href }, "Test Link");
+      expect(dom.href).toBe("http://example.com/");
+      href.val = "https://vanjs.org/";
+      await sleep(waitMsForDerivations);
+      // href won't change as dom is not connected to document
+      expect(dom.href).toBe("http://example.com/");
+    });
+
+    it("should change connect onclick handler with state", async () => {
+      const dom = div();
+      van.add(createHiddenDom(), dom);
+      // TODO: fix the any type here. It should ideally be an EventListener | null
+      const handler = van.state(<any>(
+        (() => van.add(dom, p("Button clicked!")))
+      ));
+      van.add(dom, button({ onclick: handler }));
+      dom.querySelector("button")!.click();
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p></div>"
+      );
+
+      handler.val = () => van.add(dom, div("Button clicked!"));
+      await sleep(waitMsForDerivations);
+      dom.querySelector("button")!.click();
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p><div>Button clicked!</div></div>"
+      );
+
+      handler.val = null;
+      await sleep(waitMsForDerivations);
+      dom.querySelector("button")!.click();
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p><div>Button clicked!</div></div>"
+      );
+    });
+
+    it("should not change onclick handler when state is disconnected", async () => {
+      const dom = div();
+      const handler = van.state(() => van.add(dom, p("Button clicked!")));
+      van.add(dom, button({ onclick: handler }));
+      dom.querySelector("button")!.click();
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p></div>"
+      );
+
+      handler.val = () => van.add(dom, div("Button clicked!"));
+      await sleep(waitMsForDerivations);
+      dom.querySelector("button")!.click();
+      // The onclick handler won't change as dom is not connected to document, as a result, the <p> element will be added
+      expect(dom.outerHTML).toBe(
+        "<div><button></button><p>Button clicked!</p><p>Button clicked!</p></div>"
+      );
+    });
+
+    it("should update props from a derived state", async () => {
+      const host = van.state("example.com");
+      const path = van.state("/hello");
+      const dom = a(
+        { href: () => `https://${host.val}${path.val}` },
+        "Test Link"
+      );
+      van.add(createHiddenDom(), dom);
+      expect(dom.href).toBe("https://example.com/hello");
+      host.val = "vanjs.org";
+      path.val = "/start";
+      await sleep(waitMsForDerivations);
+      expect(dom.href).toBe("https://vanjs.org/start");
+    });
+
+    it("should not update props from a disconnected derived state", async () => {
+      const host = van.state("example.com");
+      const path = van.state("/hello");
+      const dom = a(
+        { href: () => `https://${host.val}${path.val}` },
+        "Test Link"
+      );
+      expect(dom.href).toBe("https://example.com/hello");
+      host.val = "vanjs.org";
+      path.val = "/start";
+      await sleep(waitMsForDerivations);
+      // href won't change as dom is not connected to document
+      expect(dom.href).toBe("https://example.com/hello");
+    });
+
+    it("should update props when partial state", async () => {
+      const host = van.state("example.com");
+      const path = "/hello";
+      const dom = a({ href: () => `https://${host.val}${path}` }, "Test Link");
+      van.add(createHiddenDom(), dom);
+      expect(dom.href).toBe("https://example.com/hello");
+      host.val = "vanjs.org";
+      await sleep(waitMsForDerivations);
+      expect(dom.href).toBe("https://vanjs.org/hello");
+    });
+
+    it("should not update props when partial state is disconnected", async () => {
+      const host = van.state("example.com");
+      const path = "/hello";
+      const dom = a({ href: () => `https://${host.val}${path}` }, "Test Link");
+      expect(dom.href).toBe("https://example.com/hello");
+      host.val = "vanjs.org";
+      await sleep(waitMsForDerivations);
+      // href won't change as dom is not connected to document
+      expect(dom.href).toBe("https://example.com/hello");
+    });
+
+    it("should render correctly when connected state throws an error", async () => {
+      const text = van.state("hello");
+      const dom = div(
+        div(
+          {
+            class: () => {
+              if (text.val === "fail") throw new Error();
+              return text.val;
+            },
+            "data-name": text,
+          },
+          text
+        ),
+        div(
+          {
+            class: () => {
+              if (text.val === "fail") throw new Error();
+              return text.val;
+            },
+            "data-name": text,
+          },
+          text
+        )
+      );
+      van.add(createHiddenDom(), dom);
+      expect(dom.outerHTML).toBe(
+        '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>'
+      );
+
+      text.val = "fail";
+      await sleep(waitMsForDerivations);
+      // The binding function for `class` property throws an error.
+      // We want to validate the `class` property won't be updated because of the error,
+      // but other properties and child nodes are updated as usual.
+      expect(dom.outerHTML).toBe(
+        '<div><div class="hello" data-name="fail">fail</div><div class="hello" data-name="fail">fail</div></div>'
+      );
+    });
+
+    it("should render correct when disconnected state throws an error", async () => {
+      const text = van.state("hello");
+      const dom = div(
+        div(
+          {
+            class: () => {
+              if (text.val === "fail") throw new Error();
+              return text.val;
+            },
+            "data-name": text,
+          },
+          text
+        ),
+        div(
+          {
+            class: () => {
+              if (text.val === "fail") throw new Error();
+              return text.val;
+            },
+            "data-name": text,
+          },
+          text
+        )
+      );
+      expect(dom.outerHTML).toBe(
+        '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>'
+      );
+
+      text.val = "fail";
+      await sleep(waitMsForDerivations);
+      // `dom` won't change as it's not connected to document
+      expect(dom.outerHTML).toBe(
+        '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>'
+      );
+    });
+
+    it("should change and trigger onclick handler when state is connected", async () => {
+      const hiddenDom = createHiddenDom();
+      const elementName = van.state("p");
+      van.add(
+        hiddenDom,
+        button({
+          onclick: van.derive(() => {
+            const name = elementName.val;
+            return name
+              ? () => van.add(hiddenDom, van.tags[name]("Button clicked!"))
+              : null;
+          }),
+        })
+      );
+      hiddenDom.querySelector("button")!.click();
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Button clicked!</p>"
+      );
+
+      elementName.val = "div";
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("button")!.click();
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Button clicked!</p><div>Button clicked!</div>"
+      );
+
+      elementName.val = "";
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("button")!.click();
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Button clicked!</p><div>Button clicked!</div>"
+      );
+    });
+
+    it("should not change onclick handler when state is disconnected", async () => {
+      const dom = div();
+      const elementName = van.state("p");
+      van.add(
+        dom,
+        button({
+          onclick: van.derive(() => {
+            const name = elementName.val;
+            return name
+              ? () => van.add(dom, van.tags[name]("Button clicked!"))
+              : null;
+          }),
+        })
+      );
+      dom.querySelector("button")!.click();
+      expect(dom.innerHTML).toBe("<button></button><p>Button clicked!</p>");
+
+      elementName.val = "div";
+      await sleep(waitMsForDerivations);
+      // The onclick handler won't change as `dom` is not connected to document,
+      // as a result, the <p> element will be added.
+      dom.querySelector("button")!.click();
+      expect(dom.innerHTML).toBe(
+        "<button></button><p>Button clicked!</p><p>Button clicked!</p>"
+      );
+    });
+
+    it("should update data attributes when state is connected", async () => {
+      const lineNum = van.state(1);
+      const dom = div(
+        {
+          "data-type": "line",
+          "data-id": lineNum,
+          "data-line": () => `line=${lineNum.val}`,
+        },
+        "This is a test line"
+      );
+      van.add(createHiddenDom(), dom);
+      expect(dom.outerHTML).toBe(
+        '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>'
+      );
+
+      lineNum.val = 3;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        '<div data-type="line" data-id="3" data-line="line=3">This is a test line</div>'
+      );
+    });
+
+    it("should not update data attributes when state is disconnected", async () => {
+      const lineNum = van.state(1);
+      const dom = div(
+        {
+          "data-type": "line",
+          "data-id": lineNum,
+          "data-line": () => `line=${lineNum.val}`,
+        },
+        "This is a test line"
+      );
+      expect(dom.outerHTML).toBe(
+        '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>'
+      );
+
+      lineNum.val = 3;
+      await sleep(waitMsForDerivations);
+      // Attributes won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe(
+        '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>'
+      );
+    });
+
+    it("should update readonly props when state is connected", async () => {
+      const form = van.state("form1");
+      const dom = button({ form }, "Button");
+      van.add(createHiddenDom(), dom);
+      expect(dom.outerHTML).toBe('<button form="form1">Button</button>');
+
+      form.val = "form2";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe('<button form="form2">Button</button>');
+
+      expect(input({ list: "datalist1" }).outerHTML).toBe(
+        '<input list="datalist1">'
+      );
+    });
+
+    it("should not update readonly props when state is disconnected", async () => {
+      const form = van.state("form1");
+      const dom = button({ form }, "Button");
+      expect(dom.outerHTML).toBe('<button form="form1">Button</button>');
+
+      form.val = "form2";
+      await sleep(waitMsForDerivations);
+      // Attributes won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe('<button form="form1">Button</button>');
+
+      expect(input({ list: "datalist1" }).outerHTML).toBe(
+        '<input list="datalist1">'
+      );
+    });
+
+    it("should add custom event handler", () => {
+      const dom = div(
+        button({ oncustom: () => van.add(dom, p("Event triggered!")) })
+      );
+      dom.querySelector("button")!.dispatchEvent(new Event("custom"));
+      expect(dom.innerHTML).toBe("<button></button><p>Event triggered!</p>");
+    });
+
+    it("should add custom event handler with state", async () => {
+      const hiddenDom = createHiddenDom();
+      const oncustom = van.state(() =>
+        van.add(hiddenDom, p("Handler 1 triggered!"))
+      );
+      van.add(hiddenDom, button({ oncustom }));
+      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"));
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Handler 1 triggered!</p>"
+      );
+
+      oncustom.val = () => van.add(hiddenDom, p("Handler 2 triggered!"));
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"));
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Handler 1 triggered!</p><p>Handler 2 triggered!</p>"
+      );
+    });
+
+    it("should add state derived custom event handler", async () => {
+      const handlerType = van.state(1);
+      const hiddenDom = createHiddenDom();
+      van.add(
+        hiddenDom,
+        button({
+          oncustom: van.derive(() =>
+            handlerType.val === 1
+              ? () => van.add(hiddenDom, p("Handler 1 triggered!"))
+              : () => van.add(hiddenDom, p("Handler 2 triggered!"))
+          ),
+        })
+      );
+      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"));
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Handler 1 triggered!</p>"
+      );
+
+      handlerType.val = 2;
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"));
+      expect(hiddenDom.innerHTML).toBe(
+        "<button></button><p>Handler 1 triggered!</p><p>Handler 2 triggered!</p>"
+      );
+    });
+
+    it("should add child as connected state", async () => {
+      const hiddenDom = createHiddenDom();
+      const line2 = van.state(<string | null>"Line 2");
+      const dom = div(pre("Line 1"), pre(line2), pre("Line 3"));
+      van.add(hiddenDom, dom);
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+
+      line2.val = "Line 2: Extra Stuff";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2: Extra Stuff</pre><pre>Line 3</pre></div>"
+      );
+
+      // null to remove text DOM
+      line2.val = null;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>"
+      );
+
+      // Resetting the state won't bring the text DOM back
+      line2.val = "Line 2";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>"
+      );
+    });
+
+    it("should not update child when state is disconnected", async () => {
+      const line2 = van.state(<string | null>"Line 2");
+      const dom = div(pre("Line 1"), pre(line2), pre("Line 3"));
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+
+      line2.val = "Line 2: Extra Stuff";
+      await sleep(waitMsForDerivations);
+      // Content won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+
+      line2.val = null;
+      await sleep(waitMsForDerivations);
+      // Content won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+    });
+
+    it("should not delete dom when child is a state", async () => {
+      const text = van.state("Text");
+      const dom = p(text);
+      van.add(createHiddenDom(), dom);
+      expect(dom.outerHTML).toBe("<p>Text</p>");
+      text.val = "";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<p></p>");
+      text.val = "Text";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<p>Text</p>");
+    });
+
+    it("should create svg elements", () => {
+      const { circle, path, svg } = van.tags("http://www.w3.org/2000/svg");
+      const dom = svg(
+        { width: "16px", viewBox: "0 0 50 50" },
+        circle({
+          cx: "25",
+          cy: "25",
+          r: "20",
+          stroke: "black",
+          "stroke-width": "2",
+          fill: "yellow",
+        }),
+        circle({
+          cx: "16",
+          cy: "20",
+          r: "2",
+          stroke: "black",
+          "stroke-width": "2",
+          fill: "black",
+        }),
+        circle({
+          cx: "34",
+          cy: "20",
+          r: "2",
+          stroke: "black",
+          "stroke-width": "2",
+          fill: "black",
+        }),
+        path({
+          d: "M 15 30 Q 25 40, 35 30",
+          stroke: "black",
+          "stroke-width": "2",
+          fill: "transparent",
+        })
+      );
+      expect(dom.outerHTML).toBe(
+        '<svg width="16px" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="yellow"></circle><circle cx="16" cy="20" r="2" stroke="black" stroke-width="2" fill="black"></circle><circle cx="34" cy="20" r="2" stroke="black" stroke-width="2" fill="black"></circle><path d="M 15 30 Q 25 40, 35 30" stroke="black" stroke-width="2" fill="transparent"></path></svg>'
+      );
+    });
+
+    it("should create math elements", () => {
+      const { math, mi, mn, mo, mrow, msup } = van.tags(
+        "http://www.w3.org/1998/Math/MathML"
+      );
+      const dom = math(
+        msup(mi("e"), mrow(mi("i"), mi("π"))),
+        mo("+"),
+        mn("1"),
+        mo("="),
+        mn("0")
+      );
+      expect(dom.outerHTML).toBe(
+        "<math><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></math>"
+      );
+    });
+  });
+
+  describe("add", () => {
+    it("should add elements to the document", () => {
+      const dom = ul();
+      expect(van.add(dom, li("Item 1"), li("Item 2"))).toBe(dom);
+      expect(dom.outerHTML).toBe("<ul><li>Item 1</li><li>Item 2</li></ul>");
+      expect(van.add(dom, li("Item 3"), li("Item 4"), li("Item 5"))).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>"
+      );
+      // No-op if no children specified
+      expect(van.add(dom)).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>"
+      );
+    });
+
+    it("should add nested elements", () => {
+      const dom = ul();
+      expect(van.add(dom, [li("Item 1"), li("Item 2")])).toBe(dom);
+      expect(dom.outerHTML).toBe("<ul><li>Item 1</li><li>Item 2</li></ul>");
+    });
+
+    it("should add deeply nested elements", () => {
+      const dom = ul();
+      van.add(dom, [li("Item 1"), li("Item 2")]);
+      // Deeply nested
+      expect(van.add(dom, [[li("Item 3"), [li("Item 4")]], li("Item 5")])).toBe(
+        dom
+      );
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>"
+      );
+    });
+
+    it("should ignore empty array", () => {
+      const dom = ul();
+      van.add(dom, [li("Item 1"), li("Item 2")]);
+      // No-op if no children specified
+      expect(van.add(dom, [[[]]])).toBe(dom);
+      expect(dom.outerHTML).toBe("<ul><li>Item 1</li><li>Item 2</li></ul>");
+    });
+
+    it("should ignore null or undefined children", () => {
+      const dom = ul();
+      expect(
+        van.add(dom, li("Item 1"), li("Item 2"), undefined, li("Item 3"), null)
+      ).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
+      );
+      expect(
+        van.add(dom, [
+          li("Item 4"),
+          li("Item 5"),
+          undefined,
+          li("Item 6"),
+          null,
+        ])
+      ).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li></ul>"
+      );
+    });
+
+    it("should ignore nested null or undefined children", () => {
+      const dom = ul();
+      van.add(dom, li("Item 1"), li("Item 2"), undefined, li("Item 3"), null);
+      van.add(dom, [li("Item 4"), li("Item 5"), undefined, li("Item 6"), null]);
+      expect(
+        van.add(dom, [
+          [undefined, li("Item 7"), null, [li("Item 8")]],
+          null,
+          li("Item 9"),
+          undefined,
+        ])
+      ).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li></ul>"
+      );
+    });
+
+    it("should add children as connected state", async () => {
+      const hiddenDom = createHiddenDom();
+      const line2 = van.state(<string | null>"Line 2");
+      expect(van.add(hiddenDom, pre("Line 1"), pre(line2), pre("Line 3"))).toBe(
+        hiddenDom
+      );
+      expect(hiddenDom.outerHTML).toBe(
+        '<div class="hidden"><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>'
+      );
+
+      line2.val = "Line 2: Extra Stuff";
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.outerHTML).toBe(
+        '<div class="hidden"><pre>Line 1</pre><pre>Line 2: Extra Stuff</pre><pre>Line 3</pre></div>'
+      );
+
+      // null to remove text DOM
+      line2.val = null;
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.outerHTML).toBe(
+        '<div class="hidden"><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>'
+      );
+
+      // Resetting the state won't bring the text DOM back
+      line2.val = "Line 2";
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.outerHTML).toBe(
+        '<div class="hidden"><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>'
+      );
+    });
+
+    it("should not change children when state is disconnected", async () => {
+      const line2 = van.state(<string | null>"Line 2");
+      const dom = div();
+      expect(van.add(dom, pre("Line 1"), pre(line2), pre("Line 3"))).toBe(dom);
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+
+      line2.val = "Line 2: Extra Stuff";
+      await sleep(waitMsForDerivations);
+      // Content won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+
+      line2.val = null;
+      await sleep(waitMsForDerivations);
+      // Content won't change as dom is not connected to document
+      expect(dom.outerHTML).toBe(
+        "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>"
+      );
+    });
+  });
+
+  describe("state", () => {
+    it("should return the correct oldVal and val", async () => {
+      const hiddenDom = createHiddenDom();
+      const s = van.state("State Version 1");
+      expect(s.val).toBe("State Version 1");
+      expect(s.oldVal).toBe("State Version 1");
+
+      // If the state object doesn't have any bindings, we directly update the `oldVal`
+      s.val = "State Version 2";
+      expect(s.val).toBe("State Version 2");
+      expect(s.oldVal).toBe("State Version 2");
+
+      van.add(hiddenDom, s);
+      // If the state object has some bindings, `oldVal` refers to its old value until DOM update completes
+      s.val = "State Version 3";
+      expect(s.val).toBe("State Version 3");
+      expect(s.oldVal).toBe("State Version 2");
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe("State Version 3");
+      expect(s.oldVal).toBe("State Version 3");
+    });
+
+    it("should not trigger derived states when rawVal is set", async () => {
+      const hiddenDom = createHiddenDom();
+      const history: number[] = [];
+      const a = van.state(3),
+        b = van.state(5);
+      const s = van.derive(() => a.rawVal! + b.val!);
+      van.derive(() => history.push(a.rawVal! + b.val!));
+
+      van.add(
+        hiddenDom,
+        input({ type: "text", value: () => a.rawVal! + b.val! }),
+        p(() => a.rawVal! + b.val!)
+      );
+
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe(8);
+      expect(history).toStrictEqual([8]);
+      expect(hiddenDom.querySelector("input")!.value).toBe("8");
+      expect(hiddenDom.querySelector("p")!.innerHTML).toBe("8");
+
+      // Changing the `val` of `a` won't trigger the derived states, side effects, state-derived
+      // properties and state-derived child nodes, as the value of `a` is accessed via `a.rawVal`.
+      ++a.val!;
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe(8);
+      expect(history).toStrictEqual([8]);
+      expect(hiddenDom.querySelector("input")!.value).toBe("8");
+      expect(hiddenDom.querySelector("p")!.innerHTML).toBe("8");
+
+      // Changing the `val` of `b` will trigger the derived states, side effects, state-derived
+      // properties and state-derived child nodes, as the value of `b` is accessed via `b.rawVal`.
+      ++b.val!;
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe(10);
+      expect(history).toStrictEqual([8, 10]);
+      expect(hiddenDom.querySelector("input")!.value).toBe("10");
+      expect(hiddenDom.querySelector("p")!.innerHTML).toBe("10");
+    });
+  });
+
+  describe("derive", () => {
+    it("should trigger callback when val changes", async () => {
+      const history: string[] = [];
+      const s = van.state("This");
+      van.derive(() => history.push(s.val!));
+      expect(history).toStrictEqual(["This"]);
+
+      s.val = "is";
+      await sleep(waitMsForDerivations);
+      expect(history).toStrictEqual(["This", "is"]);
+
+      s.val = "a";
+      await sleep(waitMsForDerivations);
+      expect(history).toStrictEqual(["This", "is", "a"]);
+
+      s.val = "test";
+      await sleep(waitMsForDerivations);
+      expect(history).toStrictEqual(["This", "is", "a", "test"]);
+
+      s.val = "test";
+      await sleep(waitMsForDerivations);
+      expect(history).toStrictEqual(["This", "is", "a", "test"]);
+
+      s.val = "test2";
+      // "Test2" won't be added into `history` as `s` will be set to "test3" immediately
+      s.val = "test3";
+      await sleep(waitMsForDerivations);
+      expect(history).toStrictEqual(["This", "is", "a", "test", "test3"]);
+    });
+
+    it("should trigger derived state callback when val changes", async () => {
+      const numItems = van.state(0);
+      const items = van.derive(() =>
+        [...Array(numItems.val).keys()].map((i) => `Item ${i + 1}`)
+      );
+      const selectedIndex = van.derive(() => (items.val, 0));
+      const selectedItem = van.derive(() => items.val![selectedIndex.val!]);
+
+      numItems.val = 3;
+      await sleep(waitMsForDerivations);
+      expect(numItems.val).toBe(3);
+      expect(items.val!.join(",")).toBe("Item 1,Item 2,Item 3");
+      expect(selectedIndex.val).toBe(0);
+      expect(selectedItem.val).toBe("Item 1");
+
+      selectedIndex.val = 2;
+      await sleep(waitMsForDerivations);
+      expect(selectedIndex.val).toBe(2);
+      expect(selectedItem.val).toBe("Item 3");
+
+      numItems.val = 5;
+      await sleep(waitMsForDerivations);
+      expect(numItems.val).toBe(5);
+      expect(items.val!.join(",")).toBe("Item 1,Item 2,Item 3,Item 4,Item 5");
+      expect(selectedIndex.val).toBe(0);
+      expect(selectedItem.val).toBe("Item 1");
+
+      selectedIndex.val = 3;
+      await sleep(waitMsForDerivations);
+      expect(selectedIndex.val).toBe(3);
+      expect(selectedItem.val).toBe("Item 4");
+    });
+
+    it("should trigger compute conditional derived state", async () => {
+      const cond = van.state(true);
+      const a = van.state(1),
+        b = van.state(2),
+        c = van.state(3),
+        d = van.state(4);
+      let numEffectTriggered = 0;
+      const sum = van.derive(
+        () => (
+          ++numEffectTriggered, cond.val ? a.val! + b.val! : c.val! + d.val!
+        )
+      );
+
+      expect(sum.val).toBe(3);
+      expect(numEffectTriggered).toBe(1);
+
+      a.val = 11;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(13);
+      expect(numEffectTriggered).toBe(2);
+
+      b.val = 12;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(23);
+      expect(numEffectTriggered).toBe(3);
+
+      // Changing c or d won't triggered the effect as they're not its current dependencies
+      c.val = 13;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(23);
+      expect(numEffectTriggered).toBe(3);
+
+      d.val = 14;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(23);
+      expect(numEffectTriggered).toBe(3);
+
+      cond.val = false;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(27);
+      expect(numEffectTriggered).toBe(4);
+
+      c.val = 23;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(37);
+      expect(numEffectTriggered).toBe(5);
+
+      d.val = 24;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(47);
+      expect(numEffectTriggered).toBe(6);
+
+      // Changing a or b won't triggered the effect as they're not its current dependencies
+      a.val = 21;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(47);
+      expect(numEffectTriggered).toBe(6);
+
+      b.val = 22;
+      await sleep(waitMsForDerivations);
+      expect(sum.val).toBe(47);
+      expect(numEffectTriggered).toBe(6);
+    });
+
+    it("should not change state when derive throws error", async () => {
+      const s0 = van.state(1);
+      const s1 = van.derive(() => s0.val! * 2);
+      const s2 = van.derive(() => {
+        if (s0.val! > 1) throw new Error();
+        return s0.val;
+      });
+      const s3 = van.derive(() => s0.val! * s0.val!);
+
+      expect(s1.val).toBe(2);
+      expect(s2.val).toBe(1);
+      expect(s3.val).toBe(1);
+
+      s0.val = 3;
+      await sleep(waitMsForDerivations);
+      // The derivation function for `s2` throws an error.
+      // We want to validate the `val` of `s2` remains the same because of the error,
+      // but other derived states are updated as usual.
+      expect(s1.val).toBe(6);
+      expect(s2.val).toBe(1);
+      expect(s3.val).toBe(9);
+    });
+
+    it("should update dom when derived state changes", async () => {
+      const hiddenDom = createHiddenDom();
+      const CheckboxCounter = () => {
+        const checked = van.state(false),
+          numChecked = van.state(0);
+        van.derive(() => {
+          if (checked.val) ++numChecked.val!;
+        });
+
+        return div(
+          input({
+            type: "checkbox",
+            checked,
+            onclick: (e) =>
+              (checked.val = ((e as Event).target as HTMLInputElement).checked),
+          }),
+          " Checked ",
+          numChecked,
+          " times. ",
+          button({ onclick: () => (numChecked.val = 0) }, "Reset")
+        );
+      };
+
+      van.add(hiddenDom, CheckboxCounter());
+
+      expect(hiddenDom.innerHTML).toBe(
+        '<div><input type="checkbox"> Checked 0 times. <button>Reset</button></div>'
+      );
+
+      hiddenDom.querySelector("input")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<div><input type="checkbox"> Checked 1 times. <button>Reset</button></div>'
+      );
+
+      hiddenDom.querySelector("input")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<div><input type="checkbox"> Checked 1 times. <button>Reset</button></div>'
+      );
+
+      hiddenDom.querySelector("input")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<div><input type="checkbox"> Checked 2 times. <button>Reset</button></div>'
+      );
+
+      hiddenDom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<div><input type="checkbox"> Checked 0 times. <button>Reset</button></div>'
+      );
+    });
+
+    it("should batch derived state updates", async () => {
+      const a = van.state(3),
+        b = van.state(5);
+      let numDerivations = 0;
+      const s = van.derive(() => {
+        ++numDerivations;
+        return a.val! + b.val!;
+      });
+
+      expect(s.val).toBe(8);
+      expect(numDerivations).toBe(1);
+
+      // Both `a` and `b` will change. `s` will only be re-derived once
+      ++a.val!, ++b.val!;
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe(10);
+      expect(numDerivations).toBe(2);
+
+      // `a` will change, and then change back. No derivation will happen
+      ++a.val!, --a.val!;
+      await sleep(waitMsForDerivations);
+      expect(s.val).toBe(10);
+      expect(numDerivations).toBe(2);
+    });
+
+    it("should batch multilayer derived state updates", async () => {
+      const hiddenDom = createHiddenDom();
+      const a = van.state(1),
+        b = van.derive(() => a.val! * a.val!);
+      const c = van.derive(() => b.val! * b.val!),
+        d = van.derive(() => c.val! * c.val!);
+
+      let numSDerived = 0,
+        numSSquaredDerived = 0;
+      const s = van.derive(() => {
+        ++numSDerived;
+        return a.val! + b.val! + c.val! + d.val!;
+      });
+
+      van.add(
+        hiddenDom,
+        "a = ",
+        a,
+        " b = ",
+        b,
+        " c = ",
+        c,
+        " d = ",
+        d,
+        " s = ",
+        s,
+        " s^2 = ",
+        () => {
+          ++numSSquaredDerived;
+          return s.val! * s.val!;
+        }
+      );
+
+      expect(hiddenDom.innerHTML).toBe(
+        "a = 1 b = 1 c = 1 d = 1 s = 4 s^2 = 16"
+      );
+      expect(numSDerived).toBe(1);
+      expect(numSSquaredDerived).toBe(1);
+
+      ++a.val!;
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        "a = 2 b = 4 c = 16 d = 256 s = 278 s^2 = 77284"
+      );
+      // `s` is derived 4 times, triggered by `a`, `b`, `c`, `d`, respectively.
+      expect(numSDerived).toBe(5);
+      // `s^2` (the `s` derived Text node), is only derived once per one DOM update cycle.
+      expect(numSSquaredDerived).toBe(2);
+    });
+
+    it("should stop updating when there is a cycle in the derivation", async () => {
+      const a = van.state(1);
+      const b = van.derive(() => a.val! + 1);
+      van.derive(() => (a.val = b.val! + 1));
+
+      // `a` and `b` are circular dependency. But derivations will stop after limited number of
+      // iterations.
+      ++a.val!;
+      await sleep(waitMsForDerivations);
+      expect(a.val).toBe(104);
+      expect(b.val).toBe(103);
+    });
+
+    it("should dynamically update dom based on derived state", async () => {
+      const hiddenDom = createHiddenDom();
+      const verticalPlacement = van.state(false);
+      const button1Text = van.state("Button 1"),
+        button2Text = van.state("Button 2"),
+        button3Text = van.state("Button 3");
+
+      const domFunc = () =>
+        verticalPlacement.val
+          ? div(
+              div(button(button1Text)),
+              div(button(button2Text)),
+              div(button(button3Text))
+            )
+          : div(button(button1Text), button(button2Text), button(button3Text));
+      expect(van.add(hiddenDom, domFunc)).toBe(hiddenDom);
+
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.outerHTML).toBe(
+        "<div><button>Button 1</button><button>Button 2</button><button>Button 3</button></div>"
+      );
+      button2Text.val = "Button 2: Extra";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>"
+      );
+
+      verticalPlacement.val = true;
+      await sleep(waitMsForDerivations);
+
+      // dom is disconnected from the document thus it won't be updated
+      expect(dom.outerHTML).toBe(
+        "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>"
+      );
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><div><button>Button 1</button></div><div><button>Button 2: Extra</button></div><div><button>Button 3</button></div></div>"
+      );
+      button2Text.val = "Button 2: Extra Extra";
+      await sleep(waitMsForDerivations);
+      // Since dom is disconnected from document, its inner button won't be reactive to state changes
+      expect(dom.outerHTML).toBe(
+        "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>"
+      );
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><div><button>Button 1</button></div><div><button>Button 2: Extra Extra</button></div><div><button>Button 3</button></div></div>"
+      );
+    });
+
+    it("should update dom based on conditional derived state", async () => {
+      const hiddenDom = createHiddenDom();
+      const cond = van.state(true);
+      const button1 = van.state("Button 1"),
+        button2 = van.state("Button 2");
+      const button3 = van.state("Button 3"),
+        button4 = van.state("Button 4");
+      let numFuncCalled = 0;
+      const domFunc = () => (
+        ++numFuncCalled,
+        cond.val
+          ? div(button(button1.val), button(button2.val))
+          : div(button(button3.val), button(button4.val))
+      );
+      expect(van.add(hiddenDom, domFunc)).toBe(hiddenDom);
+
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 1</button><button>Button 2</button></div>"
+      );
+      expect(numFuncCalled).toBe(1);
+
+      button1.val = "Button 1-1";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 1-1</button><button>Button 2</button></div>"
+      );
+      expect(numFuncCalled).toBe(2);
+
+      button2.val = "Button 2-1";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 1-1</button><button>Button 2-1</button></div>"
+      );
+      expect(numFuncCalled).toBe(3);
+
+      // Changing button3 or button4 won't triggered the effect as they're not its current dependencies
+      button3.val = "Button 3-1";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 1-1</button><button>Button 2-1</button></div>"
+      );
+      expect(numFuncCalled).toBe(3);
+
+      button4.val = "Button 4-1";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 1-1</button><button>Button 2-1</button></div>"
+      );
+      expect(numFuncCalled).toBe(3);
+
+      cond.val = false;
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 3-1</button><button>Button 4-1</button></div>"
+      );
+      expect(numFuncCalled).toBe(4);
+
+      button3.val = "Button 3-2";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 3-2</button><button>Button 4-1</button></div>"
+      );
+      expect(numFuncCalled).toBe(5);
+
+      button4.val = "Button 4-2";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 3-2</button><button>Button 4-2</button></div>"
+      );
+      expect(numFuncCalled).toBe(6);
+
+      // Changing button1 or button2 won't triggered the effect as they're not its current dependencies
+      button1.val = "Button 1-2";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 3-2</button><button>Button 4-2</button></div>"
+      );
+      expect(numFuncCalled).toBe(6);
+
+      button1.val = "Button 2-2";
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        "<div><button>Button 3-2</button><button>Button 4-2</button></div>"
+      );
+      expect(numFuncCalled).toBe(6);
+    });
+
+    it("should rearrange dom when state changes", async () => {
+      const hiddenDom = createHiddenDom();
+      const numItems = van.state(0);
+      const items = van.derive(() =>
+        [...Array(numItems.val).keys()].map((i) => `Item ${i + 1}`)
+      );
+      const selectedIndex = van.derive(() => (items.val, 0));
+
+      const domFunc = (dom?: Element) => {
+        // If items aren't changed, we don't need to regenerate the entire dom
+        if (dom && items.val === items.oldVal) {
+          const itemDoms = dom.childNodes;
+          (<Element>itemDoms[selectedIndex.oldVal!]).classList.remove(
+            "selected"
+          );
+          (<Element>itemDoms[selectedIndex.val!]).classList.add("selected");
+          return dom;
+        }
+
+        return ul(
+          items.val!.map((item: string, i: number) =>
+            li({ class: i === selectedIndex.val ? "selected" : "" }, item)
+          )
+        );
+      };
+      van.add(hiddenDom, domFunc);
+
+      numItems.val = 3;
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        '<ul><li class="selected">Item 1</li><li class="">Item 2</li><li class="">Item 3</li></ul>'
+      );
+      const rootDom1stIteration = <Element>hiddenDom.firstChild;
+
+      selectedIndex.val = 1;
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>'
+      );
+      // Items aren't changed, thus we don't need to regenerate the dom
+      expect(hiddenDom.firstChild!).toBe(rootDom1stIteration);
+
+      numItems.val = 5;
+      await sleep(waitMsForDerivations);
+      // Items are changed, thus the dom for the list is regenerated
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        '<ul><li class="selected">Item 1</li><li class="">Item 2</li><li class="">Item 3</li><li class="">Item 4</li><li class="">Item 5</li></ul>'
+      );
+      expect(hiddenDom.firstChild !== rootDom1stIteration);
+      // rootDom1stIteration is disconnected from the document and remain unchanged
+      expect(rootDom1stIteration.outerHTML).toBe(
+        '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>'
+      );
+      const rootDom2ndIteration = hiddenDom.firstChild!;
+
+      selectedIndex.val = 2;
+      await sleep(waitMsForDerivations);
+      expect((<Element>hiddenDom.firstChild).outerHTML).toBe(
+        '<ul><li class="">Item 1</li><li class="">Item 2</li><li class="selected">Item 3</li><li class="">Item 4</li><li class="">Item 5</li></ul>'
+      );
+      // Items aren't changed, thus we don't need to regenerate the dom
+      expect(hiddenDom.firstChild!).toBe(rootDom2ndIteration);
+      // rootDom1stIteration won't be updated as it has already been disconnected from the document
+      expect(rootDom1stIteration.outerHTML).toBe(
+        '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>'
+      );
+    });
+
+    it("should remove dom when it returns null", async () => {
+      const hiddenDom = createHiddenDom();
+      const line1 = van.state("Line 1"),
+        line2 = van.state("Line 2"),
+        line3 = van.state(<string | null>"Line 3"),
+        line4 = van.state(""),
+        line5 = van.state(null);
+
+      const dom = div(
+        () => (line1.val === "" ? null : p(line1.val)),
+        () => (line2.val === "" ? null : p(line2.val)),
+        p(line3),
+        // line4 won't appear in the DOM tree as its initial value is null
+        () => (line4.val === "" ? null : p(line4.val)),
+        // line5 won't appear in the DOM tree as its initial value is null
+        p(line5)
+      );
+      van.add(hiddenDom, dom);
+
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 2</p><p>Line 3</p><p></p></div>"
+      );
+      // Delete Line 2
+      line2.val = "";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 3</p><p></p></div>"
+      );
+
+      // Deleted dom won't be brought back, even the underlying state is changed back
+      line2.val = "Line 2";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 3</p><p></p></div>"
+      );
+
+      // Delete Line 3
+      line3.val = null;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div><p>Line 1</p><p></p><p></p></div>");
+
+      // Deleted dom won't be brought back, even the underlying state is changed back
+      line3.val = "Line 3";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div><p>Line 1</p><p></p><p></p></div>");
+    });
+
+    it("should remove dom when it returns undefined", async () => {
+      const hiddenDom = createHiddenDom();
+      const line1 = van.state("Line 1"),
+        line2 = van.state("Line 2"),
+        line3 = van.state(<string | undefined>"Line 3"),
+        line4 = van.state(""),
+        line5 = van.state(undefined);
+
+      const dom = div(
+        () => (line1.val === "" ? null : p(line1.val)),
+        () => (line2.val === "" ? null : p(line2.val)),
+        p(line3),
+        // line4 won't appear in the DOM tree as its initial value is null
+        () => (line4.val === "" ? null : p(line4.val)),
+        // line5 won't appear in the DOM tree as its initial value is null
+        p(line5)
+      );
+      van.add(hiddenDom, dom);
+
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 2</p><p>Line 3</p><p></p></div>"
+      );
+      // Delete Line 2
+      line2.val = "";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 3</p><p></p></div>"
+      );
+
+      // Deleted dom won't be brought back, even the underlying state is changed back
+      line2.val = "Line 2";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<div><p>Line 1</p><p>Line 3</p><p></p></div>"
+      );
+
+      // Delete Line 3
+      line3.val = undefined;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div><p>Line 1</p><p></p><p></p></div>");
+
+      // Deleted dom won't be brought back, even the underlying state is changed back
+      line3.val = "Line 3";
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div><p>Line 1</p><p></p><p></p></div>");
+    });
+
+    it("should not remove dom when it returns 0", async () => {
+      const hiddenDom = createHiddenDom();
+      const state1 = van.state(0),
+        state2 = van.state(1);
+      const dom = div(
+        state1,
+        () => 1 - state1.val!,
+        state2,
+        () => 1 - state2.val!
+      );
+      van.add(hiddenDom, dom);
+
+      expect(dom.outerHTML).toBe("<div>0110</div>");
+
+      (state1.val = 1), (state2.val = 0);
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div>1001</div>");
+    });
+
+    it("should update dom when primitive state changes", async () => {
+      const hiddenDom = createHiddenDom();
+      const a = van.state(1),
+        b = van.state(2),
+        deleted = van.state(false);
+      const dom = div(() => (deleted.val ? null : a.val! + b.val!));
+      expect(dom.outerHTML).toBe("<div>3</div>");
+      van.add(hiddenDom, dom);
+
+      a.val = 6;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div>8</div>");
+
+      b.val = 5;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div>11</div>");
+
+      deleted.val = true;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div></div>");
+
+      // Deleted dom won't be brought back, even the underlying state is changed back
+      deleted.val = false;
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe("<div></div>");
+    });
+
+    it("should not update when state is not connected", async () => {
+      const hiddenDom = createHiddenDom();
+      const part1 = "👋Hello ",
+        part2 = van.state("🗺️World");
+
+      expect(
+        van.add(
+          hiddenDom,
+          () => `${part1}${part2.val}, from: ${part1}${part2.oldVal}`
+        )
+      ).toBe(hiddenDom);
+
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.textContent!).toBe("👋Hello 🗺️World, from: 👋Hello 🗺️World");
+      expect(hiddenDom.innerHTML).toBe(
+        "👋Hello 🗺️World, from: 👋Hello 🗺️World"
+      );
+
+      part2.val = "🍦VanJS";
+      await sleep(waitMsForDerivations);
+
+      // dom is disconnected from the document thus it won't be updated
+      expect(dom.textContent!).toBe("👋Hello 🗺️World, from: 👋Hello 🗺️World");
+      expect(hiddenDom.innerHTML).toBe(
+        "👋Hello 🍦VanJS, from: 👋Hello 🗺️World"
+      );
+    });
+
+    it("should not update dom when oldVal is referenced", async () => {
+      const hiddenDom = createHiddenDom();
+      const text = van.state("Old Text");
+
+      expect(
+        van.add(hiddenDom, () => `From: "${text.oldVal}" to: "${text.val}"`)
+      ).toBe(hiddenDom);
+
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.textContent!).toBe('From: "Old Text" to: "Old Text"');
+      expect(hiddenDom.innerHTML).toBe('From: "Old Text" to: "Old Text"');
+
+      text.val = "New Text";
+      await sleep(waitMsForDerivations);
+
+      // dom is disconnected from the document thus it won't be updated
+      expect(dom.textContent).toBe('From: "Old Text" to: "Old Text"');
+      expect(hiddenDom.innerHTML).toBe('From: "Old Text" to: "New Text"');
+    });
+
+    it("should not update when state derived children throws error", async () => {
+      const hiddenDom = createHiddenDom();
+      const num = van.state(0);
+
+      expect(
+        van.add(
+          hiddenDom,
+          num,
+          () => {
+            if (num.val! > 0) throw new Error();
+            return span("ok");
+          },
+          num
+        )
+      ).toBe(hiddenDom);
+
+      expect(hiddenDom.innerHTML).toBe("0<span>ok</span>0");
+
+      num.val = 1;
+      await sleep(waitMsForDerivations);
+      // The binding function 2nd child of hiddenDom throws an error.
+      // We want to validate the 2nd child won't be updated because of the error,
+      // but other DOM nodes are updated as usual
+      expect(hiddenDom.innerHTML).toBe("1<span>ok</span>1");
+    });
+  });
+
+  describe("hydrate", () => {
+    it("should hydrate the given dom with the provided state", async () => {
+      const hiddenDom = createHiddenDom();
+      const Counter = (init: number) => {
+        const counter = van.state(init);
+        return button(
+          { "data-counter": counter, onclick: () => ++counter.val! },
+          () => `Count: ${counter.val}`
+        );
+      };
+      // Static DOM before hydration
+      hiddenDom.innerHTML = Counter(5).outerHTML;
+
+      // Before hydration, the counter is not reactive
+      hiddenDom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<button data-counter="5">Count: 5</button>'
+      );
+
+      van.hydrate(hiddenDom.querySelector("button")!, (dom: HTMLElement) =>
+        Counter(Number(dom.getAttribute("data-counter")))
+      );
+
+      // After hydration, the counter is reactive
+      hiddenDom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<button data-counter="6">Count: 6</button>'
+      );
+    });
+
+    it("should remove dom when it returns null", async () => {
+      const hiddenDom = createHiddenDom();
+      // Remove the DOM node upon hydration
+      van.add(hiddenDom, div());
+      van.hydrate(hiddenDom.querySelector("div")!, () => null);
+      expect(hiddenDom.innerHTML).toBe("");
+
+      // Remove the DOM node after the state update
+      van.add(hiddenDom, div());
+      const s = van.state(1);
+      van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () =>
+        s.val === 1 ? pre() : null
+      );
+      expect(hiddenDom.innerHTML).toBe("<pre></pre>");
+      s.val = 2;
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe("");
+    });
+
+    it("should remove dom when it returns undefined", async () => {
+      const hiddenDom = createHiddenDom();
+      // Remove the DOM node upon hydration
+      van.add(hiddenDom, div());
+      van.hydrate(hiddenDom.querySelector("div")!, () => undefined);
+      expect(hiddenDom.innerHTML).toBe("");
+
+      // Remove the DOM node after the state update
+      van.add(hiddenDom, div());
+      const s = van.state(1);
+      van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () =>
+        s.val === 1 ? pre() : undefined
+      );
+      expect(hiddenDom.innerHTML).toBe("<pre></pre>");
+      s.val = 2;
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe("");
+    });
+
+    it("should not remove dom when it returns 0", async () => {
+      const hiddenDom = createHiddenDom();
+      van.add(hiddenDom, div(), div());
+
+      const s = van.state(0);
+      const [dom1, dom2] = hiddenDom.querySelectorAll("div");
+
+      van.hydrate(dom1, <any>(() => s.val));
+      van.hydrate(dom2, <any>(() => 1 - s.val!));
+      expect(hiddenDom.innerHTML).toBe("01");
+
+      s.val = 1;
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe("10");
+    });
+  });
+
+  describe("gc", () => {
+    it("should bind basic state and derived state", async () => {
+      const hiddenDom = createHiddenDom();
+      const counter = van.state(0);
+      const bindingsPropKey = Object.entries(counter).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+
+      van.add(hiddenDom, () => span(`Counter: ${counter.val}`));
+
+      for (let i = 0; i < 100; ++i) ++counter.val!;
+      await sleep(waitMsForDerivations);
+
+      expect(hiddenDom.innerHTML).toBe("<span>Counter: 100</span>");
+      expect(Object(counter)[bindingsPropKey]).toHaveLength(2);
+    });
+
+    it("should clean up nested bindings", async () => {
+      const hiddenDom = createHiddenDom();
+      const renderPre = van.state(false),
+        text = van.state("Text");
+      const bindingsPropKey = Object.entries(renderPre).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+      const dom = div(() =>
+        (renderPre.val ? pre : div)(() => `--${text.val}--`)
+      );
+      van.add(hiddenDom, dom);
+
+      for (let i = 0; i < 20; ++i) {
+        renderPre.val = !renderPre.val;
+        await sleep(waitMsForDerivations);
+      }
+
+      // Wait until GC kicks in
+      await sleep(1000);
+
+      expect(Object(renderPre)[bindingsPropKey]).toHaveLength(1);
+      expect(Object(text)[bindingsPropKey]).toHaveLength(1);
+    });
+
+    it("should clean up conditional bindings", async () => {
+      const hiddenDom = createHiddenDom();
+      const cond = van.state(true);
+      const a = van.state(0),
+        b = van.state(0),
+        c = van.state(0),
+        d = van.state(0);
+      const bindingsPropKey = Object.entries(cond).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+      const dom = div(() => (cond.val ? a.val! + b.val! : c.val! + d.val!));
+      van.add(hiddenDom, dom);
+
+      const allStates: State<number | boolean>[] = [cond, a, b, c, d];
+      for (let i = 0; i < 100; ++i) {
+        const randomState =
+          allStates[Math.floor(Math.random() * allStates.length)];
+        if (randomState === cond) randomState.val = !randomState.val;
+        else ++(<State<number>>randomState).val!;
+        await sleep(waitMsForDerivations);
+      }
+
+      allStates.every((s) => {
+        expect(Object(s)[bindingsPropKey].length).toBeGreaterThanOrEqual(1);
+        expect(Object(s)[bindingsPropKey].length).toBeLessThanOrEqual(15);
+      });
+
+      // Wait until GC kicks in
+      await sleep(1000);
+      allStates.every((s) =>
+        expect(Object(s)[bindingsPropKey]).toHaveLength(1)
+      );
+    });
+
+    it("should correctly call derived state function", async () => {
+      const history: any[] = [];
+      const a = van.state(0);
+      const listenersPropKey = Object.entries(a).filter(([_, v]) =>
+        Array.isArray(v)
+      )[1][0];
+
+      van.derive(() => history.push(a.val));
+
+      for (let i = 0; i < 100; ++i) {
+        ++a.val!;
+        await sleep(waitMsForDerivations);
+      }
+
+      expect(history.length).toBe(101);
+      expect(Object(a)[listenersPropKey]).toHaveLength(2);
+    });
+
+    it("should clean up derived state function", async () => {
+      const hiddenDom = createHiddenDom();
+      const renderPre = van.state(false),
+        prefix = van.state("Prefix");
+      const bindingsPropKey = Object.entries(renderPre).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+      const listenersPropKey = Object.entries(renderPre).filter(([_, v]) =>
+        Array.isArray(v)
+      )[1][0];
+      const dom = div(() => {
+        const text = van.derive(() => `${prefix.val} - Suffix`);
+        return (renderPre.val ? pre : div)(() => `--${text.val}--`);
+      });
+      van.add(hiddenDom, dom);
+
+      for (let i = 0; i < 20; ++i) {
+        renderPre.val = !renderPre.val;
+        await sleep(waitMsForDerivations);
+      }
+
+      // Wait until GC kicks in
+      await sleep(1000);
+
+      expect(Object(renderPre)[bindingsPropKey]).toHaveLength(1);
+      expect(Object(prefix)[listenersPropKey]).toHaveLength(1);
+    });
+
+    it("should clean up derived state in props", async () => {
+      const hiddenDom = createHiddenDom();
+      const renderPre = van.state(false),
+        class1 = van.state(true);
+      const bindingsPropKey = Object.entries(renderPre).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+      const listenersPropKey = Object.entries(renderPre).filter(([_, v]) =>
+        Array.isArray(v)
+      )[1][0];
+      const dom = div(() =>
+        (renderPre.val ? pre : div)(
+          { class: () => (class1.val ? "class1" : "class2") },
+          "Text"
+        )
+      );
+      van.add(hiddenDom, dom);
+
+      for (let i = 0; i < 20; ++i) {
+        renderPre.val = !renderPre.val;
+        await sleep(waitMsForDerivations);
+      }
+
+      // Wait until GC kicks in
+      await sleep(1000);
+
+      expect(Object(renderPre)[bindingsPropKey]).toHaveLength(1);
+      expect(Object(class1)[listenersPropKey]).toHaveLength(1);
+    });
+
+    it("should clean up derived state as event handler", async () => {
+      const hiddenDom = createHiddenDom();
+      const renderPre = van.state(false),
+        handlerType = van.state(1);
+      const bindingsPropKey = Object.entries(renderPre).find(([_, v]) =>
+        Array.isArray(v)
+      )![0];
+      const listenersPropKey = Object.entries(renderPre).filter(([_, v]) =>
+        Array.isArray(v)
+      )[1][0];
+      const dom = div(() =>
+        (renderPre.val ? pre : div)(
+          button({
+            oncustom: van.derive(() =>
+              handlerType.val === 1
+                ? () => van.add(hiddenDom, p("Handler 1 triggered!"))
+                : () => van.add(hiddenDom, p("Handler 2 triggered!"))
+            ),
+          })
+        )
+      );
+      van.add(hiddenDom, dom);
+
+      for (let i = 0; i < 20; ++i) {
+        renderPre.val = !renderPre.val;
+        await sleep(waitMsForDerivations);
+      }
+
+      // Wait until GC kicks in
+      await sleep(1000);
+
+      expect(Object(renderPre)[bindingsPropKey]).toHaveLength(1);
+      expect(Object(handlerType)[listenersPropKey]).toHaveLength(1);
+    });
+
+    it("should clean up conditionally derived states", async () => {
+      const cond = van.state(true);
+      const a = van.state(0),
+        b = van.state(0),
+        c = van.state(0),
+        d = van.state(0);
+      const listenersPropKey = Object.entries(a).filter(([_, v]) =>
+        Array.isArray(v)
+      )[1][0];
+      van.derive(() => (cond.val ? a.val! + b.val! : c.val! + d.val!));
+
+      const allStates: State<number | boolean>[] = [cond, a, b, c, d];
+      for (let i = 0; i < 100; ++i) {
+        const randomState =
+          allStates[Math.floor(Math.random() * allStates.length)];
+        if (randomState === cond) randomState.val = !randomState.val;
+        else ++(<State<number>>randomState).val!;
+      }
+
+      allStates.every((s) => {
+        expect(Object(s)[listenersPropKey].length).toBeGreaterThanOrEqual(1);
+        expect(Object(s)[listenersPropKey].length).toBeLessThanOrEqual(10);
+      });
+
+      // Wait until GC kicks in
+      await sleep(1000);
+      allStates.every((s) => {
+        expect(Object(s)[listenersPropKey].length).toBeGreaterThanOrEqual(1);
+        expect(Object(s)[listenersPropKey].length).toBeLessThanOrEqual(4);
+      });
+    });
+  });
+
+  describe("e2e", () => {
+    it("should render Counter and update dom accordingly", async () => {
+      const hiddenDom = createHiddenDom();
+      const Counter = () => {
+        const counter = van.state(0);
+        return div(
+          div("❤️: ", counter),
+          button({ onclick: () => ++counter.val! }, "👍"),
+          button({ onclick: () => --counter.val! }, "👎")
+        );
+      };
+
+      van.add(hiddenDom, Counter());
+
+      expect(
+        (<Element>hiddenDom.firstChild).querySelector("div")!.innerHTML
+      ).toBe("❤️: 0");
+
+      const [incrementBtn, decrementBtn] =
+        hiddenDom.getElementsByTagName("button");
+
+      incrementBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(
+        (<Element>hiddenDom.firstChild).querySelector("div")!.innerHTML
+      ).toBe("❤️: 1");
+
+      incrementBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(
+        (<Element>hiddenDom.firstChild).querySelector("div")!.innerHTML
+      ).toBe("❤️: 2");
+
+      decrementBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(
+        (<Element>hiddenDom.firstChild).querySelector("div")!.innerHTML
+      ).toBe("❤️: 1");
+    });
+
+    it("should render ul li", () => {
+      const List = ({ items }: { items: string[] }) =>
+        ul(items.map((it: any) => li(it)));
+      expect(List({ items: ["Item 1", "Item 2", "Item 3"] }).outerHTML).toBe(
+        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
+      );
+    });
+
+    it("should render table", () => {
+      const Table = ({
+        head,
+        data,
+      }: {
+        head?: readonly string[];
+        data: readonly (string | number)[][];
+      }) =>
+        table(
+          head ? thead(tr(head.map((h) => th(h)))) : [],
+          tbody(data.map((row) => tr(row.map((col) => td(col)))))
+        );
+
+      expect(
+        Table({
+          head: ["ID", "Name", "Country"],
+          data: [
+            [1, "John Doe", "US"],
+            [2, "Jane Smith", "CA"],
+            [3, "Bob Johnson", "AU"],
+          ],
+        }).outerHTML
+      ).toBe(
+        "<table><thead><tr><th>ID</th><th>Name</th><th>Country</th></tr></thead><tbody><tr><td>1</td><td>John Doe</td><td>US</td></tr><tr><td>2</td><td>Jane Smith</td><td>CA</td></tr><tr><td>3</td><td>Bob Johnson</td><td>AU</td></tr></tbody></table>"
+      );
+
+      expect(
+        Table({
+          data: [
+            [1, "John Doe", "US"],
+            [2, "Jane Smith", "CA"],
+          ],
+        }).outerHTML
+      ).toBe(
+        "<table><tbody><tr><td>1</td><td>John Doe</td><td>US</td></tr><tr><td>2</td><td>Jane Smith</td><td>CA</td></tr></tbody></table>"
+      );
+    });
+
+    it("should render and update dom after changing state", async () => {
+      const hiddenDom = createHiddenDom();
+      // Create a new state object with init value 1
+      const counter = van.state(1);
+
+      // Log whenever the value of the state is updated
+      van.derive(() => console.log(`Counter: ${counter.val}`));
+
+      // Derived state
+      const counterSquared = van.derive(() => counter.val! * counter.val!);
+
+      // Used as a child node
+      const dom1 = div(counter);
+
+      // Used as a property
+      const dom2 = input({ type: "number", value: counter, disabled: true });
+
+      // Used in a state-derived property
+      const dom3 = div({ style: () => `font-size: ${counter.val}em;` }, "Text");
+
+      // Used in a state-derived child
+      const dom4 = div(counter, sup(2), () => ` = ${counterSquared.val}`);
+
+      // Button to increment the value of the state
+      const incrementBtn = button(
+        { onclick: () => ++counter.val! },
+        "Increment"
+      );
+      const resetBtn = button({ onclick: () => (counter.val = 1) }, "Reset");
+
+      van.add(hiddenDom, incrementBtn, resetBtn, dom1, dom2, dom3, dom4);
+
+      expect(hiddenDom.innerHTML).toBe(
+        '<button>Increment</button><button>Reset</button><div>1</div><input type="number" disabled=""><div style="font-size: 1em;">Text</div><div>1<sup>2</sup> = 1</div>'
+      );
+      expect(dom2.value).toBe("1");
+
+      incrementBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<button>Increment</button><button>Reset</button><div>2</div><input type="number" disabled=""><div style="font-size: 2em;">Text</div><div>2<sup>2</sup> = 4</div>'
+      );
+      expect(dom2.value).toBe("2");
+
+      incrementBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<button>Increment</button><button>Reset</button><div>3</div><input type="number" disabled=""><div style="font-size: 3em;">Text</div><div>3<sup>2</sup> = 9</div>'
+      );
+      expect(dom2.value).toBe("3");
+
+      resetBtn.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<button>Increment</button><button>Reset</button><div>1</div><input type="number" disabled=""><div style="font-size: 1em;">Text</div><div>1<sup>2</sup> = 1</div>'
+      );
+      expect(dom2.value).toBe("1");
+    });
+
+    it("should update dom based on derived state", async () => {
+      const hiddenDom = createHiddenDom();
+      const DerivedState = () => {
+        const text = van.state("VanJS");
+        const length = van.derive(() => text.val!.length);
+        return span(
+          "The length of ",
+          input({
+            type: "text",
+            value: text,
+            oninput: (e: any) => (text.val = e.target.value),
+          }),
+          " is ",
+          length,
+          "."
+        );
+      };
+
+      van.add(hiddenDom, DerivedState());
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.outerHTML).toBe(
+        '<span>The length of <input type="text"> is 5.</span>'
+      );
+
+      const inputDom = dom.querySelector("input")!;
+      inputDom.value = "Mini-Van";
+      inputDom.dispatchEvent(new Event("input"));
+
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        '<span>The length of <input type="text"> is 8.</span>'
+      );
+    });
+
+    it("should update props based on state", async () => {
+      const hiddenDom = createHiddenDom();
+      const ConnectedProps = () => {
+        const text = van.state("");
+        return span(
+          input({
+            type: "text",
+            value: text,
+            oninput: (e: any) => (text.val = e.target.value),
+          }),
+          input({
+            type: "text",
+            value: text,
+            oninput: (e: any) => (text.val = e.target.value),
+          })
+        );
+      };
+      van.add(hiddenDom, ConnectedProps());
+
+      const [input1, input2] = hiddenDom.querySelectorAll("input");
+      input1.value += "123";
+      input1.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect(input1.value).toBe("123");
+      expect(input2.value).toBe("123");
+
+      input2.value += "abc";
+      input2.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect(input1.value).toBe("123abc");
+      expect(input2.value).toBe("123abc");
+    });
+
+    it("should update css based on state", async () => {
+      const hiddenDom = createHiddenDom();
+      const FontPreview = () => {
+        const size = van.state(16),
+          color = van.state("black");
+        return span(
+          "Size: ",
+          input({
+            type: "range",
+            min: 10,
+            max: 36,
+            value: size,
+            oninput: (e: any) =>
+              (size.val = Number((<HTMLInputElement>e.target).value)),
+          }),
+          " Color: ",
+          select(
+            {
+              oninput: (e: any) =>
+                (color.val = (<HTMLInputElement>e.target).value),
+              value: color,
+            },
+            ["black", "blue", "green", "red", "brown"].map((c) =>
+              option({ value: c }, c)
+            )
+          ),
+          span(
+            {
+              class: "preview",
+              style: () => `font-size: ${size.val}px; color: ${color.val};`,
+            },
+            " Hello 🍦VanJS"
+          )
+        );
+      };
+      van.add(hiddenDom, FontPreview());
+      expect((<any>hiddenDom.querySelector("span.preview")).style.cssText).toBe(
+        "font-size: 16px; color: black;"
+      );
+
+      hiddenDom.querySelector("input")!.value = "20";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect((<any>hiddenDom.querySelector("span.preview")).style.cssText).toBe(
+        "font-size: 20px; color: black;"
+      );
+
+      hiddenDom.querySelector("select")!.value = "blue";
+      hiddenDom.querySelector("select")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect((<any>hiddenDom.querySelector("span.preview")).style.cssText).toBe(
+        "font-size: 20px; color: blue;"
+      );
+    });
+
+    it("should bind event listener based on derived state", async () => {
+      const hiddenDom = createHiddenDom();
+      const Counter = () => {
+        const counter = van.state(0);
+        const action = van.state("👍");
+        return span(
+          "❤️ ",
+          counter,
+          " ",
+          select(
+            {
+              oninput: (e: any) => (action.val = e.target.value),
+              value: action,
+            },
+            option({ value: "👍" }, "👍"),
+            option({ value: "👎" }, "👎")
+          ),
+          " ",
+          button(
+            {
+              onclick: van.derive(() =>
+                action.val === "👍"
+                  ? () => ++counter.val!
+                  : () => --counter.val!
+              ),
+            },
+            "Run"
+          )
+        );
+      };
+
+      van.add(hiddenDom, Counter());
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.outerHTML).toBe(
+        '<span>❤️ 0 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>'
+      );
+
+      dom.querySelector("button")!.click();
+      dom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        '<span>❤️ 2 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>'
+      );
+
+      dom.querySelector("select")!.value = "👎";
+      dom.querySelector("select")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      dom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        '<span>❤️ 1 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>'
+      );
+    });
+
+    it("should render nested ul li", async () => {
+      const hiddenDom = createHiddenDom();
+      const SortedList = () => {
+        const items = van.state("a,b,c"),
+          sortedBy = van.state("Ascending");
+        return span(
+          "Comma-separated list: ",
+          input({
+            oninput: (e: any) =>
+              (items.val = (<HTMLInputElement>e.target).value),
+            type: "text",
+            value: items,
+          }),
+          " ",
+          select(
+            {
+              oninput: (e: any) =>
+                (sortedBy.val = (<HTMLInputElement>e.target).value),
+              value: sortedBy,
+            },
+            option({ value: "Ascending" }, "Ascending"),
+            option({ value: "Descending" }, "Descending")
+          ),
+          // A State-derived child node
+          () =>
+            sortedBy.val === "Ascending"
+              ? ul(
+                  items
+                    .val!.split(",")
+                    .sort()
+                    .map((i) => li(i))
+                )
+              : ul(
+                  items
+                    .val!.split(",")
+                    .sort()
+                    .reverse()
+                    .map((i) => li(i))
+                )
+        );
+      };
+      van.add(hiddenDom, SortedList());
+
+      hiddenDom.querySelector("input")!.value = "a,b,c,d";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.querySelector("ul")!.outerHTML).toBe(
+        "<ul><li>a</li><li>b</li><li>c</li><li>d</li></ul>"
+      );
+
+      hiddenDom.querySelector("select")!.value = "Descending";
+      hiddenDom.querySelector("select")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.querySelector("ul")!.outerHTML).toBe(
+        "<ul><li>d</li><li>c</li><li>b</li><li>a</li></ul>"
+      );
+    });
+
+    it("should render editable ul li", async () => {
+      const hiddenDom = createHiddenDom();
+      const ListItem = ({ text }: { text: string }) => {
+        const deleted = van.state(false);
+        return () =>
+          deleted.val
+            ? null
+            : li(text, a({ onclick: () => (deleted.val = true) }, "❌"));
+      };
+
+      const EditableList = () => {
+        const listDom = ul();
+        const textDom = input({ type: "text" });
+        return div(
+          textDom,
+          " ",
+          button(
+            {
+              onclick: () =>
+                van.add(listDom, ListItem({ text: textDom.value })),
+            },
+            "➕"
+          ),
+          listDom
+        );
+      };
+      van.add(hiddenDom, EditableList());
+
+      hiddenDom.querySelector("input")!.value = "abc";
+      hiddenDom.querySelector("button")!.click();
+      hiddenDom.querySelector("input")!.value = "123";
+      hiddenDom.querySelector("button")!.click();
+      hiddenDom.querySelector("input")!.value = "def";
+      hiddenDom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.querySelector("ul")!.outerHTML).toBe(
+        "<ul><li>abc<a>❌</a></li><li>123<a>❌</a></li><li>def<a>❌</a></li></ul>"
+      );
+
+      {
+        [...hiddenDom.querySelectorAll("li")]
+          .find((e) => e.innerHTML.startsWith("123"))!
+          .querySelector("a")!
+          .click();
+        await sleep(waitMsForDerivations);
+        expect(hiddenDom.querySelector("ul")!.outerHTML).toBe(
+          "<ul><li>abc<a>❌</a></li><li>def<a>❌</a></li></ul>"
+        );
+      }
+      {
+        [...hiddenDom.querySelectorAll("li")]
+          .find((e) => e.innerHTML.startsWith("abc"))!
+          .querySelector("a")!
+          .click();
+        await sleep(waitMsForDerivations);
+        expect(hiddenDom.querySelector("ul")!.outerHTML).toBe(
+          "<ul><li>def<a>❌</a></li></ul>"
+        );
+      }
+      {
+        [...hiddenDom.querySelectorAll("li")]
+          .find((e) => e.innerHTML.startsWith("def"))!
+          .querySelector("a")!
+          .click();
+        await sleep(waitMsForDerivations);
+        expect(hiddenDom.querySelector("ul")!.outerHTML).toBe("<ul></ul>");
+      }
+    });
+
+    it("should update dom based on polymorphic state", async () => {
+      const stateProto = Object.getPrototypeOf(van.state());
+      const hiddenDom = createHiddenDom();
+      let numYellowButtonClicked = 0;
+
+      const val = <T>(v: T | State<T> | (() => T)) => {
+        const protoOfV = Object.getPrototypeOf(v ?? 0);
+        if (protoOfV === stateProto) return (<State<T>>v).val;
+        if (protoOfV === Function.prototype) return (<() => T>v)();
+        return <T>v;
+      };
+
+      const Button = ({
+        color,
+        text,
+        onclick,
+      }: {
+        color: State<string> | string | (() => string);
+        text: State<string> | string;
+        onclick: State<() => void> | (() => void);
+      }) =>
+        button(
+          { style: () => `background-color: ${val(color)};`, onclick },
+          text
+        );
+
+      const App = () => {
+        const colorState = van.state("green");
+        const textState = van.state("Turn Red");
+
+        const turnRed = () => {
+          colorState.val = "red";
+          textState.val = "Turn Green";
+          onclickState.val = turnGreen;
+        };
+        const turnGreen = () => {
+          colorState.val = "green";
+          textState.val = "Turn Red";
+          onclickState.val = turnRed;
+        };
+        const onclickState = van.state(turnRed);
+
+        const lightness = van.state(255);
+
+        return span(
+          Button({
+            color: "yellow",
+            text: "Click Me",
+            onclick: () => ++numYellowButtonClicked,
+          }),
+          " ",
+          Button({ color: colorState, text: textState, onclick: onclickState }),
+          " ",
+          Button({
+            color: () =>
+              `rgb(${lightness.val}, ${lightness.val}, ${lightness.val})`,
+            text: "Get Darker",
+            onclick: () => (lightness.val = Math.max(lightness.val! - 10, 0)),
+          })
+        );
+      };
+
+      van.add(hiddenDom, App());
+
+      expect(hiddenDom.innerHTML).toBe(
+        '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>'
+      );
+      const [button1, button2, button3] = hiddenDom.querySelectorAll("button");
+
+      button1.click();
+      expect(numYellowButtonClicked).toBe(1);
+      button1.click();
+      expect(numYellowButtonClicked).toBe(2);
+
+      button2.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: red;">Turn Green</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>'
+      );
+      button2.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>'
+      );
+
+      button3.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(245, 245, 245);">Get Darker</button></span>'
+      );
+      button3.click();
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(235, 235, 235);">Get Darker</button></span>'
+      );
+    });
+
+    it("should update dom based on state", async () => {
+      const hiddenDom = createHiddenDom();
+      const TurnBold = () => {
+        const vanJS = van.state(<any>"VanJS");
+        return span(
+          button({ onclick: () => (vanJS.val = b("VanJS")) }, "Turn Bold"),
+          " Welcome to ",
+          vanJS,
+          ". ",
+          vanJS,
+          " is awesome!"
+        );
+      };
+
+      van.add(hiddenDom, TurnBold());
+      const dom = <Element>hiddenDom.firstChild;
+      expect(dom.outerHTML).toBe(
+        "<span><button>Turn Bold</button> Welcome to VanJS. VanJS is awesome!</span>"
+      );
+
+      dom.querySelector("button")!.click();
+      await sleep(waitMsForDerivations);
+      expect(dom.outerHTML).toBe(
+        "<span><button>Turn Bold</button> Welcome to . <b>VanJS</b> is awesome!</span>"
+      );
+    });
+
+    it("should batch updates", async () => {
+      const hiddenDom = createHiddenDom();
+      const name = van.state("");
+
+      const Name1 = () => {
+        const numRendered = van.state(0);
+        return div(() => {
+          ++numRendered.val!;
+          return name.val!.trim().length === 0
+            ? p("Please enter your name")
+            : p("Hello ", b(name));
+        }, p(i("The <p> element has been rendered ", numRendered, " time(s).")));
+      };
+
+      const Name2 = () => {
+        const numRendered = van.state(0);
+        const isNameEmpty = van.derive(() => name.val!.trim().length === 0);
+        return div(() => {
+          ++numRendered.val!;
+          return isNameEmpty.val
+            ? p("Please enter your name")
+            : p("Hello ", b(name));
+        }, p(i("The <p> element has been rendered ", numRendered, " time(s).")));
+      };
+
+      van.add(
+        hiddenDom,
+        p(
+          "Your name is: ",
+          input({
+            type: "text",
+            value: name,
+            oninput: (e: any) => (name.val = e.target.value),
+          })
+        ),
+        Name1(),
+        Name2()
+      );
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<p>Your name is: <input type="text"></p><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 1 time(s).</i></p></div><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 1 time(s).</i></p></div>'
+      );
+
+      hiddenDom.querySelector("input")!.value = "T";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("input")!.value = "Ta";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("input")!.value = "Tao";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<p>Your name is: <input type="text"></p><div><p>Hello <b>Tao</b></p><p><i>The &lt;p&gt; element has been rendered 4 time(s).</i></p></div><div><p>Hello <b>Tao</b></p><p><i>The &lt;p&gt; element has been rendered 2 time(s).</i></p></div>'
+      );
+
+      hiddenDom.querySelector("input")!.value = "";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations * 2);
+      expect(hiddenDom.innerHTML).toBe(
+        '<p>Your name is: <input type="text"></p><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 5 time(s).</i></p></div><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 3 time(s).</i></p></div>'
+      );
+
+      hiddenDom.querySelector("input")!.value = "X";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("input")!.value = "Xi";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      hiddenDom.querySelector("input")!.value = "Xin";
+      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+
+      await sleep(waitMsForDerivations);
+      expect(hiddenDom.innerHTML).toBe(
+        '<p>Your name is: <input type="text"></p><div><p>Hello <b>Xin</b></p><p><i>The &lt;p&gt; element has been rendered 8 time(s).</i></p></div><div><p>Hello <b>Xin</b></p><p><i>The &lt;p&gt; element has been rendered 4 time(s).</i></p></div>'
+      );
+    });
+
+    it("should hydrate the given element", async () => {
+      const stateProto = Object.getPrototypeOf(van.state());
+
+      const val = <T>(v: T | State<T>) =>
+        Object.getPrototypeOf(v ?? 0) === stateProto ? (<State<T>>v).val : <T>v;
+
+      const hiddenDom = createHiddenDom();
+      const counterInit = 5;
+
+      const Counter = ({
+        id,
+        init = 0,
+        buttonStyle = "👍👎",
+      }: {
+        id?: string;
+        init?: number;
+        buttonStyle?: string | State<string>;
+      }) => {
+        const { button, div } = van.tags;
+
+        const [up, down] = [...Object(val(buttonStyle))];
+        const counter = van.state(init);
+        return div(
+          { ...(id ? { id } : {}), "data-counter": counter },
+          "❤️ ",
+          counter,
+          " ",
+          button({ onclick: () => ++counter.val! }, up),
+          button({ onclick: () => --counter.val! }, down)
+        );
+      };
+      const selectDom = select(
+        { value: "👆👇" },
+        option("👆👇"),
+        option("👍👎"),
+        option("🔼🔽"),
+        option("⏫⏬"),
+        option("📈📉")
+      );
+      const buttonStyle = van.state(selectDom.value);
+      selectDom.oninput = (e) =>
+        (buttonStyle.val = (<HTMLSelectElement>e!.target).value);
+      // Static DOM before hydration
+      hiddenDom.innerHTML = div(
+        h2("Basic Counter"),
+        Counter({ init: counterInit }),
+        h2("Styled Counter"),
+        p("Select the button style: ", selectDom),
+        Counter({ init: counterInit, buttonStyle })
+      ).innerHTML;
+
+      const clickBtns = async (
+        dom: HTMLElement,
+        numUp: number,
+        numDown: number
+      ) => {
+        const [upBtn, downBtn] = [...dom.querySelectorAll("button")];
+        for (let i = 0; i < numUp; ++i) {
+          upBtn.click();
+          await sleep(waitMsForDerivations);
+        }
+        for (let i = 0; i < numDown; ++i) {
+          downBtn.click();
+          await sleep(waitMsForDerivations);
+        }
+      };
+
+      const counterHTML = (counter: number, buttonStyle: string) => {
+        const [up, down] = [...buttonStyle];
+        return div(
+          { "data-counter": counter },
+          "❤️ ",
+          counter,
+          " ",
+          button(up),
+          button(down)
+        ).innerHTML;
+      };
+
+      // Before hydration, counters are not reactive
+      let [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      await clickBtns(basicCounter, 3, 1);
+      await clickBtns(styledCounter, 2, 5);
+      [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      expect(basicCounter.innerHTML).toBe(counterHTML(5, "👍👎"));
+      expect(styledCounter.innerHTML).toBe(counterHTML(5, "👆👇"));
+
+      // Selecting a new button style won't change the actual buttons
+      selectDom.value = "🔼🔽";
+      selectDom.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      expect(styledCounter.innerHTML).toBe(counterHTML(5, "👆👇"));
+      selectDom.value = "👆👇";
+      selectDom.dispatchEvent(new Event("input"));
+
+      van.hydrate(basicCounter, (dom) =>
+        Counter({
+          id: "basic-counter",
+          init: Number(dom.getAttribute("data-counter")),
+        })
+      );
+      van.hydrate(styledCounter, (dom) =>
+        Counter({
+          id: "styled-counter",
+          init: Number(dom.getAttribute("data-counter")),
+          buttonStyle: buttonStyle,
+        })
+      );
+
+      // After hydration, counters are reactive
+      [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      await clickBtns(basicCounter, 3, 1);
+      await clickBtns(styledCounter, 2, 5);
+      [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      expect(basicCounter.innerHTML).toBe(counterHTML(7, "👍👎"));
+      expect(styledCounter.innerHTML).toBe(counterHTML(2, "👆👇"));
+
+      // Selecting a new button style will change the actual buttons
+      const prevStyledCounter = styledCounter;
+      selectDom.value = "🔼🔽";
+      selectDom.dispatchEvent(new Event("input"));
+      await sleep(waitMsForDerivations);
+      [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div");
+      expect(styledCounter.innerHTML).toBe(counterHTML(2, "🔼🔽"));
+      expect(styledCounter !== prevStyledCounter);
+    });
+  });
+});
diff --git a/src/packages/dom/index.ts b/src/packages/dom/index.ts
new file mode 100644
index 000000000..00c2182b4
--- /dev/null
+++ b/src/packages/dom/index.ts
@@ -0,0 +1,601 @@
+/**
+ * A TypeScript and modified version of the VanJS project.
+ * Credits: https://github.com/vanjs-org/van & https://github.com/ge3224/van-ts
+ */
+
+/**
+ * A type representing primitive JavaScript types.
+ */
+export type Primitive = string | number | boolean | bigint;
+
+/**
+ * A type representing a property value which can be a primitive, a function,
+ * or null.
+ */
+export type PropValue = Primitive | (<T>(e: T) => void) | null;
+
+/**
+ * A type representing valid child DOM values.
+ */
+export type ValidChildDomValue = Primitive | Node | null | undefined;
+
+/**
+ * A type representing functions that generate DOM values.
+ */
+export type BindingFunc =
+  | ((dom?: Node) => ValidChildDomValue)
+  | ((dom?: Element) => Element);
+
+/**
+ * A type representing various possible child DOM values.
+ */
+export type ChildDom =
+  | ValidChildDomValue
+  | StateView<Primitive | null | undefined>
+  | BindingFunc
+  | readonly ChildDom[];
+
+type ConnectedDom = { isConnected: number };
+
+type Binding = {
+  f: BindingFunc;
+  _dom: HTMLElement | null | undefined;
+};
+
+type Listener<T> = {
+  f: BindingFunc;
+  s: State<T>;
+  _dom?: HTMLElement | null | undefined;
+};
+
+type Connectable<T> = Listener<T> | Binding;
+
+/**
+ * Interface representing a state object with various properties and bindings.
+ */
+export interface State<T> {
+  val: T | undefined;
+  readonly oldVal: T | undefined;
+  rawVal: T | undefined;
+  _oldVal: T | undefined;
+  _bindings: Array<Binding>;
+  _listeners: Array<Listener<T>>;
+}
+
+/**
+ * A type representing a read-only view of a `State` object.
+ */
+export type StateView<T> = Readonly<State<T>>;
+
+/**
+ * A type representing a value that can be either a `State` object or a direct
+ * value of type `T`.
+ */
+export type Val<T> = State<T> | T;
+
+/**
+ * A type representing a property value, a state view of a property value, or a
+ * function returning a property value.
+ */
+export type PropValueOrDerived =
+  | PropValue
+  | StateView<PropValue>
+  | (() => PropValue);
+
+/**
+ * A type representing partial props with known keys for a specific
+ * element type.
+ */
+export type Props = Record<string, PropValueOrDerived> & {
+  class?: PropValueOrDerived;
+};
+
+export type PropsWithKnownKeys<ElementType> = Partial<{
+  [K in keyof ElementType]: PropValueOrDerived;
+}>;
+
+/**
+ * Represents a function type that constructs a tagged result using provided
+ * properties and children.
+ */
+export type TagFunc<Result> = (
+  first?: (Props & PropsWithKnownKeys<Result>) | ChildDom,
+  ...rest: readonly ChildDom[]
+) => Result;
+
+/**
+ * Interface representing dependencies with sets for getters and setters.
+ */
+interface Dependencies<T> {
+  _getters: Set<State<T>>;
+  _setters: Set<State<T>>;
+}
+
+/**
+ * A function type for searching property descriptors in a prototype chain.
+ */
+type PropertyDescriptorSearchFn<T> = (
+  proto: T
+) => ReturnType<typeof Object.getOwnPropertyDescriptor> | undefined;
+
+/**
+ * A function type for setting event listeners.
+ */
+type EventSetterFn = (
+  v: EventListenerOrEventListenerObject,
+  oldV?: EventListenerOrEventListenerObject
+) => void;
+
+/**
+ * A function type for setting property values.
+ */
+type PropSetterFn = (value: any) => void;
+
+/**
+ * Represents a function type for creating a namespace-specific collection of
+ * tag functions.
+ *
+ * @param {string} namespaceURI
+ * - The URI of the namespace for which the tag functions are being created.
+ *
+ * @returns {Readonly<Record<string, TagFunc<Element>>>}
+ * - A readonly record of string keys to TagFunc<Element> functions,
+ *   representing the collection of tag functions within the specified
+ *   namespace.
+ */
+export type NamespaceFunction = (
+  namespaceURI: string
+) => Readonly<Record<string, TagFunc<Element>>>;
+
+/**
+ * Represents a type for a collection of tag functions.
+ *
+ * This type includes:
+ * - A readonly record of string keys to TagFunc<Element> functions, enabling
+ *   the creation of generic HTML elements.
+ * - Specific tag functions for each HTML element type as defined in
+ *   HTMLElementTagNameMap, with the return type corresponding to the specific
+ *   type of the HTML element (e.g., HTMLDivElement for 'div',
+ *   HTMLAnchorElement for 'a').
+ *
+ * Usage of this type allows for type-safe creation of HTML elements with
+ * specific properties and child elements.
+ */
+export type Tags = Readonly<Record<string, TagFunc<Element>>> & {
+  [K in keyof HTMLElementTagNameMap]: TagFunc<HTMLElementTagNameMap[K]>;
+};
+
+/**
+ * While VanJS prefers using `let` instead of `const` to help reduce bundle
+ * size, this project employs the `const` keyword. Bundle sizes are managed
+ * during TypeScript compilation and bundling, incorporating minification and
+ * tree shaking.
+ *
+ * The following are global variables used by VanJS to alias some builtin
+ * symbols and reduce the bundle size.
+ */
+
+/**
+ * Set containing changed states.
+ */
+let changedStates: Set<State<any>> | undefined;
+
+/**
+ * Set containing derived states.
+ */
+let derivedStates: Set<State<any>>;
+
+/**
+ * Current dependencies object, containing getters and setters.
+ */
+let curDeps: Dependencies<any>;
+
+/**
+ * Array containing current new derivations.
+ */
+let curNewDerives: Array<any>;
+
+/**
+ * Set containing objects marked for garbage collection.
+ */
+let forGarbageCollection: Set<any> | undefined;
+
+/**
+ * Alias for the built-in primitive value `undefined`. This variable is used to
+ * reduce bundle size. Since it is never initialized, its value equals
+ * `undefined`. During minification, variable names are shortened.
+ */
+let _undefined: undefined;
+
+/**
+ * Alias for the keyword `Object`. This is used to reduce bundle size during
+ * minification.
+ */
+const _object = Object;
+
+/**
+ * Alias for the keyword `document`. This is used to reduce bundle size during
+ * minification.
+ */
+const _document = document;
+
+/**
+ * A constant function returning the prototype of an object.
+ */
+const protoOf = _object.getPrototypeOf;
+
+/**
+ * Constant representing a DOM object that is always considered connected.
+ */
+const alwaysConnectedDom: ConnectedDom = { isConnected: 1 };
+
+/**
+ * Constant representing the garbage collection cycle duration in milliseconds.
+ */
+const gcCycleInMs = 1000;
+
+/**
+ * Cache object for property setters.
+ */
+const propSetterCache: { [key: string]: (<T>(v: T) => void) | 0 } = {};
+
+/**
+ * Prototype of the `alwaysConnectedDom` object.
+ */
+const objProto = protoOf(alwaysConnectedDom);
+
+/**
+ * Prototype of the `Function` object.
+ */
+const funcProto = Function.prototype;
+
+/**
+ * Adds a state object to a set and schedules an associated function to be
+ * executed after a specified delay if the set is initially undefined.
+ */
+const addAndScheduleOnFirst = <T>(
+  set: Set<State<T>> | undefined,
+  state: State<T>,
+  fn: () => void,
+  waitMs?: number
+): Set<State<T>> => {
+  if (set === undefined) {
+    setTimeout(fn, waitMs);
+    set = new Set<State<T>>();
+  }
+  set.add(state);
+  return set;
+};
+
+/**
+ * Executes a function with a given argument and tracks dependencies during
+ * its execution.
+ */
+const runAndCaptureDependencies = <T>(
+  fn: Function,
+  deps: Dependencies<T>,
+  arg: T
+): T => {
+  let prevDeps = curDeps;
+  curDeps = deps;
+
+  try {
+    return fn(arg);
+  } catch (e) {
+    console.error(e);
+    return arg;
+  } finally {
+    curDeps = prevDeps;
+  }
+};
+
+/**
+ * Filters an array of Connectable objects, returning only those whose `_dom`
+ * property is connected to the current document.
+ */
+const keepConnected = <T extends Connectable<T>>(l: T[]): T[] => {
+  return l.filter((b) => b._dom?.isConnected);
+};
+
+/**
+ * Adds a state object to a collection that will be processed for
+ * garbage collection.
+ */
+const addForGarbageCollection = <T>(discard: State<T>): void => {
+  forGarbageCollection = addAndScheduleOnFirst(
+    forGarbageCollection,
+    discard,
+    () => {
+      if (forGarbageCollection) {
+        for (let s of forGarbageCollection) {
+          s._bindings = keepConnected(s._bindings);
+          s._listeners = keepConnected(s._listeners);
+        }
+        forGarbageCollection = _undefined; // Resets `forGarbageCollection` after processing
+      }
+    },
+    gcCycleInMs
+  );
+};
+
+/**
+ * Prototype for state objects, providing getter and setter for `val` and
+ * `oldVal`.
+ */
+const stateProto = {
+  get val() {
+    const state = this as State<unknown>;
+    curDeps?._getters?.add(state);
+    return state.rawVal;
+  },
+
+  get oldVal() {
+    const state = this as State<unknown>;
+    curDeps?._getters?.add(state);
+    return state._oldVal;
+  },
+
+  set val(v) {
+    const state = this as State<unknown>;
+    curDeps?._setters?.add(state);
+    if (v !== state.rawVal) {
+      state.rawVal = v;
+      state._bindings.length + state._listeners.length
+        ? (derivedStates?.add(state),
+          (changedStates = addAndScheduleOnFirst(
+            changedStates,
+            state,
+            updateDoms
+          )))
+        : (state._oldVal = v);
+    }
+  },
+};
+
+/**
+ * Generates a property descriptor with preset characteristics for properties
+ * of a state object.
+ */
+const statePropertyDescriptor = <T>(value: T): PropertyDescriptor => {
+  return {
+    writable: true,
+    configurable: true,
+    enumerable: true,
+    value: value,
+  };
+};
+
+/**
+ * Creates a state object with optional initial value. The properties of the
+ * created object are configured to be enumerable, writable, and configurable.
+ *
+ * @template
+ * @param {T} [initVal] - Optional initial value for the state.
+ * @returns {State<T>} A state object.
+ */
+const state = <T>(initVal?: T): State<T> => {
+  // In contrast to the VanJS implementation (above), where reducing the bundle
+  // size is a key priority, we use the `Object.create` method instead of the
+  // `Object.prototype.__proto__` accessor since the latter is no longer
+  // recommended.
+  //
+  // [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)
+  return _object.create(stateProto, {
+    rawVal: statePropertyDescriptor(initVal),
+    _oldVal: statePropertyDescriptor(initVal),
+    _bindings: statePropertyDescriptor([]),
+    _listeners: statePropertyDescriptor([]),
+  });
+};
+
+/**
+ * Binds a function to a DOM element, capturing its dependencies and updating
+ * the DOM as needed.
+ *
+ * @template T
+ * @param {Function} f - The function to bind.
+ * @param {T | undefined} [dom] - Optional DOM element or undefined.
+ * @returns {T} The resulting DOM element or text node.*
+ */
+const bind = <T>(f: Function, dom?: T | undefined): T => {
+  let deps: Dependencies<any> = { _getters: new Set(), _setters: new Set() };
+  let binding: { [key: string]: any } = { f };
+  let prevNewDerives = curNewDerives;
+
+  curNewDerives = [];
+  let newDom = runAndCaptureDependencies(f, deps, dom);
+
+  newDom = ((newDom ?? _document) as Node).nodeType
+    ? newDom
+    : new Text(newDom as string | undefined);
+
+  for (let d of deps._getters)
+    deps._setters.has(d) ||
+      (addForGarbageCollection(d as any), (d as any)._bindings.push(binding));
+  for (let l of curNewDerives) l._dom = newDom;
+  curNewDerives = prevNewDerives;
+  return (binding._dom = newDom);
+};
+
+/**
+ * Derives a State<T> based on a function and optional paremeters.
+ *
+ * @template T - The type of value returned by the derivation function.
+ * @param {() => T} f - The derivation that computes the value.
+ * @param {State<T>} [s] - Optional initial State<T> object to store the derived value.
+ * @param {ChildDom} [dom] - Optional DOM element or ChildDom to associate with the derivation.
+ * @returns {State<T>} The State<T> object containing the derived value and associated dependencies.
+ */
+const derive = <T>(f: () => T, s?: State<T>, dom?: ChildDom): State<T> => {
+  s = s ?? state();
+  let deps: Dependencies<T> = { _getters: new Set(), _setters: new Set() };
+  let listener: { [key: string]: any } = { f, s };
+  listener._dom = dom ?? curNewDerives?.push(listener) ?? alwaysConnectedDom;
+  s.val = runAndCaptureDependencies(f, deps, s.rawVal);
+  for (let d of deps._getters)
+    deps._setters.has(d) ||
+      (addForGarbageCollection(d), d._listeners.push(listener as Listener<T>));
+  return s;
+};
+
+/**
+ * Appends child elements to a DOM element and returns said DOM element.
+ *
+ * @param {Element} dom - The DOM element to which children will be added.
+ * @param {readonly ChildDom[]} children - An array of child elements or arrays of child elements to add.
+ * @returns {Element} The modified DOM element after adding all children.
+ */
+const add = (dom: Element, ...children: readonly ChildDom[]): Element => {
+  for (let c of (children as any).flat(Infinity)) {
+    const protoOfC = protoOf(c ?? 0);
+    const child =
+      protoOfC === stateProto
+        ? bind(() => c.val)
+        : protoOfC === funcProto
+        ? bind(c)
+        : c;
+    child != _undefined && dom.append(child);
+  }
+  return dom;
+};
+
+/**
+ * Creates a new DOM element with specified namespace, tag name, properties,
+ * and children.
+ */
+const tag = (ns: string | null, name: string, ...args: any): Element => {
+  const [props, ...children] =
+    protoOf(args[0] ?? 0) === objProto ? args : [{}, ...args];
+
+  const dom: Element | HTMLElement = ns
+    ? _document.createElementNS(ns, name)
+    : _document.createElement(name);
+
+  for (let [k, v] of _object.entries(props)) {
+    const getDesc: PropertyDescriptorSearchFn<any> = (proto: any) =>
+      proto
+        ? _object.getOwnPropertyDescriptor(proto, k as PropertyKey) ??
+          getDesc(protoOf(proto))
+        : _undefined;
+
+    const cacheKey = `${name},${k}`;
+
+    const propSetter =
+      propSetterCache[cacheKey] ??
+      (propSetterCache[cacheKey] = getDesc(protoOf(dom))?.set ?? 0);
+
+    const setter: PropSetterFn | EventSetterFn = k.startsWith("on")
+      ? (
+          v: EventListenerOrEventListenerObject,
+          oldV?: EventListenerOrEventListenerObject
+        ) => {
+          const event = k.slice(2);
+          if (oldV) dom.removeEventListener(event, oldV);
+          dom.addEventListener(event, v);
+        }
+      : propSetter
+      ? propSetter.bind(dom)
+      : dom.setAttribute.bind(dom, k);
+
+    let protoOfV = protoOf(v ?? 0);
+
+    k.startsWith("on") ||
+      (protoOfV === funcProto &&
+        ((v = derive(v as BindingFunc)), (protoOfV = stateProto)));
+
+    protoOfV === stateProto
+      ? bind(() => (setter((v as any).val, (v as any)._oldVal), dom))
+      : setter(v as EventListenerOrEventListenerObject);
+  }
+
+  return add(dom, ...children);
+};
+
+/**
+ * Creates a proxy handler object for intercepting the 'get' property access
+ * operation. The handler wraps the access in a function call that binds the
+ * accessed property name along with an optional namespace.
+ */
+const proxyHandler = (namespace?: string): ProxyHandler<object> => {
+  return {
+    get: (_: never, name: string) =>
+      tag.bind(_undefined, namespace ?? null, name),
+  };
+};
+
+/**
+ * Creates a Proxy-based Tags object with optional namespace functionality.
+ *
+ * @function
+ * @param {string} [namespace] - Optional namespace for organizing tags.
+ * @returns {Tags & NamespaceFunction} A Proxy object representing tags and namespaces.
+ */
+const tags = new Proxy(
+  (namespace?: string) =>
+    new Proxy(tag, proxyHandler(namespace)) as NamespaceFunction,
+  proxyHandler()
+) as Tags & NamespaceFunction;
+
+/**
+ * Updates a DOM element with a new DOM element, replacing the old one or
+ * removing it if newDom is null or undefined.
+ *
+ * @template T
+ * @param {T} dom - The current DOM element to update.
+ * @param {T} newDom - The new DOM element to replace with.
+ * @returns {void}
+ */
+const update = <T>(dom: T, newDom: T): void => {
+  newDom
+    ? newDom !== dom &&
+      (dom as HTMLElement).replaceWith(newDom as string | Node)
+    : (dom as HTMLElement).remove();
+};
+
+/**
+ * Updates DOM elements based on changed and derived states.
+ */
+const updateDoms = () => {
+  let iter = 0,
+    derivedStatesArray = changedStates
+      ? [...changedStates].filter((s) => s.rawVal !== s._oldVal)
+      : [];
+  do {
+    derivedStates = new Set();
+    for (let l of new Set(
+      derivedStatesArray.flatMap(
+        (s) => (s._listeners = keepConnected(s._listeners))
+      )
+    ))
+      derive(l.f, l.s, l._dom), (l._dom = _undefined);
+  } while (++iter < 100 && (derivedStatesArray = [...derivedStates]).length);
+  let changedStatesArray = changedStates
+    ? [...changedStates].filter((s) => s.rawVal !== s._oldVal)
+    : [];
+  changedStates = _undefined;
+  for (let b of new Set(
+    changedStatesArray.flatMap(
+      (s) => (s._bindings = keepConnected(s._bindings))
+    )
+  ))
+    b._dom && update(b._dom, bind(b.f, b._dom)), (b._dom = _undefined);
+
+  for (let s of changedStatesArray) s._oldVal = s.rawVal;
+};
+
+/**
+ * Hydrates a DOM element with a function that updates its content.
+ *
+ * @template T
+ * @param {T} dom - The DOM node to hydrate.
+ * @param {(dom: T) => T | null | undefined} updateFn - The function to update the DOM node.
+ * @returns {T | void} The updated DOM node or void if update fails.
+ */
+const hydrate = <T extends Node>(
+  dom: T,
+  updateFn: (dom: T) => T | null | undefined
+): T | void => {
+  return update(dom, bind(updateFn, dom));
+};
+
+export default { add, tags, state, derive, hydrate };
diff --git a/src/packages/hint/components/HintIcon.ts b/src/packages/hint/components/HintIcon.ts
new file mode 100644
index 000000000..68e4971f4
--- /dev/null
+++ b/src/packages/hint/components/HintIcon.ts
@@ -0,0 +1,74 @@
+import isFixed from "../../../util/isFixed";
+import dom, { State } from "../../dom";
+import {
+  fixedHintClassName,
+  hideHintClassName,
+  hintClassName,
+  hintDotClassName,
+  hintNoAnimationClassName,
+  hintPulseClassName,
+} from "../className";
+import { HintItem, HintPosition } from "../hintItem";
+import { dataStepAttribute } from "../dataAttributes";
+import { alignHintPosition } from "../position";
+
+const { a, div } = dom.tags;
+
+export type HintProps = {
+  index: number;
+  hintItem: HintItem;
+  refreshesSignal: State<number>;
+  onClick: (e: any) => void;
+};
+
+const className = (hintItem: HintItem) => {
+  const classNames = [hintClassName];
+
+  if (!hintItem.hintAnimation) {
+    classNames.push(hintNoAnimationClassName);
+  }
+
+  if (isFixed(hintItem.element as HTMLElement)) {
+    classNames.push(fixedHintClassName);
+  }
+
+  if (!hintItem.isActive?.val) {
+    classNames.push(hideHintClassName);
+  }
+
+  return classNames.join(" ");
+};
+
+const HintDot = () => div({ className: hintDotClassName });
+const HintPulse = () => div({ className: hintPulseClassName });
+
+export const HintIcon = ({
+  index,
+  hintItem,
+  onClick,
+  refreshesSignal,
+}: HintProps) => {
+  const hintElement = a(
+    {
+      [dataStepAttribute]: index.toString(),
+      className: () => className(hintItem),
+      role: "button",
+      tabindex: 0,
+      onclick: onClick,
+    },
+    HintDot(),
+    HintPulse()
+  );
+
+  dom.derive(() => {
+    if (refreshesSignal.val === undefined) return;
+
+    alignHintPosition(
+      hintItem.hintPosition as HintPosition,
+      hintElement,
+      hintItem.element as HTMLElement
+    );
+  });
+
+  return hintElement;
+};
diff --git a/src/packages/hint/components/HintTooltip.ts b/src/packages/hint/components/HintTooltip.ts
new file mode 100644
index 000000000..28989dd2a
--- /dev/null
+++ b/src/packages/hint/components/HintTooltip.ts
@@ -0,0 +1,61 @@
+import { Tooltip, TooltipProps } from "../../tooltip/tooltip";
+import dom from "../../dom";
+import { tooltipTextClassName } from "../className";
+import { HintItem } from "../hintItem";
+
+const { a, p, div } = dom.tags;
+
+export type HintTooltipProps = Omit<
+  TooltipProps,
+  "hintMode" | "element" | "position"
+> & {
+  hintItem: HintItem;
+  closeButtonEnabled: boolean;
+  closeButtonOnClick: (hintItem: HintItem) => void;
+  closeButtonLabel: string;
+  closeButtonClassName: string;
+};
+
+export const HintTooltip = ({
+  hintItem,
+  closeButtonEnabled,
+  closeButtonOnClick,
+  closeButtonLabel,
+  closeButtonClassName,
+  ...props
+}: HintTooltipProps) => {
+  return Tooltip(
+    {
+      ...props,
+      element: hintItem.hintTooltipElement as HTMLElement,
+      position: hintItem.position,
+      hintMode: true,
+      onClick: (e: Event) => {
+        //IE9 & Other Browsers
+        if (e.stopPropagation) {
+          e.stopPropagation();
+        }
+        //IE8 and Lower
+        else {
+          e.cancelBubble = true;
+        }
+      },
+    },
+    [
+      div(
+        { className: tooltipTextClassName },
+        p(hintItem.hint || ""),
+        closeButtonEnabled
+          ? a(
+              {
+                className: closeButtonClassName,
+                role: "button",
+                onclick: () => closeButtonOnClick(hintItem),
+              },
+              closeButtonLabel
+            )
+          : null
+      ),
+    ]
+  );
+};
diff --git a/src/packages/hint/components/HintsRoot.ts b/src/packages/hint/components/HintsRoot.ts
new file mode 100644
index 000000000..288e7b013
--- /dev/null
+++ b/src/packages/hint/components/HintsRoot.ts
@@ -0,0 +1,92 @@
+import dom from "../../dom";
+import { hintsClassName } from "../className";
+import { hideHint } from "../hide";
+import { Hint } from "../hint";
+import { HintItem } from "../hintItem";
+import { HintIcon } from "./HintIcon";
+import { ReferenceLayer } from "./ReferenceLayer";
+
+const { div } = dom.tags;
+
+export type HintsRootProps = {
+  hint: Hint;
+};
+
+/**
+ * Returns an event handler unique to the hint iteration
+ */
+const getHintClick = (hint: Hint, i: number) => (e: Event) => {
+  const evt = e ? e : window.event;
+
+  if (evt && evt.stopPropagation) {
+    evt.stopPropagation();
+  }
+
+  if (evt && evt.cancelBubble !== null) {
+    evt.cancelBubble = true;
+  }
+
+  hint.showHintDialog(i);
+};
+
+export const HintsRoot = ({ hint }: HintsRootProps) => {
+  const hintElements = [];
+
+  for (const [i, hintItem] of hint.getHints().entries()) {
+    const hintTooltipElement = HintIcon({
+      index: i,
+      hintItem,
+      onClick: getHintClick(hint, i),
+      refreshesSignal: hint.getRefreshesSignal(),
+    });
+
+    // store the hint tooltip element in the hint item
+    // because we need to position the reference layer relative to the HintIcon
+    hintItem.hintTooltipElement = hintTooltipElement;
+
+    hintElements.push(hintTooltipElement);
+  }
+
+  const root = div(
+    {
+      className: hintsClassName,
+    },
+    ...hintElements
+  );
+
+  dom.derive(() => {
+    const activeHintSignal = hint.getActiveHintSignal();
+    if (activeHintSignal.val === undefined) return;
+
+    const stepId = activeHintSignal.val;
+    const hints = hint.getHints();
+    const hintItem = hints[stepId];
+
+    if (!hintItem) return;
+
+    const referenceLayer = ReferenceLayer({
+      activeHintSignal,
+      hintItem,
+
+      helperElementPadding: hint.getOption("helperElementPadding"),
+      targetElement: hint.getTargetElement(),
+
+      refreshes: hint.getRefreshesSignal(),
+
+      // hints don't have step numbers
+      showStepNumbers: false,
+
+      autoPosition: hint.getOption("autoPosition"),
+      positionPrecedence: hint.getOption("positionPrecedence"),
+
+      closeButtonEnabled: hint.getOption("hintShowButton"),
+      closeButtonLabel: hint.getOption("hintButtonLabel"),
+      closeButtonClassName: hint.getOption("buttonClass"),
+      closeButtonOnClick: (hintItem: HintItem) => hideHint(hint, hintItem),
+    });
+
+    dom.add(root, referenceLayer);
+  });
+
+  return root;
+};
diff --git a/src/packages/hint/components/ReferenceLayer.ts b/src/packages/hint/components/ReferenceLayer.ts
new file mode 100644
index 000000000..fc1a3b074
--- /dev/null
+++ b/src/packages/hint/components/ReferenceLayer.ts
@@ -0,0 +1,54 @@
+import { setPositionRelativeTo } from "../../../util/positionRelativeTo";
+import dom, { State } from "../../dom";
+import {
+  hintReferenceClassName,
+  tooltipReferenceLayerClassName,
+} from "../className";
+import { dataStepAttribute } from "../dataAttributes";
+import { HintTooltip, HintTooltipProps } from "./HintTooltip";
+
+const { div } = dom.tags;
+
+export type ReferenceLayerProps = HintTooltipProps & {
+  activeHintSignal: State<number | undefined>;
+  targetElement: HTMLElement;
+  helperElementPadding: number;
+};
+
+export const ReferenceLayer = ({
+  activeHintSignal,
+  targetElement,
+  helperElementPadding,
+  ...props
+}: ReferenceLayerProps) => {
+  const initialActiveHintSignal = activeHintSignal.val;
+
+  return () => {
+    // remove the reference layer if the active hint signal is set to undefined
+    // e.g. when the user clicks outside the hint
+    if (activeHintSignal.val == undefined) return null;
+
+    // remove the reference layer if the active hint signal changes
+    // and the initial active hint signal is not same as the current active hint signal (e.g. when the user clicks on another hint)
+    if (initialActiveHintSignal !== activeHintSignal.val) return null;
+
+    const referenceLayer = div(
+      {
+        [dataStepAttribute]: activeHintSignal.val,
+        className: `${tooltipReferenceLayerClassName} ${hintReferenceClassName}`,
+      },
+      HintTooltip(props)
+    );
+
+    setTimeout(() => {
+      setPositionRelativeTo(
+        targetElement,
+        referenceLayer,
+        props.hintItem.hintTooltipElement as HTMLElement,
+        helperElementPadding
+      );
+    }, 1);
+
+    return referenceLayer;
+  };
+};
diff --git a/src/packages/hint/hide.ts b/src/packages/hint/hide.ts
index 029007339..484b7cdb3 100644
--- a/src/packages/hint/hide.ts
+++ b/src/packages/hint/hide.ts
@@ -1,26 +1,22 @@
 import { Hint } from "./hint";
-import { hideHintClassName } from "./className";
-import { addClass } from "../../util/className";
-import { removeHintTooltip } from "./tooltip";
-import { dataStepAttribute } from "./dataAttributes";
-import { hintElement, hintElements } from "./selector";
+import { HintItem } from "./hintItem";
 
 /**
  * Hide a hint
  *
  * @api private
  */
-export async function hideHint(hint: Hint, stepId: number) {
-  const element = hintElement(stepId);
+export async function hideHint(hint: Hint, hintItem: HintItem) {
+  const isActiveSignal = hintItem.isActive;
 
-  removeHintTooltip();
-
-  if (element) {
-    addClass(element, hideHintClassName);
+  if (isActiveSignal) {
+    isActiveSignal.val = false;
   }
 
+  hint.hideHintDialog();
+
   // call the callback function (if any)
-  hint.callback("hintClose")?.call(hint, stepId);
+  hint.callback("hintClose")?.call(hint, hintItem);
 }
 
 /**
@@ -29,13 +25,7 @@ export async function hideHint(hint: Hint, stepId: number) {
  * @api private
  */
 export async function hideHints(hint: Hint) {
-  const elements = hintElements();
-
-  for (const hintElement of Array.from(elements)) {
-    const step = hintElement.getAttribute(dataStepAttribute);
-
-    if (!step) continue;
-
-    await hideHint(hint, parseInt(step, 10));
+  for (const hintItem of hint.getHints()) {
+    await hideHint(hint, hintItem);
   }
 }
diff --git a/src/packages/hint/hint.ts b/src/packages/hint/hint.ts
index 29819ff21..75489716e 100644
--- a/src/packages/hint/hint.ts
+++ b/src/packages/hint/hint.ts
@@ -4,28 +4,24 @@ import { fetchHintItems, HintItem } from "./hintItem";
 import { setOption, setOptions } from "../../option";
 import isFunction from "../../util/isFunction";
 import debounce from "../../util/debounce";
-import { reAlignHints } from "./position";
 import DOMEvent from "../../util/DOMEvent";
 import { getContainerElement } from "../../util/containerElement";
-import { renderHints } from "./render";
 import { hideHint, hideHints } from "./hide";
 import { showHint, showHints } from "./show";
-import { removeHint, removeHints } from "./remove";
-import { showHintDialog } from "./tooltip";
+import dom from "../dom";
+import { HintsRoot } from "./components/HintsRoot";
 
 type hintsAddedCallback = (this: Hint) => void | Promise<void>;
-type hintClickCallback = (
-  this: Hint,
-  hintElement: HTMLElement,
-  item: HintItem,
-  stepId: number
-) => void | Promise<void>;
-type hintCloseCallback = (this: Hint, stepId: number) => void | Promise<void>;
+type hintClickCallback = (this: Hint, item: HintItem) => void | Promise<void>;
+type hintCloseCallback = (this: Hint, item: HintItem) => void | Promise<void>;
 
 export class Hint implements Package<HintOptions> {
+  private _root: HTMLElement | undefined;
   private _hints: HintItem[] = [];
   private readonly _targetElement: HTMLElement;
   private _options: HintOptions;
+  private _activeHintSignal = dom.state<number | undefined>(undefined);
+  private _refreshesSignal = dom.state(0);
 
   private readonly callbacks: {
     hintsAdded?: hintsAddedCallback;
@@ -35,6 +31,8 @@ export class Hint implements Package<HintOptions> {
 
   // Event handlers
   private _hintsAutoRefreshFunction?: () => void;
+  // The hint close function used when the user clicks outside the hint
+  private _windowClickFunction?: () => void;
 
   /**
    * Create a new Hint instance
@@ -101,10 +99,47 @@ export class Hint implements Package<HintOptions> {
    * @param hint The Hint item
    */
   addHint(hint: HintItem): this {
+    // always set isActive to true
+    hint.isActive = dom.state(true);
     this._hints.push(hint);
     return this;
   }
 
+  /**
+   * Get the active hint signal
+   * This is meant to be used internally by the Hint package
+   */
+  getActiveHintSignal() {
+    return this._activeHintSignal;
+  }
+
+  /**
+   * Returns the underlying state of the refreshes
+   * This is an internal method and should not be used outside of the package.
+   */
+  getRefreshesSignal() {
+    return this._refreshesSignal;
+  }
+
+  /**
+   * Returns true if the hints are rendered
+   */
+  isRendered() {
+    return this._root !== undefined;
+  }
+
+  private createRoot() {
+    this._root = HintsRoot({ hint: this });
+    dom.add(this._targetElement, this._root);
+  }
+
+  private recreateRoot() {
+    if (this._root) {
+      this._root.remove();
+      this.createRoot();
+    }
+  }
+
   /**
    * Render hints on the page
    */
@@ -113,11 +148,41 @@ export class Hint implements Package<HintOptions> {
       return this;
     }
 
+    if (this.isRendered()) {
+      return this;
+    }
+
     fetchHintItems(this);
-    await renderHints(this);
+    this.createRoot();
+
+    this.callback("hintsAdded")?.call(this);
+
+    this.enableHintAutoRefresh();
+    this.enableCloseDialogOnWindowClick();
+
     return this;
   }
 
+  /**
+   * Enable closing the dialog when the user clicks outside the hint
+   */
+  enableCloseDialogOnWindowClick() {
+    this._windowClickFunction = () => {
+      this._activeHintSignal.val = undefined;
+    };
+
+    DOMEvent.on(document, "click", this._windowClickFunction, false);
+  }
+
+  /**
+   * Disable closing the dialog when the user clicks outside the hint
+   */
+  disableCloseDialogOnWindowClick() {
+    if (this._windowClickFunction) {
+      DOMEvent.off(document, "click", this._windowClickFunction, false);
+    }
+  }
+
   /**
    * @deprecated renderHints() is deprecated, please use render() instead
    */
@@ -130,7 +195,12 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   async hideHint(stepId: number) {
-    await hideHint(this, stepId);
+    const hintItem = this.getHint(stepId);
+
+    if (hintItem) {
+      await hideHint(this, hintItem);
+    }
+
     return this;
   }
 
@@ -147,7 +217,12 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   showHint(stepId: number) {
-    showHint(stepId);
+    const hintItem = this.getHint(stepId);
+
+    if (hintItem) {
+      showHint(hintItem);
+    }
+
     return this;
   }
 
@@ -164,7 +239,14 @@ export class Hint implements Package<HintOptions> {
    * Useful when you want to destroy the elements and add them again (e.g. a modal or popup)
    */
   destroy() {
-    removeHints(this);
+    if (this._root) {
+      this._root.remove();
+      this._root = undefined;
+    }
+
+    this.disableHintAutoRefresh();
+    this.disableCloseDialogOnWindowClick();
+
     return this;
   }
 
@@ -184,7 +266,9 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   removeHint(stepId: number) {
-    removeHint(stepId);
+    this._hints = this._hints.filter((_, i) => i !== stepId);
+    this.recreateRoot();
+
     return this;
   }
 
@@ -193,7 +277,43 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   async showHintDialog(stepId: number) {
-    await showHintDialog(this, stepId);
+    const item = this.getHint(stepId);
+
+    if (!item) return;
+
+    if (this._activeHintSignal.val !== stepId) {
+      this._activeHintSignal.val = stepId;
+
+      // call the callback function (if any)
+      await this.callback("hintClick")?.call(this, item);
+    } else {
+      // to toggle the hint dialog if the same hint is clicked again
+      this._activeHintSignal.val = undefined;
+    }
+
+    return this;
+  }
+
+  /**
+   * Hide hint dialog from the page
+   */
+  hideHintDialog() {
+    this._activeHintSignal.val = undefined;
+    return this;
+  }
+
+  /**
+   * Refresh the hints on the page
+   */
+  public refresh() {
+    if (!this.isRendered()) {
+      return this;
+    }
+
+    if (this._refreshesSignal.val !== undefined) {
+      this._refreshesSignal.val += 1;
+    }
+
     return this;
   }
 
@@ -204,7 +324,7 @@ export class Hint implements Package<HintOptions> {
     const hintAutoRefreshInterval = this.getOption("hintAutoRefreshInterval");
     if (hintAutoRefreshInterval >= 0) {
       this._hintsAutoRefreshFunction = debounce(
-        () => reAlignHints(this),
+        () => this.refresh(),
         hintAutoRefreshInterval
       );
 
diff --git a/src/packages/hint/hintItem.ts b/src/packages/hint/hintItem.ts
index aa5802ed1..7ad3aaa0c 100644
--- a/src/packages/hint/hintItem.ts
+++ b/src/packages/hint/hintItem.ts
@@ -7,6 +7,7 @@ import {
   dataHintPositionAttribute,
   dataTooltipClassAttribute,
 } from "./dataAttributes";
+import { State } from "../dom";
 
 export type HintPosition =
   | "top-left"
@@ -24,9 +25,12 @@ export type HintItem = {
   tooltipClass?: string;
   position: TooltipPosition;
   hint?: string;
-  hintTargetElement?: HTMLElement;
+  // this is the HintIcon element for this particular hint
+  // used for positioning the HintTooltip
+  hintTooltipElement?: HTMLElement;
   hintAnimation?: boolean;
   hintPosition: HintPosition;
+  isActive?: State<boolean>;
 };
 
 export const fetchHintItems = (hint: Hint) => {
diff --git a/src/packages/hint/position.ts b/src/packages/hint/position.ts
index 6ef6f471a..d3430f404 100644
--- a/src/packages/hint/position.ts
+++ b/src/packages/hint/position.ts
@@ -1,6 +1,5 @@
 import getOffset from "../../util/getOffset";
 import { HintPosition } from "./hintItem";
-import { Hint } from "./hint";
 
 /**
  * Aligns hint position
@@ -74,14 +73,3 @@ export const alignHintPosition = (
       break;
   }
 };
-
-/**
- * Re-aligns all hint elements
- *
- * @api private
- */
-export function reAlignHints(hint: Hint) {
-  for (const { hintTargetElement, hintPosition, element } of hint.getHints()) {
-    alignHintPosition(hintPosition, element as HTMLElement, hintTargetElement);
-  }
-}
diff --git a/src/packages/hint/remove.ts b/src/packages/hint/remove.ts
deleted file mode 100644
index 7b7d34dac..000000000
--- a/src/packages/hint/remove.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Hint } from "./hint";
-import { dataStepAttribute } from "./dataAttributes";
-import { hintElement, hintElements } from "./selector";
-
-/**
- * Removes all hint elements on the page
- * Useful when you want to destroy the elements and add them again (e.g. a modal or popup)
- *
- * @api private
- */
-export function removeHints(hint: Hint) {
-  const elements = hintElements();
-
-  for (const hintElement of Array.from(elements)) {
-    const step = hintElement.getAttribute(dataStepAttribute);
-
-    if (step === null) continue;
-
-    removeHint(parseInt(step, 10));
-  }
-
-  hint.disableHintAutoRefresh();
-}
-
-/**
- * Remove one single hint element from the page
- * Useful when you want to destroy the element and add them again (e.g. a modal or popup)
- * Use removeHints if you want to remove all elements.
- *
- * @api private
- */
-export function removeHint(stepId: number) {
-  const element = hintElement(stepId);
-
-  if (element && element.parentNode) {
-    element.parentNode.removeChild(element);
-  }
-}
diff --git a/src/packages/hint/render.ts b/src/packages/hint/render.ts
deleted file mode 100644
index 92e71a86b..000000000
--- a/src/packages/hint/render.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { queryElement, queryElementByClassName } from "../../util/queryElement";
-import { Hint } from "./hint";
-import { HintPosition } from "./hintItem";
-import {
-  fixedHintClassName,
-  hintClassName,
-  hintDotClassName,
-  hintNoAnimationClassName,
-  hintPulseClassName,
-  hintsClassName,
-} from "./className";
-import createElement from "../../util/createElement";
-import { dataStepAttribute } from "./dataAttributes";
-import setAnchorAsButton from "../../util/setAnchorAsButton";
-import { addClass } from "../../util/className";
-import isFixed from "../../util/isFixed";
-import { alignHintPosition } from "./position";
-import { showHintDialog } from "./tooltip";
-
-/**
- * Returns an event handler unique to the hint iteration
- */
-const getHintClick = (hint: Hint, i: number) => (e: Event) => {
-  const evt = e ? e : window.event;
-
-  if (evt && evt.stopPropagation) {
-    evt.stopPropagation();
-  }
-
-  if (evt && evt.cancelBubble !== null) {
-    evt.cancelBubble = true;
-  }
-
-  showHintDialog(hint, i);
-};
-
-/**
- * Add all available hints to the page
- *
- * @api private
- */
-export async function renderHints(hint: Hint) {
-  let hintsWrapper = queryElementByClassName(hintsClassName);
-
-  if (hintsWrapper === null) {
-    hintsWrapper = createElement("div", {
-      className: hintsClassName,
-    });
-  }
-
-  const hints = hint.getHints();
-  for (let i = 0; i < hints.length; i++) {
-    const hintItem = hints[i];
-
-    // avoid append a hint twice
-    if (queryElement(`.${hintClassName}[${dataStepAttribute}="${i}"]`)) {
-      return;
-    }
-
-    const hintElement = createElement("a", {
-      className: hintClassName,
-    });
-    setAnchorAsButton(hintElement);
-
-    hintElement.onclick = getHintClick(hint, i);
-
-    if (!hintItem.hintAnimation) {
-      addClass(hintElement, hintNoAnimationClassName);
-    }
-
-    // hint's position should be fixed if the target element's position is fixed
-    if (isFixed(hintItem.element as HTMLElement)) {
-      addClass(hintElement, fixedHintClassName);
-    }
-
-    const hintDot = createElement("div", {
-      className: hintDotClassName,
-    });
-
-    const hintPulse = createElement("div", {
-      className: hintPulseClassName,
-    });
-
-    hintElement.appendChild(hintDot);
-    hintElement.appendChild(hintPulse);
-    hintElement.setAttribute(dataStepAttribute, i.toString());
-
-    // we swap the hint element with target element
-    // because _setHelperLayerPosition uses `element` property
-    hintItem.hintTargetElement = hintItem.element as HTMLElement;
-    hintItem.element = hintElement;
-
-    // align the hint position
-    alignHintPosition(
-      hintItem.hintPosition as HintPosition,
-      hintElement,
-      hintItem.hintTargetElement as HTMLElement
-    );
-
-    hintsWrapper.appendChild(hintElement);
-  }
-
-  // adding the hints wrapper
-  document.body.appendChild(hintsWrapper);
-
-  // call the callback function (if any)
-  hint.callback("hintsAdded")?.call(hint);
-
-  hint.enableHintAutoRefresh();
-}
diff --git a/src/packages/hint/selector.ts b/src/packages/hint/selector.ts
deleted file mode 100644
index 95a52b277..000000000
--- a/src/packages/hint/selector.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  queryElementByClassName,
-  queryElementsByClassName,
-} from "../../util/queryElement";
-import { hintClassName, hintsClassName } from "./className";
-import { dataStepAttribute } from "./dataAttributes";
-
-const hintsContainer = () => queryElementByClassName(hintsClassName);
-
-export const hintElements = () =>
-  queryElementsByClassName(hintClassName, hintsContainer());
-
-export const hintElement = (stepId: number) =>
-  queryElementsByClassName(
-    `${hintClassName}[${dataStepAttribute}="${stepId}"]`,
-    hintsContainer()
-  )[0];
diff --git a/src/packages/hint/show.ts b/src/packages/hint/show.ts
index 80db616b3..d80fb66dc 100644
--- a/src/packages/hint/show.ts
+++ b/src/packages/hint/show.ts
@@ -1,8 +1,5 @@
 import { Hint } from "./hint";
-import { hideHintClassName } from "./className";
-import { dataStepAttribute } from "./dataAttributes";
-import { removeClass } from "../../util/className";
-import { hintElement, hintElements } from "./selector";
+import { HintItem } from "./hintItem";
 
 /**
  * Show all hints
@@ -10,15 +7,9 @@ import { hintElement, hintElements } from "./selector";
  * @api private
  */
 export async function showHints(hint: Hint) {
-  const elements = hintElements();
-
-  if (elements?.length) {
-    for (const hintElement of Array.from(elements)) {
-      const step = hintElement.getAttribute(dataStepAttribute);
-
-      if (!step) continue;
-
-      showHint(parseInt(step, 10));
+  if (hint.isRendered()) {
+    for (const hintItem of hint.getHints()) {
+      showHint(hintItem);
     }
   } else {
     // or render hints if there are none
@@ -31,10 +22,10 @@ export async function showHints(hint: Hint) {
  *
  * @api private
  */
-export function showHint(stepId: number) {
-  const element = hintElement(stepId);
+export function showHint(hintItem: HintItem) {
+  const activeSignal = hintItem.isActive;
 
-  if (element) {
-    removeClass(element, new RegExp(hideHintClassName, "g"));
+  if (activeSignal) {
+    activeSignal.val = true;
   }
 }
diff --git a/src/packages/hint/tooltip.ts b/src/packages/hint/tooltip.ts
deleted file mode 100644
index d86d5b0e7..000000000
--- a/src/packages/hint/tooltip.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { queryElement, queryElementByClassName } from "../../util/queryElement";
-import {
-  arrowClassName,
-  hintClassName,
-  hintReferenceClassName,
-  tooltipClassName,
-  tooltipReferenceLayerClassName,
-  tooltipTextClassName,
-} from "./className";
-import { dataStepAttribute } from "./dataAttributes";
-import { Hint } from "./hint";
-import createElement from "../../util/createElement";
-import { setClass } from "../../util/className";
-import { hideHint } from "./hide";
-import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
-import { placeTooltip } from "../../packages/tooltip";
-import DOMEvent from "../../util/DOMEvent";
-
-// The hint close function used when the user clicks outside the hint
-let _hintCloseFunction: () => void | undefined;
-
-/**
- * Removes open hint (tooltip hint)
- *
- * @api private
- */
-export function removeHintTooltip(): string | undefined {
-  const tooltip = queryElementByClassName(hintReferenceClassName);
-
-  if (tooltip && tooltip.parentNode) {
-    const step = tooltip.getAttribute(dataStepAttribute);
-    if (!step) return undefined;
-
-    tooltip.parentNode.removeChild(tooltip);
-
-    return step;
-  }
-
-  return undefined;
-}
-
-/**
- * Triggers when user clicks on the hint element
- *
- * @api private
- */
-export async function showHintDialog(hint: Hint, stepId: number) {
-  const hintElement = queryElement(
-    `.${hintClassName}[${dataStepAttribute}="${stepId}"]`
-  );
-
-  const item = hint.getHint(stepId);
-
-  if (!hintElement || !item) return;
-
-  // call the callback function (if any)
-  await hint.callback("hintClick")?.call(hint, hintElement, item, stepId);
-
-  // remove all open tooltips
-  const removedStep = removeHintTooltip();
-
-  // to toggle the tooltip
-  if (removedStep !== undefined && parseInt(removedStep, 10) === stepId) {
-    return;
-  }
-
-  const tooltipLayer = createElement("div", {
-    className: tooltipClassName,
-  });
-  const tooltipTextLayer = createElement("div");
-  const arrowLayer = createElement("div");
-  const referenceLayer = createElement("div");
-
-  tooltipLayer.onclick = (e: Event) => {
-    //IE9 & Other Browsers
-    if (e.stopPropagation) {
-      e.stopPropagation();
-    }
-    //IE8 and Lower
-    else {
-      e.cancelBubble = true;
-    }
-  };
-
-  setClass(tooltipTextLayer, tooltipTextClassName);
-
-  const tooltipWrapper = createElement("p");
-  tooltipWrapper.innerHTML = item.hint || "";
-  tooltipTextLayer.appendChild(tooltipWrapper);
-
-  if (hint.getOption("hintShowButton")) {
-    const closeButton = createElement("a");
-    closeButton.className = hint.getOption("buttonClass");
-    closeButton.setAttribute("role", "button");
-    closeButton.innerHTML = hint.getOption("hintButtonLabel");
-    closeButton.onclick = () => hideHint(hint, stepId);
-    tooltipTextLayer.appendChild(closeButton);
-  }
-
-  setClass(arrowLayer, arrowClassName);
-  tooltipLayer.appendChild(arrowLayer);
-
-  tooltipLayer.appendChild(tooltipTextLayer);
-
-  const step = hintElement.getAttribute(dataStepAttribute) || "";
-
-  // set current step for _placeTooltip function
-  const hintItem = hint.getHint(parseInt(step, 10));
-
-  if (!hintItem) return;
-
-  // align reference layer position
-  setClass(
-    referenceLayer,
-    tooltipReferenceLayerClassName,
-    hintReferenceClassName
-  );
-  referenceLayer.setAttribute(dataStepAttribute, step);
-
-  const helperLayerPadding = hint.getOption("helperElementPadding");
-  setPositionRelativeTo(
-    hint.getTargetElement(),
-    referenceLayer,
-    hintItem.element as HTMLElement,
-    helperLayerPadding
-  );
-
-  referenceLayer.appendChild(tooltipLayer);
-  document.body.appendChild(referenceLayer);
-
-  // set proper position
-  placeTooltip(
-    tooltipLayer,
-    arrowLayer,
-    hintItem.element as HTMLElement,
-    hintItem.position,
-    hint.getOption("positionPrecedence"),
-    // hints don't have step numbers
-    false,
-    hint.getOption("autoPosition"),
-    hintItem.tooltipClass ?? hint.getOption("tooltipClass")
-  );
-
-  _hintCloseFunction = () => {
-    removeHintTooltip();
-    DOMEvent.off(document, "click", _hintCloseFunction, false);
-  };
-
-  DOMEvent.on(document, "click", _hintCloseFunction, false);
-}
diff --git a/src/packages/tooltip/index.ts b/src/packages/tooltip/index.ts
index ca0d99c31..4d1ed76c7 100644
--- a/src/packages/tooltip/index.ts
+++ b/src/packages/tooltip/index.ts
@@ -1,2 +1 @@
 export { TooltipPosition } from "./tooltipPosition";
-export { placeTooltip } from "./placeTooltip";
diff --git a/src/packages/tooltip/placeTooltip.test.ts b/src/packages/tooltip/placeTooltip.test.ts
deleted file mode 100644
index 6f83a6f72..000000000
--- a/src/packages/tooltip/placeTooltip.test.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import * as getOffset from "../../util/getOffset";
-import * as getWindowSize from "../../util/getWindowSize";
-import { placeTooltip } from "./placeTooltip";
-
-describe("placeTooltip", () => {
-  test("should automatically place the tooltip position when there is enough space", () => {
-    // Arrange
-    jest.spyOn(getOffset, "default").mockReturnValue({
-      height: 100,
-      width: 100,
-      top: 0,
-      left: 0,
-    });
-
-    jest.spyOn(getWindowSize, "default").mockReturnValue({
-      height: 1000,
-      width: 1000,
-    });
-
-    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
-      x: 0,
-      y: 0,
-      toJSON: jest.fn,
-      width: 100,
-      height: 100,
-      top: 200,
-      left: 200,
-      bottom: 300,
-      right: 300,
-    });
-
-    const stepElement = document.createElement("div");
-    const tooltipLayer = document.createElement("div");
-    const arrowLayer = document.createElement("div");
-
-    // Act
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      stepElement,
-      "top",
-      ["top", "bottom", "left", "right"],
-      false,
-      true
-    );
-
-    // Assert
-    expect(tooltipLayer.className).toBe(
-      "introjs-tooltip introjs-top-right-aligned"
-    );
-  });
-
-  test("should skip auto positioning when autoPosition is false", () => {
-    // Arrange
-    const stepElement = document.createElement("div");
-    const tooltipLayer = document.createElement("div");
-    const arrowLayer = document.createElement("div");
-
-    // Act
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      stepElement,
-      "top",
-      ["top", "bottom"],
-      false,
-      false
-    );
-
-    // Assert
-    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top");
-  });
-
-  test("should use floating tooltips when height/width is limited", () => {
-    // Arrange
-    jest.spyOn(getOffset, "default").mockReturnValue({
-      height: 100,
-      width: 100,
-      top: 0,
-      left: 0,
-    });
-
-    jest.spyOn(getWindowSize, "default").mockReturnValue({
-      height: 100,
-      width: 100,
-    });
-
-    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
-      x: 0,
-      y: 0,
-      toJSON: jest.fn,
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-    });
-
-    const stepElement = document.createElement("div");
-    const tooltipLayer = document.createElement("div");
-    const arrowLayer = document.createElement("div");
-
-    // Act
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      stepElement,
-      "left",
-      ["top", "bottom", "left", "right"],
-      false,
-      true
-    );
-
-    // Assert
-    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating");
-  });
-
-  test("should use bottom middle aligned when there is enough vertical space", () => {
-    // Arrange
-    jest.spyOn(getOffset, "default").mockReturnValue({
-      height: 100,
-      width: 100,
-      top: 0,
-      left: 0,
-    });
-
-    jest.spyOn(getWindowSize, "default").mockReturnValue({
-      height: 500,
-      width: 100,
-    });
-
-    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
-      x: 0,
-      y: 0,
-      toJSON: jest.fn,
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-    });
-
-    const stepElement = document.createElement("div");
-    const tooltipLayer = document.createElement("div");
-    const arrowLayer = document.createElement("div");
-
-    // Act
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      stepElement,
-      "left",
-      ["top", "bottom", "left", "right"],
-      false,
-      true
-    );
-
-    // Assert
-    expect(tooltipLayer.className).toBe(
-      "introjs-tooltip introjs-bottom-middle-aligned"
-    );
-  });
-
-  test("should attach the global custom tooltip css class", () => {
-    // Arrange
-    const stepElement = document.createElement("div");
-    const tooltipLayer = document.createElement("div");
-    const arrowLayer = document.createElement("div");
-
-    // Act
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      stepElement,
-      "left",
-      ["top", "bottom", "left", "right"],
-      false,
-      true,
-      "newClass"
-    );
-
-    // Assert
-    expect(tooltipLayer.className).toBe(
-      "introjs-tooltip newClass introjs-bottom-middle-aligned"
-    );
-  });
-});
diff --git a/src/packages/tooltip/placeTooltip.ts b/src/packages/tooltip/placeTooltip.ts
deleted file mode 100644
index a3b7a11bd..000000000
--- a/src/packages/tooltip/placeTooltip.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-import getOffset from "../../util/getOffset";
-import getWindowSize from "../../util/getWindowSize";
-import { addClass, setClass } from "../../util/className";
-import checkRight from "../../util/checkRight";
-import checkLeft from "../../util/checkLeft";
-import removeEntry from "../../util/removeEntry";
-import { TooltipPosition } from "./tooltipPosition";
-
-/**
- * auto-determine alignment
- */
-function _determineAutoAlignment(
-  offsetLeft: number,
-  tooltipWidth: number,
-  windowWidth: number,
-  desiredAlignment: TooltipPosition[]
-): TooltipPosition | null {
-  const halfTooltipWidth = tooltipWidth / 2;
-  const winWidth = Math.min(windowWidth, window.screen.width);
-
-  // valid left must be at least a tooltipWidth
-  // away from right side
-  if (winWidth - offsetLeft < tooltipWidth) {
-    removeEntry<TooltipPosition>(desiredAlignment, "top-left-aligned");
-    removeEntry<TooltipPosition>(desiredAlignment, "bottom-left-aligned");
-  }
-
-  // valid middle must be at least half
-  // width away from both sides
-  if (
-    offsetLeft < halfTooltipWidth ||
-    winWidth - offsetLeft < halfTooltipWidth
-  ) {
-    removeEntry<TooltipPosition>(desiredAlignment, "top-middle-aligned");
-    removeEntry<TooltipPosition>(desiredAlignment, "bottom-middle-aligned");
-  }
-
-  // valid right must be at least a tooltipWidth
-  // width away from left side
-  if (offsetLeft < tooltipWidth) {
-    removeEntry<TooltipPosition>(desiredAlignment, "top-right-aligned");
-    removeEntry<TooltipPosition>(desiredAlignment, "bottom-right-aligned");
-  }
-
-  if (desiredAlignment.length) {
-    return desiredAlignment[0];
-  }
-
-  return null;
-}
-
-/**
- * Determines the position of the tooltip based on the position precedence and availability
- * of screen space.
- */
-function _determineAutoPosition(
-  positionPrecedence: TooltipPosition[],
-  targetElement: HTMLElement,
-  tooltipLayer: HTMLElement,
-  desiredTooltipPosition: TooltipPosition
-): TooltipPosition {
-  // Take a clone of position precedence. These will be the available
-  const possiblePositions = positionPrecedence.slice();
-
-  const windowSize = getWindowSize();
-  const tooltipHeight = getOffset(tooltipLayer).height + 10;
-  const tooltipWidth = getOffset(tooltipLayer).width + 20;
-  const targetElementRect = targetElement.getBoundingClientRect();
-
-  // If we check all the possible areas, and there are no valid places for the tooltip, the element
-  // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen.
-  let calculatedPosition: TooltipPosition = "floating";
-
-  /*
-   * auto determine position
-   */
-
-  // Check for space below
-  if (targetElementRect.bottom + tooltipHeight > windowSize.height) {
-    removeEntry<TooltipPosition>(possiblePositions, "bottom");
-  }
-
-  // Check for space above
-  if (targetElementRect.top - tooltipHeight < 0) {
-    removeEntry<TooltipPosition>(possiblePositions, "top");
-  }
-
-  // Check for space to the right
-  if (targetElementRect.right + tooltipWidth > windowSize.width) {
-    removeEntry<TooltipPosition>(possiblePositions, "right");
-  }
-
-  // Check for space to the left
-  if (targetElementRect.left - tooltipWidth < 0) {
-    removeEntry<TooltipPosition>(possiblePositions, "left");
-  }
-
-  // strip alignment from position
-  if (desiredTooltipPosition) {
-    // ex: "bottom-right-aligned"
-    // should return 'bottom'
-    desiredTooltipPosition = desiredTooltipPosition.split(
-      "-"
-    )[0] as TooltipPosition;
-  }
-
-  if (possiblePositions.length) {
-    // Pick the first valid position, in order
-    calculatedPosition = possiblePositions[0];
-
-    if (possiblePositions.includes(desiredTooltipPosition)) {
-      // If the requested position is in the list, choose that
-      calculatedPosition = desiredTooltipPosition;
-    }
-  }
-
-  // only "top" and "bottom" positions have optional alignments
-  if (calculatedPosition === "top" || calculatedPosition === "bottom") {
-    let defaultAlignment: TooltipPosition;
-    let desiredAlignment: TooltipPosition[] = [];
-
-    if (calculatedPosition === "top") {
-      // if screen width is too small
-      // for ANY alignment, middle is
-      // probably the best for visibility
-      defaultAlignment = "top-middle-aligned";
-
-      desiredAlignment = [
-        "top-left-aligned",
-        "top-middle-aligned",
-        "top-right-aligned",
-      ];
-    } else {
-      defaultAlignment = "bottom-middle-aligned";
-
-      desiredAlignment = [
-        "bottom-left-aligned",
-        "bottom-middle-aligned",
-        "bottom-right-aligned",
-      ];
-    }
-
-    calculatedPosition =
-      _determineAutoAlignment(
-        targetElementRect.left,
-        tooltipWidth,
-        windowSize.width,
-        desiredAlignment
-      ) || defaultAlignment;
-  }
-
-  return calculatedPosition;
-}
-
-/**
- * Render tooltip box in the page
- *
- * @api private
- */
-export const placeTooltip = (
-  tooltipLayer: HTMLElement,
-  arrowLayer: HTMLElement,
-  targetElement: HTMLElement,
-  position: TooltipPosition,
-  positionPrecedence: TooltipPosition[],
-  showStepNumbers = false,
-  autoPosition = true,
-  tooltipClassName = "",
-  hintMode: boolean = false
-) => {
-  let tooltipOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  };
-  let targetOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  };
-  let windowSize: { width: number; height: number };
-
-  //reset the old style
-  tooltipLayer.style.top = "";
-  tooltipLayer.style.right = "";
-  tooltipLayer.style.bottom = "";
-  tooltipLayer.style.left = "";
-  tooltipLayer.style.marginLeft = "";
-  tooltipLayer.style.marginTop = "";
-
-  arrowLayer.style.display = "inherit";
-
-  setClass(tooltipLayer, "introjs-tooltip", tooltipClassName);
-
-  tooltipLayer.setAttribute("role", "dialog");
-
-  // Floating is always valid, no point in calculating
-  if (position !== "floating" && autoPosition) {
-    position = _determineAutoPosition(
-      positionPrecedence,
-      targetElement,
-      tooltipLayer,
-      position
-    );
-  }
-
-  let tooltipLayerStyleLeft: number;
-  targetOffset = getOffset(targetElement as HTMLElement);
-  tooltipOffset = getOffset(tooltipLayer);
-  windowSize = getWindowSize();
-
-  addClass(tooltipLayer, `introjs-${position}`);
-
-  let tooltipLayerStyleLeftRight =
-    targetOffset.width / 2 - tooltipOffset.width / 2;
-
-  switch (position) {
-    case "top-right-aligned":
-      setClass(arrowLayer, "introjs-arrow bottom-right");
-
-      let tooltipLayerStyleRight = 0;
-      checkLeft(
-        targetOffset,
-        tooltipLayerStyleRight,
-        tooltipOffset,
-        tooltipLayer
-      );
-      tooltipLayer.style.bottom = `${targetOffset.height + 20}px`;
-      break;
-
-    case "top-middle-aligned":
-      setClass(arrowLayer, "introjs-arrow bottom-middle");
-
-      // a fix for middle aligned hints
-      if (hintMode) {
-        tooltipLayerStyleLeftRight += 5;
-      }
-
-      if (
-        checkLeft(
-          targetOffset,
-          tooltipLayerStyleLeftRight,
-          tooltipOffset,
-          tooltipLayer
-        )
-      ) {
-        tooltipLayer.style.right = "";
-        checkRight(
-          targetOffset,
-          tooltipLayerStyleLeftRight,
-          tooltipOffset,
-          windowSize,
-          tooltipLayer
-        );
-      }
-      tooltipLayer.style.bottom = `${targetOffset.height + 20}px`;
-      break;
-
-    case "top-left-aligned":
-    // top-left-aligned is the same as the default top
-    case "top":
-      setClass(arrowLayer, "introjs-arrow bottom");
-
-      tooltipLayerStyleLeft = hintMode ? 0 : 15;
-
-      checkRight(
-        targetOffset,
-        tooltipLayerStyleLeft,
-        tooltipOffset,
-        windowSize,
-        tooltipLayer
-      );
-      tooltipLayer.style.bottom = `${targetOffset.height + 20}px`;
-      break;
-    case "right":
-      tooltipLayer.style.left = `${targetOffset.width + 20}px`;
-      if (targetOffset.top + tooltipOffset.height > windowSize.height) {
-        // In this case, right would have fallen below the bottom of the screen.
-        // Modify so that the bottom of the tooltip connects with the target
-        setClass(arrowLayer, "introjs-arrow left-bottom");
-        tooltipLayer.style.top = `-${
-          tooltipOffset.height - targetOffset.height - 20
-        }px`;
-      } else {
-        setClass(arrowLayer, "introjs-arrow left");
-      }
-      break;
-    case "left":
-      if (!hintMode && showStepNumbers === true) {
-        tooltipLayer.style.top = "15px";
-      }
-
-      if (targetOffset.top + tooltipOffset.height > windowSize.height) {
-        // In this case, left would have fallen below the bottom of the screen.
-        // Modify so that the bottom of the tooltip connects with the target
-        tooltipLayer.style.top = `-${
-          tooltipOffset.height - targetOffset.height - 20
-        }px`;
-        setClass(arrowLayer, "introjs-arrow right-bottom");
-      } else {
-        setClass(arrowLayer, "introjs-arrow right");
-      }
-      tooltipLayer.style.right = `${targetOffset.width + 20}px`;
-
-      break;
-    case "floating":
-      arrowLayer.style.display = "none";
-
-      //we have to adjust the top and left of layer manually for intro items without element
-      tooltipLayer.style.left = "50%";
-      tooltipLayer.style.top = "50%";
-      tooltipLayer.style.marginLeft = `-${tooltipOffset.width / 2}px`;
-      tooltipLayer.style.marginTop = `-${tooltipOffset.height / 2}px`;
-
-      break;
-    case "bottom-right-aligned":
-      setClass(arrowLayer, "introjs-arrow top-right");
-
-      tooltipLayerStyleRight = 0;
-      checkLeft(
-        targetOffset,
-        tooltipLayerStyleRight,
-        tooltipOffset,
-        tooltipLayer
-      );
-      tooltipLayer.style.top = `${targetOffset.height + 20}px`;
-      break;
-
-    case "bottom-middle-aligned":
-      setClass(arrowLayer, "introjs-arrow top-middle");
-
-      // a fix for middle aligned hints
-      if (hintMode) {
-        tooltipLayerStyleLeftRight += 5;
-      }
-
-      if (
-        checkLeft(
-          targetOffset,
-          tooltipLayerStyleLeftRight,
-          tooltipOffset,
-          tooltipLayer
-        )
-      ) {
-        tooltipLayer.style.right = "";
-        checkRight(
-          targetOffset,
-          tooltipLayerStyleLeftRight,
-          tooltipOffset,
-          windowSize,
-          tooltipLayer
-        );
-      }
-      tooltipLayer.style.top = `${targetOffset.height + 20}px`;
-      break;
-
-    // case 'bottom-left-aligned':
-    // Bottom-left-aligned is the same as the default bottom
-    // case 'bottom':
-    // Bottom going to follow the default behavior
-    default:
-      setClass(arrowLayer, "introjs-arrow top");
-
-      tooltipLayerStyleLeft = 0;
-      checkRight(
-        targetOffset,
-        tooltipLayerStyleLeft,
-        tooltipOffset,
-        windowSize,
-        tooltipLayer
-      );
-      tooltipLayer.style.top = `${targetOffset.height + 20}px`;
-  }
-};
diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
new file mode 100644
index 000000000..14f7799c2
--- /dev/null
+++ b/src/packages/tooltip/tooltip.ts
@@ -0,0 +1,448 @@
+import getOffset, { Offset } from "../../util/getOffset";
+import getWindowSize from "../../util/getWindowSize";
+import dom, { ChildDom, State } from "../dom";
+import { arrowClassName, tooltipClassName } from "../tour/classNames";
+import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
+
+const { div } = dom.tags;
+
+export const TooltipArrow = (props: {
+  tooltipPosition: State<TooltipPosition>;
+  tooltipBottomOverflow: State<boolean>;
+}) => {
+  const classNames = dom.derive(() => {
+    const classNames = [arrowClassName];
+
+    switch (props.tooltipPosition.val) {
+      case "top-right-aligned":
+        classNames.push("bottom-right");
+        break;
+
+      case "top-middle-aligned":
+        classNames.push("bottom-middle");
+        break;
+
+      case "top-left-aligned":
+      // top-left-aligned is the same as the default top
+      case "top":
+        classNames.push("bottom");
+        break;
+      case "right":
+        if (props.tooltipBottomOverflow.val) {
+          // In this case, right would have fallen below the bottom of the screen.
+          // Modify so that the bottom of the tooltip connects with the target
+          classNames.push("left-bottom");
+        } else {
+          classNames.push("left");
+        }
+        break;
+      case "left":
+        if (props.tooltipBottomOverflow.val) {
+          // In this case, left would have fallen below the bottom of the screen.
+          // Modify so that the bottom of the tooltip connects with the target
+          classNames.push("right-bottom");
+        } else {
+          classNames.push("right");
+        }
+
+        break;
+      case "floating":
+        // no arrow element for floating tooltips
+        break;
+      case "bottom-right-aligned":
+        classNames.push("top-right");
+        break;
+
+      case "bottom-middle-aligned":
+        classNames.push("top-middle");
+        break;
+
+      // case 'bottom-left-aligned':
+      // Bottom-left-aligned is the same as the default bottom
+      // case 'bottom':
+      // Bottom going to follow the default behavior
+      default:
+        classNames.push("top");
+    }
+
+    return classNames;
+  });
+
+  return div({
+    className: () => classNames.val?.filter(Boolean).join(" "),
+    style: () =>
+      `display: ${
+        props.tooltipPosition.val === "floating" ? "none" : "block"
+      };`,
+  });
+};
+
+/**
+ * Set tooltip right so it doesn't go off the left side of the window
+ *
+ * @return boolean true, if tooltipLayerStyleRight is ok. false, otherwise.
+ */
+function checkLeft(
+  targetOffset: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  },
+  tooltipLayerStyleRight: number,
+  tooltipWidth: number,
+  tooltipLeft: State<string>,
+  tooltipRight: State<string>
+): boolean {
+  if (
+    targetOffset.left +
+      targetOffset.width -
+      tooltipLayerStyleRight -
+      tooltipWidth <
+    0
+  ) {
+    // off the left side of the window
+    tooltipLeft.val = `-${targetOffset.left}px`;
+    return false;
+  }
+  tooltipRight.val = `${tooltipLayerStyleRight}px`;
+  return true;
+}
+
+/**
+ * Set tooltip left so it doesn't go off the right side of the window
+ *
+ * @return boolean true, if tooltipLayerStyleLeft is ok.  false, otherwise.
+ */
+function checkRight(
+  targetOffset: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  },
+  windowSize: {
+    width: number;
+    height: number;
+  },
+  tooltipLayerStyleLeft: number,
+  tooltipWidth: number,
+  tooltipLeft: State<string>
+): boolean {
+  if (
+    targetOffset.left + tooltipLayerStyleLeft + tooltipWidth >
+    windowSize.width
+  ) {
+    // off the right side of the window
+    tooltipLeft.val = `${
+      windowSize.width - tooltipWidth - targetOffset.left
+    }px`;
+    return false;
+  }
+
+  tooltipLeft.val = `${tooltipLayerStyleLeft}px`;
+  return true;
+}
+
+const alignTooltip = (
+  position: TooltipPosition,
+  targetOffset: { width: number; height: number; left: number; top: number },
+  windowSize: { width: number; height: number },
+  tooltipWidth: number,
+  tooltipHeight: number,
+  tooltipTop: State<string>,
+  tooltipBottom: State<string>,
+  tooltipLeft: State<string>,
+  tooltipRight: State<string>,
+  tooltipMarginLeft: State<string>,
+  tooltipMarginTop: State<string>,
+  tooltipBottomOverflow: State<boolean>,
+  showStepNumbers: boolean,
+  hintMode: boolean
+) => {
+  tooltipTop.val = "auto";
+  tooltipBottom.val = "auto";
+  tooltipLeft.val = "auto";
+  tooltipRight.val = "auto";
+  tooltipMarginLeft.val = "0";
+  tooltipMarginTop.val = "0";
+
+  let tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipWidth / 2;
+
+  switch (position) {
+    case "top-right-aligned":
+      let tooltipLayerStyleRight = 0;
+      checkLeft(
+        targetOffset,
+        tooltipLayerStyleRight,
+        tooltipWidth,
+        tooltipLeft,
+        tooltipRight
+      );
+      tooltipBottom.val = `${targetOffset.height + 20}px`;
+      break;
+
+    case "top-middle-aligned":
+      // a fix for middle aligned hints
+      if (hintMode) {
+        tooltipLayerStyleLeftRight += 5;
+      }
+
+      if (
+        checkLeft(
+          targetOffset,
+          tooltipLayerStyleLeftRight,
+          tooltipWidth,
+          tooltipLeft,
+          tooltipRight
+        )
+      ) {
+        tooltipRight.val = undefined;
+        checkRight(
+          targetOffset,
+          windowSize,
+          tooltipLayerStyleLeftRight,
+          tooltipWidth,
+          tooltipLeft
+        );
+      }
+      tooltipBottom.val = `${targetOffset.height + 20}px`;
+      break;
+
+    case "top-left-aligned":
+    // top-left-aligned is the same as the default top
+    case "top":
+      const tooltipLayerStyleLeft = hintMode ? 0 : 15;
+
+      checkRight(
+        targetOffset,
+        windowSize,
+        tooltipLayerStyleLeft,
+        tooltipWidth,
+        tooltipLeft
+      );
+      tooltipBottom.val = `${targetOffset.height + 20}px`;
+      break;
+    case "right":
+      tooltipLeft.val = `${targetOffset.width + 20}px`;
+
+      if (tooltipBottomOverflow.val) {
+        // In this case, right would have fallen below the bottom of the screen.
+        // Modify so that the bottom of the tooltip connects with the target
+        tooltipTop.val = `-${tooltipHeight - targetOffset.height - 20}px`;
+      }
+      break;
+    case "left":
+      if (!hintMode && showStepNumbers === true) {
+        tooltipTop.val = "15px";
+      }
+
+      if (tooltipBottomOverflow.val) {
+        // In this case, left would have fallen below the bottom of the screen.
+        // Modify so that the bottom of the tooltip connects with the target
+        tooltipTop.val = `-${tooltipHeight - targetOffset.height - 20}px`;
+      }
+      tooltipRight.val = `${targetOffset.width + 20}px`;
+
+      break;
+    case "floating":
+      //we have to adjust the top and left of layer manually for intro items without element
+      tooltipLeft.val = "50%";
+      tooltipTop.val = "50%";
+      tooltipMarginLeft.val = `-${tooltipWidth / 2}px`;
+      tooltipMarginTop.val = `-${tooltipHeight / 2}px`;
+
+      break;
+    case "bottom-right-aligned":
+      tooltipLayerStyleRight = 0;
+      checkLeft(
+        targetOffset,
+        tooltipLayerStyleRight,
+        tooltipWidth,
+        tooltipLeft,
+        tooltipRight
+      );
+      tooltipTop.val = `${targetOffset.height + 20}px`;
+      break;
+
+    case "bottom-middle-aligned":
+      // a fix for middle aligned hints
+      if (hintMode) {
+        tooltipLayerStyleLeftRight += 5;
+      }
+
+      if (
+        checkLeft(
+          targetOffset,
+          tooltipLayerStyleLeftRight,
+          tooltipWidth,
+          tooltipLeft,
+          tooltipRight
+        )
+      ) {
+        tooltipRight.val = "";
+        checkRight(
+          targetOffset,
+          windowSize,
+          tooltipLayerStyleLeftRight,
+          tooltipWidth,
+          tooltipLeft
+        );
+      }
+      tooltipTop.val = `${targetOffset.height + 20}px`;
+      break;
+
+    // case 'bottom-left-aligned':
+    // Bottom-left-aligned is the same as the default bottom
+    // case 'bottom':
+    // Bottom going to follow the default behavior
+    default:
+      checkRight(targetOffset, windowSize, 0, tooltipWidth, tooltipLeft);
+      tooltipTop.val = `${targetOffset.height + 20}px`;
+  }
+};
+
+export type TooltipProps = {
+  position: TooltipPosition;
+  element: HTMLElement;
+  refreshes: State<number>;
+  hintMode: boolean;
+  showStepNumbers: boolean;
+
+  transitionDuration?: number;
+
+  // auto-alignment properties
+  autoPosition: boolean;
+  positionPrecedence: TooltipPosition[];
+
+  onClick?: (e: any) => void;
+};
+
+export const Tooltip = (
+  {
+    position: initialPosition,
+    element,
+    refreshes,
+    hintMode = false,
+    showStepNumbers = false,
+
+    transitionDuration = 0,
+
+    // auto-alignment properties
+    autoPosition = true,
+    positionPrecedence = [],
+
+    onClick,
+  }: TooltipProps,
+  children?: ChildDom[]
+) => {
+  const top = dom.state<string>("auto");
+  const right = dom.state<string>("auto");
+  const bottom = dom.state<string>("auto");
+  const left = dom.state<string>("auto");
+  const marginLeft = dom.state<string>("0");
+  const marginTop = dom.state<string>("0");
+  const opacity = dom.state<number>(0);
+  // setting a default height for the tooltip instead of 0 to avoid flickering
+  // this default is coming from the CSS class and is overridden after the tooltip is rendered
+  const tooltipHeight = dom.state<number>(250);
+  // max width of the tooltip according to its CSS class
+  // this default is coming from the CSS class and is overridden after the tooltip is rendered
+  const tooltipWidth = dom.state<number>(300);
+  const position = dom.state<TooltipPosition>(initialPosition);
+  // windowSize can change if the window is resized
+  const windowSize = dom.state(getWindowSize());
+  const targetOffset = dom.state<Offset>(getOffset(element));
+  const tooltipBottomOverflow = dom.derive<boolean>(
+    () => targetOffset.val!.top + tooltipHeight.val! > windowSize.val!.height
+  );
+
+  dom.derive(() => {
+    // set the new windowSize and targetOffset if the refreshes signal changes
+    if (refreshes.val !== undefined) {
+      windowSize.val = getWindowSize();
+      targetOffset.val = getOffset(element);
+    }
+  });
+
+  // auto-align tooltip based on position precedence and target offset
+  dom.derive(() => {
+    if (
+      position.val !== undefined &&
+      initialPosition !== "floating" &&
+      autoPosition &&
+      tooltipWidth.val &&
+      tooltipHeight.val &&
+      targetOffset.val &&
+      windowSize.val
+    ) {
+      position.val = determineAutoPosition(
+        positionPrecedence,
+        targetOffset.val,
+        tooltipWidth.val,
+        tooltipHeight.val,
+        initialPosition,
+        windowSize.val
+      );
+    }
+  });
+
+  // align tooltip based on position and target offset
+  dom.derive(() => {
+    if (
+      tooltipWidth.val !== undefined &&
+      tooltipHeight.val !== undefined &&
+      tooltipBottomOverflow.val !== undefined &&
+      position.val !== undefined &&
+      targetOffset.val !== undefined &&
+      windowSize.val !== undefined
+    ) {
+      alignTooltip(
+        position.val,
+        targetOffset.val,
+        windowSize.val,
+        tooltipWidth.val,
+        tooltipHeight.val,
+        top,
+        bottom,
+        left,
+        right,
+        marginLeft,
+        marginTop,
+        tooltipBottomOverflow,
+        showStepNumbers,
+        hintMode
+      );
+    }
+  });
+
+  const tooltip = div(
+    {
+      style: () =>
+        `top: ${top.val}; right: ${right.val}; bottom: ${bottom.val}; left: ${left.val}; margin-left: ${marginLeft.val}; margin-top: ${marginTop.val};opacity: ${opacity.val}`,
+      className: () => `${tooltipClassName} introjs-${position.val}`,
+      role: "dialog",
+      onclick: onClick ?? null,
+    },
+    [
+      TooltipArrow({
+        tooltipPosition: position,
+        tooltipBottomOverflow: tooltipBottomOverflow,
+      }),
+      [children],
+    ]
+  );
+
+  // apply the transition effect
+  setTimeout(() => {
+    opacity.val = 1;
+  }, transitionDuration);
+
+  setTimeout(() => {
+    // set the correct height and width of the tooltip after it has been rendered
+    tooltipHeight.val = tooltip.offsetHeight;
+    tooltipWidth.val = tooltip.offsetWidth;
+  }, 1);
+
+  return tooltip;
+};
diff --git a/src/packages/tooltip/tooltipPosition.test.ts b/src/packages/tooltip/tooltipPosition.test.ts
new file mode 100644
index 000000000..392098fd4
--- /dev/null
+++ b/src/packages/tooltip/tooltipPosition.test.ts
@@ -0,0 +1,91 @@
+import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
+
+const positionPrecedence: TooltipPosition[] = [
+  "bottom",
+  "top",
+  "right",
+  "left",
+];
+
+describe("placeTooltip", () => {
+  test("should automatically place the tooltip position when there is enough space", () => {
+    // Arrange
+    // Act
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 200,
+        left: 200,
+        height: 100,
+        width: 100,
+        right: 300,
+        bottom: 300,
+        absoluteTop: 200,
+        absoluteLeft: 200,
+        absoluteRight: 300,
+        absoluteBottom: 300,
+      },
+      100,
+      100,
+      "top",
+      { height: 1000, width: 1000 }
+    );
+
+    // Assert
+    expect(position).toBe("top-right-aligned");
+  });
+
+  test("should use floating tooltips when height/width is limited", () => {
+    // Arrange
+    // Act
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100,
+        right: 0,
+        bottom: 0,
+        absoluteTop: 0,
+        absoluteLeft: 0,
+        absoluteRight: 0,
+        absoluteBottom: 0,
+      },
+      100,
+      100,
+      "top",
+      { height: 100, width: 100 }
+    );
+
+    // Assert
+    expect(position).toBe("floating");
+  });
+
+  test("should use bottom middle aligned when there is enough vertical space", () => {
+    // Arrange
+    // Act
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100,
+        right: 0,
+        bottom: 0,
+        absoluteTop: 0,
+        absoluteLeft: 0,
+        absoluteRight: 0,
+        absoluteBottom: 0,
+      },
+      100,
+      100,
+      "left",
+      { height: 500, width: 100 }
+    );
+
+    // Assert
+    expect(position).toBe("bottom-middle-aligned");
+  });
+});
diff --git a/src/packages/tooltip/tooltipPosition.ts b/src/packages/tooltip/tooltipPosition.ts
index a42c6add7..529becf7f 100644
--- a/src/packages/tooltip/tooltipPosition.ts
+++ b/src/packages/tooltip/tooltipPosition.ts
@@ -1,3 +1,6 @@
+import removeEntry from "../../util/removeEntry";
+import { Offset } from "../../util/getOffset";
+
 export type TooltipPosition =
   | "floating"
   | "top"
@@ -10,3 +13,150 @@ export type TooltipPosition =
   | "bottom-right-aligned"
   | "bottom-left-aligned"
   | "bottom-middle-aligned";
+
+/**
+ * auto-determine alignment
+ */
+function determineAutoAlignment(
+  offsetLeft: number,
+  tooltipWidth: number,
+  windowWidth: number,
+  desiredAlignment: TooltipPosition[]
+): TooltipPosition | null {
+  const halfTooltipWidth = tooltipWidth / 2;
+  const winWidth = Math.min(windowWidth, window.screen.width);
+
+  // valid left must be at least a tooltipWidth
+  // away from right side
+  if (winWidth - offsetLeft < tooltipWidth) {
+    removeEntry<TooltipPosition>(desiredAlignment, "top-left-aligned");
+    removeEntry<TooltipPosition>(desiredAlignment, "bottom-left-aligned");
+  }
+
+  // valid middle must be at least half
+  // width away from both sides
+  if (
+    offsetLeft < halfTooltipWidth ||
+    winWidth - offsetLeft < halfTooltipWidth
+  ) {
+    removeEntry<TooltipPosition>(desiredAlignment, "top-middle-aligned");
+    removeEntry<TooltipPosition>(desiredAlignment, "bottom-middle-aligned");
+  }
+
+  // valid right must be at least a tooltipWidth
+  // width away from left side
+  if (offsetLeft < tooltipWidth) {
+    removeEntry<TooltipPosition>(desiredAlignment, "top-right-aligned");
+    removeEntry<TooltipPosition>(desiredAlignment, "bottom-right-aligned");
+  }
+
+  if (desiredAlignment.length) {
+    return desiredAlignment[0];
+  }
+
+  return null;
+}
+
+/**
+ * Determines the position of the tooltip based on the position precedence and availability
+ * of screen space.
+ */
+export function determineAutoPosition(
+  positionPrecedence: TooltipPosition[],
+  targetOffset: Offset,
+  tooltipWidth: number,
+  tooltipHeight: number,
+  desiredTooltipPosition: TooltipPosition,
+  windowSize: { width: number; height: number }
+): TooltipPosition {
+  // Take a clone of position precedence. These will be the available
+  const possiblePositions = positionPrecedence.slice();
+
+  // Add some padding to the tooltip height and width for better positioning
+  tooltipHeight = tooltipHeight + 10;
+  tooltipWidth = tooltipWidth + 20;
+
+  // If we check all the possible areas, and there are no valid places for the tooltip, the element
+  // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen.
+  let calculatedPosition: TooltipPosition = "floating";
+
+  /*
+   * auto determine position
+   */
+
+  // Check for space below
+  if (targetOffset.absoluteBottom + tooltipHeight > windowSize.height) {
+    removeEntry<TooltipPosition>(possiblePositions, "bottom");
+  }
+
+  // Check for space above
+  if (targetOffset.absoluteTop - tooltipHeight < 0) {
+    removeEntry<TooltipPosition>(possiblePositions, "top");
+  }
+
+  // Check for space to the right
+  if (targetOffset.absoluteRight + tooltipWidth > windowSize.width) {
+    removeEntry<TooltipPosition>(possiblePositions, "right");
+  }
+
+  // Check for space to the left
+  if (targetOffset.absoluteLeft - tooltipWidth < 0) {
+    removeEntry<TooltipPosition>(possiblePositions, "left");
+  }
+
+  // strip alignment from position
+  if (desiredTooltipPosition) {
+    // ex: "bottom-right-aligned"
+    // should return 'bottom'
+    desiredTooltipPosition = desiredTooltipPosition.split(
+      "-"
+    )[0] as TooltipPosition;
+  }
+
+  if (possiblePositions.length) {
+    // Pick the first valid position, in order
+    calculatedPosition = possiblePositions[0];
+
+    if (possiblePositions.includes(desiredTooltipPosition)) {
+      // If the requested position is in the list, choose that
+      calculatedPosition = desiredTooltipPosition;
+    }
+  }
+
+  // only "top" and "bottom" positions have optional alignments
+  if (calculatedPosition === "top" || calculatedPosition === "bottom") {
+    let defaultAlignment: TooltipPosition;
+    let desiredAlignment: TooltipPosition[] = [];
+
+    if (calculatedPosition === "top") {
+      // if screen width is too small
+      // for ANY alignment, middle is
+      // probably the best for visibility
+      defaultAlignment = "top-middle-aligned";
+
+      desiredAlignment = [
+        "top-left-aligned",
+        "top-middle-aligned",
+        "top-right-aligned",
+      ];
+    } else {
+      defaultAlignment = "bottom-middle-aligned";
+
+      desiredAlignment = [
+        "bottom-left-aligned",
+        "bottom-middle-aligned",
+        "bottom-right-aligned",
+      ];
+    }
+
+    calculatedPosition =
+      determineAutoAlignment(
+        targetOffset.absoluteLeft,
+        tooltipWidth,
+        windowSize.width,
+        desiredAlignment
+      ) || defaultAlignment;
+  }
+
+  return calculatedPosition;
+}
diff --git a/src/packages/tour/addOverlayLayer.ts b/src/packages/tour/addOverlayLayer.ts
deleted file mode 100644
index bebac97a7..000000000
--- a/src/packages/tour/addOverlayLayer.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import createElement from "../../util/createElement";
-import setStyle from "../../util/setStyle";
-import { Tour } from "./tour";
-import { overlayClassName } from "./classNames";
-
-/**
- * Add overlay layer to the page
- *
- * @api private
- */
-export default function addOverlayLayer(tour: Tour) {
-  const overlayLayer = createElement("div", {
-    className: overlayClassName,
-  });
-
-  setStyle(overlayLayer, {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    position: "fixed",
-  });
-
-  tour.getTargetElement().appendChild(overlayLayer);
-
-  if (tour.getOption("exitOnOverlayClick") === true) {
-    setStyle(overlayLayer, {
-      cursor: "pointer",
-    });
-
-    overlayLayer.onclick = async () => {
-      await tour.exit();
-    };
-  }
-
-  return true;
-}
diff --git a/src/packages/tour/components/DisableInteraction.ts b/src/packages/tour/components/DisableInteraction.ts
new file mode 100644
index 000000000..efa5356ed
--- /dev/null
+++ b/src/packages/tour/components/DisableInteraction.ts
@@ -0,0 +1,50 @@
+import dom, { State } from "../../dom";
+import { disableInteractionClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourStep } from "../steps";
+
+const { div } = dom.tags;
+
+export type HelperLayerProps = {
+  currentStep: State<number | undefined>;
+  steps: TourStep[];
+  refreshes: State<number>;
+  targetElement: HTMLElement;
+  helperElementPadding: number;
+};
+
+export const DisableInteraction = ({
+  currentStep,
+  steps,
+  refreshes,
+  targetElement,
+  helperElementPadding,
+}: HelperLayerProps) => {
+  const step = dom.derive(() =>
+    currentStep.val !== undefined ? steps[currentStep.val] : null
+  );
+
+  return () => {
+    if (!step.val) {
+      return null;
+    }
+
+    const disableInteraction = div({
+      className: disableInteractionClassName,
+    });
+
+    dom.derive(() => {
+      // set the position of the reference layer if the refreshes signal changes
+      if (!step.val || refreshes.val == undefined) return;
+
+      setPositionRelativeToStep(
+        targetElement,
+        disableInteraction,
+        step.val,
+        helperElementPadding
+      );
+    });
+
+    return disableInteraction;
+  };
+};
diff --git a/src/packages/tour/components/FloatingElement.ts b/src/packages/tour/components/FloatingElement.ts
new file mode 100644
index 000000000..ed5216554
--- /dev/null
+++ b/src/packages/tour/components/FloatingElement.ts
@@ -0,0 +1,23 @@
+import dom, { State } from "../../dom";
+import { floatingElementClassName } from "../classNames";
+
+const { div } = dom.tags;
+
+export type FloatingElementProps = {
+  currentStep: State<number | undefined>;
+};
+
+export const FloatingElement = ({ currentStep }: FloatingElementProps) => {
+  const floatingElement = div({
+    className: floatingElementClassName,
+  });
+
+  dom.derive(() => {
+    // meaning the tour has ended so we should remove the floating element
+    if (currentStep.val === undefined) {
+      floatingElement.remove();
+    }
+  });
+
+  return floatingElement;
+};
diff --git a/src/packages/tour/components/HelperLayer.ts b/src/packages/tour/components/HelperLayer.ts
new file mode 100644
index 000000000..4a1f3eb1d
--- /dev/null
+++ b/src/packages/tour/components/HelperLayer.ts
@@ -0,0 +1,76 @@
+import { style } from "../../../util/style";
+import dom, { State } from "../../dom";
+import { helperLayerClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourStep } from "../steps";
+
+const { div } = dom.tags;
+
+const getClassName = ({
+  step,
+  tourHighlightClass,
+}: {
+  step: State<TourStep | null>;
+  tourHighlightClass: string;
+}) => {
+  let highlightClass = helperLayerClassName;
+
+  // check for a current step highlight class
+  if (step.val && typeof step.val.highlightClass === "string") {
+    highlightClass += ` ${step.val.highlightClass}`;
+  }
+
+  // check for options highlight class
+  if (typeof tourHighlightClass === "string") {
+    highlightClass += ` ${tourHighlightClass}`;
+  }
+
+  return highlightClass;
+};
+
+export type HelperLayerProps = {
+  currentStep: State<number | undefined>;
+  steps: TourStep[];
+  refreshes: State<number>;
+  targetElement: HTMLElement;
+  tourHighlightClass: string;
+  overlayOpacity: number;
+  helperLayerPadding: number;
+};
+
+export const HelperLayer = ({
+  currentStep,
+  steps,
+  refreshes,
+  targetElement,
+  tourHighlightClass,
+  overlayOpacity,
+  helperLayerPadding,
+}: HelperLayerProps) => {
+  const step = dom.derive(() =>
+    currentStep.val !== undefined ? steps[currentStep.val] : null
+  );
+
+  const helperLayer = div({
+    className: () => getClassName({ step, tourHighlightClass }),
+    style: style({
+      // the inner box shadow is the border for the highlighted element
+      // the outer box shadow is the overlay effect
+      "box-shadow": `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${overlayOpacity.toString()}) 0 0 0 5000px`,
+    }),
+  });
+
+  dom.derive(() => {
+    // set the new position if the step or refreshes change
+    if (!step.val || refreshes.val === undefined) return;
+
+    setPositionRelativeToStep(
+      targetElement,
+      helperLayer,
+      step.val,
+      helperLayerPadding
+    );
+  });
+
+  return helperLayer;
+};
diff --git a/src/packages/tour/components/OverlayLayer.ts b/src/packages/tour/components/OverlayLayer.ts
new file mode 100644
index 000000000..624de8062
--- /dev/null
+++ b/src/packages/tour/components/OverlayLayer.ts
@@ -0,0 +1,36 @@
+import { style } from "../../../util/style";
+import { overlayClassName } from "../classNames";
+import dom from "../../dom";
+import { Tour } from "../tour";
+
+const { div } = dom.tags;
+
+export type OverlayLayerProps = {
+  exitOnOverlayClick: boolean;
+  onExitTour: () => Promise<Tour>;
+};
+
+export const OverlayLayer = ({
+  exitOnOverlayClick,
+  onExitTour,
+}: OverlayLayerProps) => {
+  const overlayLayer = div({
+    className: overlayClassName,
+    style: style({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: "fixed",
+      cursor: exitOnOverlayClick ? "pointer" : "auto",
+    }),
+  });
+
+  if (exitOnOverlayClick) {
+    overlayLayer.onclick = async () => {
+      await onExitTour();
+    };
+  }
+
+  return overlayLayer;
+};
diff --git a/src/packages/tour/components/ReferenceLayer.ts b/src/packages/tour/components/ReferenceLayer.ts
new file mode 100644
index 000000000..3aae54189
--- /dev/null
+++ b/src/packages/tour/components/ReferenceLayer.ts
@@ -0,0 +1,38 @@
+import dom from "../../dom";
+import { tooltipReferenceLayerClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourTooltip, TourTooltipProps } from "./TourTooltip";
+
+const { div } = dom.tags;
+
+export type ReferenceLayerProps = TourTooltipProps & {
+  targetElement: HTMLElement;
+  helperElementPadding: number;
+};
+
+export const ReferenceLayer = ({
+  targetElement,
+  helperElementPadding,
+  ...props
+}: ReferenceLayerProps) => {
+  const referenceLayer = div(
+    {
+      className: tooltipReferenceLayerClassName,
+    },
+    TourTooltip(props)
+  );
+
+  dom.derive(() => {
+    // set the position of the reference layer if the refreshes signal changes
+    if (props.refreshes.val == undefined) return;
+
+    setPositionRelativeToStep(
+      targetElement,
+      referenceLayer,
+      props.step,
+      helperElementPadding
+    );
+  });
+
+  return referenceLayer;
+};
diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
new file mode 100644
index 000000000..16905350a
--- /dev/null
+++ b/src/packages/tour/components/TourRoot.ts
@@ -0,0 +1,186 @@
+import dom from "../../dom";
+import { ReferenceLayer } from "./ReferenceLayer";
+import { HelperLayer } from "./HelperLayer";
+import { Tour } from "../tour";
+import { DisableInteraction } from "./DisableInteraction";
+import { OverlayLayer } from "./OverlayLayer";
+import { nextStep, previousStep } from "../steps";
+import { doneButtonClassName } from "../classNames";
+import { style } from "../../../util/style";
+
+const { div } = dom.tags;
+
+export type TourRootProps = {
+  tour: Tour;
+};
+
+export const TourRoot = ({ tour }: TourRootProps) => {
+  const currentStepSignal = tour.getCurrentStepSignal();
+  const refreshesSignal = tour.getRefreshesSignal();
+  const steps = tour.getSteps();
+
+  const helperLayer = HelperLayer({
+    currentStep: currentStepSignal,
+    steps,
+    refreshes: refreshesSignal,
+    targetElement: tour.getTargetElement(),
+    tourHighlightClass: tour.getOption("highlightClass"),
+    overlayOpacity: tour.getOption("overlayOpacity"),
+    helperLayerPadding: tour.getOption("helperElementPadding"),
+  });
+
+  const opacity = dom.state(0);
+  // render the tooltip immediately when the tour starts
+  // but we reset the transition duration to 300ms when the tooltip is rendered for the first time
+  let tooltipTransitionDuration = 0;
+
+  const root = div(
+    {
+      className: "introjs-tour",
+      style: () => style({ opacity: `${opacity.val}` }),
+    },
+    // helperLayer should not be re-rendered when the state changes for the transition to work
+    helperLayer,
+    () => {
+      // do not remove this check, it is necessary for this state-binding to work
+      // and render the entire section every time the state changes
+      if (currentStepSignal.val === undefined) {
+        return null;
+      }
+
+      const step = dom.derive(() =>
+        currentStepSignal.val !== undefined
+          ? steps[currentStepSignal.val]
+          : null
+      );
+
+      if (!step.val) {
+        return null;
+      }
+
+      const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
+      const overlayLayer = OverlayLayer({
+        exitOnOverlayClick,
+        onExitTour: async () => {
+          return tour.exit();
+        },
+      });
+
+      const referenceLayer = ReferenceLayer({
+        step: step.val,
+        targetElement: tour.getTargetElement(),
+        refreshes: refreshesSignal,
+        helperElementPadding: tour.getOption("helperElementPadding"),
+
+        transitionDuration: tooltipTransitionDuration,
+
+        positionPrecedence: tour.getOption("positionPrecedence"),
+        autoPosition: tour.getOption("autoPosition"),
+        showStepNumbers: tour.getOption("showStepNumbers"),
+
+        steps: tour.getSteps(),
+        currentStep: currentStepSignal.val,
+
+        onBulletClick: (stepNumber: number) => {
+          tour.goToStep(stepNumber);
+        },
+
+        bullets: tour.getOption("showBullets"),
+
+        buttons: tour.getOption("showButtons"),
+        nextLabel: "Next",
+        onNextClick: async (e: any) => {
+          if (!tour.isLastStep()) {
+            await nextStep(tour);
+          } else if (
+            new RegExp(doneButtonClassName, "gi").test(
+              (e.target as HTMLElement).className
+            )
+          ) {
+            await tour
+              .callback("complete")
+              ?.call(tour, tour.getCurrentStep(), "done");
+
+            await tour.exit();
+          }
+        },
+        prevLabel: tour.getOption("prevLabel"),
+        onPrevClick: async () => {
+          const currentStep = tour.getCurrentStep();
+          if (currentStep !== undefined && currentStep > 0) {
+            await previousStep(tour);
+          }
+        },
+        skipLabel: tour.getOption("skipLabel"),
+        onSkipClick: async () => {
+          if (tour.isLastStep()) {
+            await tour
+              .callback("complete")
+              ?.call(tour, tour.getCurrentStep(), "skip");
+          }
+
+          await tour.callback("skip")?.call(tour, tour.getCurrentStep());
+
+          await tour.exit();
+        },
+        buttonClass: tour.getOption("buttonClass"),
+        nextToDone: tour.getOption("nextToDone"),
+        doneLabel: tour.getOption("doneLabel"),
+        hideNext: tour.getOption("hideNext"),
+        hidePrev: tour.getOption("hidePrev"),
+
+        progress: tour.getOption("showProgress"),
+        progressBarAdditionalClass: tour.getOption(
+          "progressBarAdditionalClass"
+        ),
+
+        stepNumbers: tour.getOption("showStepNumbers"),
+        stepNumbersOfLabel: tour.getOption("stepNumbersOfLabel"),
+
+        scrollToElement: tour.getOption("scrollToElement"),
+        scrollPadding: tour.getOption("scrollPadding"),
+
+        dontShowAgain: tour.getOption("dontShowAgain"),
+        onDontShowAgainChange: (checked: boolean) => {
+          tour.setDontShowAgain(checked);
+        },
+        dontShowAgainLabel: tour.getOption("dontShowAgainLabel"),
+      });
+
+      const disableInteraction = step.val.disableInteraction
+        ? DisableInteraction({
+            currentStep: currentStepSignal,
+            steps: tour.getSteps(),
+            refreshes: refreshesSignal,
+            targetElement: tour.getTargetElement(),
+            helperElementPadding: tour.getOption("helperElementPadding"),
+          })
+        : null;
+
+      // wait for the helper layer to be rendered before showing the tooltip
+      // this is to prevent the tooltip from flickering when the helper layer is transitioning
+      // the 300ms delay is coming from the helper layer transition duration
+      tooltipTransitionDuration = 300;
+
+      return div(overlayLayer, referenceLayer, disableInteraction);
+    }
+  );
+
+  dom.derive(() => {
+    // to clean up the root element when the tour is done
+    if (currentStepSignal.val === undefined) {
+      opacity.val = 0;
+
+      setTimeout(() => {
+        root.remove();
+      }, 250);
+    }
+  });
+
+  setTimeout(() => {
+    // fade in the root element
+    opacity.val = 1;
+  }, 1);
+
+  return root;
+};
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
new file mode 100644
index 000000000..a56e15536
--- /dev/null
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -0,0 +1,513 @@
+import { Tooltip, type TooltipProps } from "../../tooltip/tooltip";
+import dom, { PropValueOrDerived } from "../../dom";
+import {
+  activeClassName,
+  bulletsClassName,
+  disabledButtonClassName,
+  doneButtonClassName,
+  dontShowAgainClassName,
+  fullButtonClassName,
+  helperNumberLayerClassName,
+  hiddenButtonClassName,
+  nextButtonClassName,
+  previousButtonClassName,
+  progressBarClassName,
+  progressClassName,
+  skipButtonClassName,
+  tooltipButtonsClassName,
+  tooltipHeaderClassName,
+  tooltipTextClassName,
+  tooltipTitleClassName,
+} from "../classNames";
+import { TourStep } from "../steps";
+import { dataStepNumberAttribute } from "../dataAttributes";
+import scrollParentToElement from "../../../util/scrollParentToElement";
+import scrollTo from "../../../util/scrollTo";
+
+const { h1, div, input, label, ul, li, a } = dom.tags;
+
+const DontShowAgain = ({
+  dontShowAgainLabel,
+  onDontShowAgainChange,
+}: {
+  dontShowAgainLabel: string;
+  onDontShowAgainChange: (checked: boolean) => void;
+}) => {
+  return div({ className: dontShowAgainClassName }, [
+    input({
+      type: "checkbox",
+      id: dontShowAgainClassName,
+      name: dontShowAgainClassName,
+      onchange: (e: any) => {
+        onDontShowAgainChange((e.target as HTMLInputElement).checked);
+      },
+    }),
+    label({ for: dontShowAgainClassName }, dontShowAgainLabel),
+  ]);
+};
+
+const Bullets = ({
+  step,
+  steps,
+  onBulletClick,
+}: {
+  step: TourStep;
+  steps: TourStep[];
+  onBulletClick: (stepNumber: number) => void;
+}): HTMLElement => {
+  return div({ className: bulletsClassName }, [
+    ul({ role: "tablist" }, [
+      ...steps.map(({ step: stepNumber }) => {
+        const innerLi = li(
+          {
+            role: "presentation",
+          },
+          [
+            a({
+              role: "tab",
+              className: () =>
+                `${step.step === stepNumber ? activeClassName : ""}`,
+              onclick: (e: any) => {
+                const stepNumberAttribute = (
+                  e.target as HTMLElement
+                ).getAttribute(dataStepNumberAttribute);
+                if (!stepNumberAttribute) return;
+
+                onBulletClick(parseInt(stepNumberAttribute, 10));
+              },
+              innerHTML: "&nbsp;",
+              [dataStepNumberAttribute]: stepNumber,
+            }),
+          ]
+        );
+
+        return innerLi;
+      }),
+    ]),
+  ]);
+};
+
+const ProgressBar = ({
+  steps,
+  currentStep,
+  progressBarAdditionalClass,
+}: {
+  steps: TourStep[];
+  currentStep: number;
+  progressBarAdditionalClass: string;
+}) => {
+  const progress = ((currentStep + 1) / steps.length) * 100;
+
+  return div({ className: progressClassName }, [
+    div({
+      className: `${progressBarClassName} ${
+        progressBarAdditionalClass ? progressBarAdditionalClass : ""
+      }`,
+      role: "progress",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": () => progress.toString(),
+      style: `width:${progress}%;`,
+    }),
+  ]);
+};
+
+const StepNumber = ({
+  step,
+  steps,
+  stepNumbersOfLabel,
+}: {
+  step: TourStep;
+  steps: TourStep[];
+  stepNumbersOfLabel: string;
+}) => {
+  return div({ className: helperNumberLayerClassName }, [
+    `${step.step} ${stepNumbersOfLabel} ${steps.length}`,
+  ]);
+};
+
+const Button = ({
+  label,
+  onClick,
+  disabled,
+  className,
+}: {
+  label: string;
+  onClick: (e: any) => void;
+  disabled?: PropValueOrDerived;
+  className?: PropValueOrDerived;
+}) => {
+  return a(
+    {
+      role: "button",
+      tabIndex: 0,
+      ariaDisabled: disabled ?? false,
+      onclick: onClick,
+      className: className ?? "",
+    },
+    [label]
+  );
+};
+
+const NextButton = ({
+  steps,
+  currentStep,
+
+  nextLabel,
+  doneLabel,
+
+  hideNext,
+  hidePrev,
+  nextToDone,
+  onClick,
+  buttonClass,
+}: {
+  steps: TourStep[];
+  currentStep: number;
+
+  nextLabel: string;
+  doneLabel: string;
+
+  hideNext: boolean;
+  hidePrev: boolean;
+  nextToDone: boolean;
+  onClick: (e: any) => void;
+  buttonClass: string;
+}) => {
+  const isFullButton = currentStep === 0 && steps.length > 1 && hidePrev;
+  const isLastStep = currentStep === steps.length - 1 || steps.length === 1;
+
+  const isDisabled = dom.derive(() => {
+    // when the current step is the last one or there is only one step to show
+    return isLastStep && !hideNext && !nextToDone;
+  });
+
+  const isDoneButton = dom.derive(() => {
+    return isLastStep && !hideNext && nextToDone;
+  });
+
+  const nextButton = Button({
+    label: isDoneButton.val ? doneLabel : nextLabel,
+    onClick,
+    className: () => {
+      const classNames = [buttonClass, nextButtonClassName];
+
+      if (isDoneButton.val) {
+        classNames.push(doneButtonClassName);
+      }
+
+      if (isDisabled.val) {
+        classNames.push(disabledButtonClassName);
+      }
+
+      if (isFullButton) {
+        classNames.push(fullButtonClassName);
+      }
+
+      return classNames.filter(Boolean).join(" ");
+    },
+  });
+
+  // wait for the button to be rendered
+  setTimeout(() => {
+    nextButton.focus();
+  }, 1);
+
+  return nextButton;
+};
+
+const PrevButton = ({
+  label,
+  steps,
+  currentStep,
+  hidePrev,
+  hideNext,
+  onClick,
+  buttonClass,
+}: {
+  label: string;
+  steps: TourStep[];
+  currentStep: number;
+  hidePrev: boolean;
+  hideNext: boolean;
+  onClick: (e: any) => void;
+  buttonClass: string;
+}) => {
+  const isFirstStep = currentStep === 0 && steps.length > 1;
+  // when the current step is the first one and there are more steps to show
+  const isDisabled = isFirstStep && !hidePrev;
+  const isHidden = isFirstStep && hidePrev;
+  // when the current step is the last one or there is only one step to show
+  const isFullButton =
+    (currentStep === steps.length - 1 || steps.length === 1) && hideNext;
+
+  return Button({
+    label,
+    onClick,
+    disabled: isDisabled,
+    className: () => {
+      const classNames = [buttonClass, previousButtonClassName];
+
+      if (isFullButton) {
+        classNames.push(fullButtonClassName);
+      }
+
+      if (isDisabled) {
+        classNames.push(disabledButtonClassName);
+      }
+
+      if (isHidden) {
+        classNames.push(hiddenButtonClassName);
+      }
+
+      return classNames.filter(Boolean).join(" ");
+    },
+  });
+};
+
+const Buttons = ({
+  steps,
+  currentStep,
+
+  buttonClass,
+
+  nextToDone,
+  doneLabel,
+
+  hideNext,
+  nextLabel,
+  onNextClick,
+
+  hidePrev,
+  prevLabel,
+  onPrevClick,
+}: {
+  steps: TourStep[];
+  currentStep: number;
+
+  buttonClass: string;
+
+  nextToDone: boolean;
+  doneLabel: string;
+
+  hideNext: boolean;
+  nextLabel: string;
+  onNextClick: (e: any) => void;
+
+  hidePrev: boolean;
+  prevLabel: string;
+  onPrevClick: (e: any) => void;
+}) => {
+  return div(
+    { className: tooltipButtonsClassName },
+    steps.length > 1
+      ? PrevButton({
+          label: prevLabel,
+          steps,
+          currentStep,
+          hidePrev,
+          hideNext,
+          onClick: onPrevClick,
+          buttonClass,
+        })
+      : null,
+    NextButton({
+      currentStep,
+      steps,
+      doneLabel,
+      nextLabel,
+      onClick: onNextClick,
+      hideNext,
+      hidePrev,
+      nextToDone,
+      buttonClass,
+    })
+  );
+};
+
+const Header = ({
+  title,
+
+  skipLabel,
+  onSkipClick,
+}: {
+  title: string;
+
+  skipLabel: string;
+  onSkipClick: (e: any) => void;
+}) => {
+  return div({ className: tooltipHeaderClassName }, [
+    h1({ className: tooltipTitleClassName }, title),
+    Button({
+      className: skipButtonClassName,
+      label: skipLabel,
+      onClick: onSkipClick,
+    }),
+  ]);
+};
+
+const scroll = ({
+  step,
+  tooltip,
+  scrollToElement,
+  scrollPadding,
+}: {
+  step: TourStep;
+  tooltip: HTMLElement;
+  scrollToElement: boolean;
+  scrollPadding: number;
+}) => {
+  // when target is within a scrollable element
+  scrollParentToElement(scrollToElement, step.element as HTMLElement);
+
+  // change the scroll of the window, if needed
+  scrollTo(
+    scrollToElement,
+    step.scrollTo,
+    scrollPadding,
+    step.element as HTMLElement,
+    tooltip
+  );
+};
+
+export type TourTooltipProps = Omit<
+  TooltipProps,
+  "hintMode" | "position" | "element"
+> & {
+  step: TourStep;
+  steps: TourStep[];
+  currentStep: number;
+
+  bullets: boolean;
+  onBulletClick: (stepNumber: number) => void;
+
+  buttons: boolean;
+  nextLabel: string;
+  onNextClick: (e: any) => void;
+  prevLabel: string;
+  onPrevClick: (e: any) => void;
+  skipLabel: string;
+  onSkipClick: (e: any) => void;
+  buttonClass: string;
+  nextToDone: boolean;
+  doneLabel: string;
+  hideNext: boolean;
+  hidePrev: boolean;
+
+  progress: boolean;
+  progressBarAdditionalClass: string;
+
+  stepNumbers: boolean;
+  stepNumbersOfLabel: string;
+
+  scrollToElement: boolean;
+  scrollPadding: number;
+
+  dontShowAgain: boolean;
+  dontShowAgainLabel: string;
+  onDontShowAgainChange: (checked: boolean) => void;
+};
+
+export const TourTooltip = ({
+  step,
+  currentStep,
+  steps,
+
+  onBulletClick,
+
+  bullets,
+
+  buttons,
+  nextLabel,
+  onNextClick,
+  prevLabel,
+  onPrevClick,
+  skipLabel,
+  onSkipClick,
+  buttonClass,
+  nextToDone,
+  doneLabel,
+  hideNext,
+  hidePrev,
+
+  progress,
+  progressBarAdditionalClass,
+
+  stepNumbers,
+  stepNumbersOfLabel,
+
+  scrollToElement,
+  scrollPadding,
+
+  dontShowAgain,
+  onDontShowAgainChange,
+  dontShowAgainLabel,
+  ...props
+}: TourTooltipProps) => {
+  const children = [];
+  const title = step.title;
+  const text = step.intro;
+  const position = step.position;
+
+  children.push(Header({ title, skipLabel, onSkipClick }));
+
+  children.push(div({ className: tooltipTextClassName }, text));
+
+  if (dontShowAgain) {
+    children.push(DontShowAgain({ dontShowAgainLabel, onDontShowAgainChange }));
+  }
+
+  if (bullets) {
+    children.push(Bullets({ step, steps, onBulletClick }));
+  }
+
+  if (progress) {
+    children.push(
+      ProgressBar({ steps, currentStep, progressBarAdditionalClass })
+    );
+  }
+
+  if (stepNumbers) {
+    children.push(StepNumber({ step, steps, stepNumbersOfLabel }));
+  }
+
+  if (buttons) {
+    children.push(
+      Buttons({
+        steps,
+        currentStep,
+
+        nextLabel: nextLabel,
+        onNextClick: onNextClick,
+
+        prevLabel: prevLabel,
+        onPrevClick: onPrevClick,
+
+        buttonClass,
+        nextToDone,
+        doneLabel,
+        hideNext,
+        hidePrev,
+      })
+    );
+  }
+
+  const tooltip = Tooltip(
+    {
+      ...props,
+      element: step.element as HTMLElement,
+      hintMode: false,
+      position,
+    },
+    children
+  );
+
+  scroll({
+    step,
+    tooltip,
+    scrollToElement: scrollToElement,
+    scrollPadding: scrollPadding,
+  });
+
+  return tooltip;
+};
diff --git a/src/packages/tour/dont-show-again.cy.ts b/src/packages/tour/dont-show-again.cy.ts
index f6677a33b..90d877069 100644
--- a/src/packages/tour/dont-show-again.cy.ts
+++ b/src/packages/tour/dont-show-again.cy.ts
@@ -24,13 +24,13 @@ context("Don't show again checkbox", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("dont-show-again-checkbox-first-step", 0.05);
+      cy.compareSnapshot("dont-show-again-checkbox-first-step");
 
       cy.nextStep();
 
       cy.wait(800);
 
-      cy.compareSnapshot("dont-show-again-checkbox-second-step", 0.05);
+      cy.compareSnapshot("dont-show-again-checkbox-second-step");
     });
   });
 
@@ -53,7 +53,7 @@ context("Don't show again checkbox", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("dont-show-again-clicked-first-step", 0.05);
+      cy.compareSnapshot("dont-show-again-clicked-first-step");
 
       cy.get(".introjs-dontShowAgain input").click();
 
@@ -61,13 +61,13 @@ context("Don't show again checkbox", () => {
 
       cy.wait(800);
 
-      cy.compareSnapshot("dont-show-again-clicked-after-exit", 0.05);
+      cy.compareSnapshot("dont-show-again-clicked-after-exit");
 
       instance.start();
 
       cy.wait(500);
 
-      cy.compareSnapshot("dont-show-again-clicked-after-second-start", 0.05);
+      cy.compareSnapshot("dont-show-again-clicked-after-second-start");
     });
   });
 });
diff --git a/src/packages/tour/exitIntro.test.ts b/src/packages/tour/exitIntro.test.ts
index ab88b62e5..07b4e3d1c 100644
--- a/src/packages/tour/exitIntro.test.ts
+++ b/src/packages/tour/exitIntro.test.ts
@@ -8,7 +8,7 @@ describe("exitIntro", () => {
 
     await mockTour.exit(false);
 
-    expect(mockTour.getCurrentStep()).toBe(-1);
+    expect(mockTour.getCurrentStep()).toBeUndefined();
   });
 
   test("should call the onexit and onbeforeexit callbacks", async () => {
diff --git a/src/packages/tour/exitIntro.ts b/src/packages/tour/exitIntro.ts
index e4a1aa070..0ab281198 100644
--- a/src/packages/tour/exitIntro.ts
+++ b/src/packages/tour/exitIntro.ts
@@ -1,17 +1,5 @@
-import removeShowElement from "./removeShowElement";
-import { removeChild, removeAnimatedChild } from "../../util/removeChild";
+import { removeShowElement } from "./showElement";
 import { Tour } from "./tour";
-import {
-  disableInteractionClassName,
-  floatingElementClassName,
-  helperLayerClassName,
-  overlayClassName,
-  tooltipReferenceLayerClassName,
-} from "./classNames";
-import {
-  queryElementByClassName,
-  queryElementsByClassName,
-} from "../../util/queryElement";
 
 /**
  * Exit from intro
@@ -26,60 +14,23 @@ export default async function exitIntro(
   const targetElement = tour.getTargetElement();
   let continueExit: boolean | undefined = true;
 
-  // calling onbeforeexit callback
-  //
+  // calling the onBeforeExit callback if it is defined
   // If this callback return `false`, it would halt the process
   continueExit = await tour.callback("beforeExit")?.call(tour, targetElement);
 
   // skip this check if `force` parameter is `true`
-  // otherwise, if `onbeforeexit` returned `false`, don't exit the intro
+  // otherwise, if `onBeforEexit` returned `false`, don't exit the intro
   if (!force && continueExit === false) return false;
 
-  // remove overlay layers from the page
-  const overlayLayers = Array.from(
-    queryElementsByClassName(overlayClassName, targetElement)
-  );
-
-  if (overlayLayers && overlayLayers.length) {
-    for (const overlayLayer of overlayLayers) {
-      removeChild(overlayLayer);
-    }
-  }
-
-  const referenceLayer = queryElementByClassName(
-    tooltipReferenceLayerClassName,
-    targetElement
-  );
-  removeChild(referenceLayer);
-
-  //remove disableInteractionLayer
-  const disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName,
-    targetElement
-  );
-  removeChild(disableInteractionLayer);
-
-  //remove intro floating element
-  const floatingElement = queryElementByClassName(
-    floatingElementClassName,
-    targetElement
-  );
-  removeChild(floatingElement);
-
   removeShowElement();
 
-  //remove all helper layers
-  const helperLayer = queryElementByClassName(
-    helperLayerClassName,
-    targetElement
-  );
-  await removeAnimatedChild(helperLayer);
-
   //check if any callback is defined
   await tour.callback("exit")?.call(tour);
 
   // set the step to default
-  tour.setCurrentStep(-1);
+  // this would update the signal to the tour that the tour has ended
+  // and the corresponding components would be updated
+  tour.resetCurrentStep();
 
   return true;
 }
diff --git a/src/packages/tour/highlight.cy.ts b/src/packages/tour/highlight.cy.ts
index eae7d71d8..299eea7d0 100644
--- a/src/packages/tour/highlight.cy.ts
+++ b/src/packages/tour/highlight.cy.ts
@@ -22,13 +22,13 @@ context("Highlight", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("highlight-element-first-step", 0.05);
+      cy.compareSnapshot("highlight-element-first-step");
 
       cy.nextStep();
 
       cy.wait(800);
 
-      cy.compareSnapshot("highlight-element-second-step", 0.05);
+      cy.compareSnapshot("highlight-element-second-step");
     });
   });
 
@@ -52,6 +52,7 @@ context("Highlight", () => {
       let sp = cy.spy(window, "click");
 
       cy.nextStep();
+      cy.wait(500);
       cy.get(".introjs-tooltiptext").contains("step two");
 
       cy.get(".introjs-helperLayer").realHover();
@@ -78,6 +79,7 @@ context("Highlight", () => {
         })
         .start();
 
+      cy.wait(500);
       let sp = cy.spy(window, "click");
 
       cy.get(".introjs-helperLayer").realHover();
@@ -135,6 +137,8 @@ context("Highlight", () => {
         })
         .start();
 
+      cy.wait(500);
+
       let sp = cy.spy(window, "clickRelative");
 
       cy.get(".introjs-helperLayer").realHover();
@@ -192,6 +196,8 @@ context("Highlight", () => {
         })
         .start();
 
+      cy.wait(500);
+
       let sp = cy.spy(window, "clickAbsolute");
 
       cy.get(".introjs-helperLayer").realHover();
@@ -223,7 +229,6 @@ context("Highlight", () => {
 
       cy.compareSnapshot("highlight-fixed-element", {
         capture: "viewport",
-        errorThreshold: 0.05,
       });
     });
   });
@@ -252,7 +257,6 @@ context("Highlight", () => {
 
       cy.compareSnapshot("highlight-fixed-element-scroll", {
         capture: "viewport",
-        errorThreshold: 0.05,
       });
     });
   });
@@ -281,7 +285,6 @@ context("Highlight", () => {
 
       cy.compareSnapshot("highlight-fixed-parent-element-scroll", {
         capture: "viewport",
-        errorThreshold: 0.05,
       });
     });
   });
diff --git a/src/packages/tour/mock.ts b/src/packages/tour/mock.ts
index 3590a63da..f8efab675 100644
--- a/src/packages/tour/mock.ts
+++ b/src/packages/tour/mock.ts
@@ -1,4 +1,4 @@
-import createElement from "../../util/createElement";
+import dom from "../dom";
 import { TourStep } from "./steps";
 import { Tour } from "./tour";
 import {
@@ -7,22 +7,24 @@ import {
   dataStepAttribute,
 } from "./dataAttributes";
 
+const { div, b, a, h1 } = dom.tags;
+
 export const appendMockSteps = (targetElement: HTMLElement = document.body) => {
-  const mockElementOne = createElement("div");
+  const mockElementOne = div();
   mockElementOne.setAttribute(dataIntroAttribute, "Mock element");
 
-  const mockElementTwo = createElement("b");
+  const mockElementTwo = b();
   mockElementTwo.setAttribute(dataIntroAttribute, "Mock element left position");
   mockElementTwo.setAttribute(dataPosition, "left");
 
-  const mockElementThree = createElement("h1");
+  const mockElementThree = h1();
   mockElementThree.setAttribute(
     dataIntroAttribute,
     "Mock element second to last"
   );
   mockElementThree.setAttribute(dataStepAttribute, "10");
 
-  const mockElementFour = createElement("a");
+  const mockElementFour = a();
   mockElementFour.setAttribute(dataIntroAttribute, "Mock element last");
   mockElementFour.setAttribute(dataStepAttribute, "20");
 
diff --git a/src/packages/tour/modal.cy.ts b/src/packages/tour/modal.cy.ts
index d57b024f1..85b9711cd 100644
--- a/src/packages/tour/modal.cy.ts
+++ b/src/packages/tour/modal.cy.ts
@@ -21,17 +21,17 @@ context("Modal", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("first-step", 0.05);
+      cy.compareSnapshot("first-step");
 
       cy.nextStep();
       cy.wait(800);
 
-      cy.compareSnapshot("second-step", 0.05);
+      cy.compareSnapshot("second-step");
 
       cy.nextStep();
       cy.wait(800);
 
-      cy.compareSnapshot("exit", 0.05);
+      cy.compareSnapshot("exit");
     });
   });
 
@@ -63,15 +63,15 @@ context("Modal", () => {
         .start();
 
       cy.wait(800);
-      cy.compareSnapshot("position-bottom", 0.05);
+      cy.compareSnapshot("position-bottom");
 
       cy.nextStep();
       cy.wait(500);
-      cy.compareSnapshot("position-right", 0.05);
+      cy.compareSnapshot("position-right");
 
       cy.nextStep();
       cy.wait(500);
-      cy.compareSnapshot("position-left", 0.05);
+      cy.compareSnapshot("position-left");
     });
   });
 
@@ -95,11 +95,11 @@ context("Modal", () => {
       instance.start();
 
       cy.wait(800).then(() => {
-        cy.compareSnapshot("refresh-first-step", 0.05);
+        cy.compareSnapshot("refresh-first-step");
         cy.nextStep();
 
         cy.wait(500).then(() => {
-          cy.compareSnapshot("refresh-second-step", 0.05);
+          cy.compareSnapshot("refresh-second-step");
 
           cy.wait(500).then(() => {
             instance
@@ -123,7 +123,7 @@ context("Modal", () => {
 
             cy.nextStep();
             cy.wait(500);
-            cy.compareSnapshot("refresh-third-step", 0.05);
+            cy.compareSnapshot("refresh-third-step");
           });
         });
       });
diff --git a/src/packages/tour/onResize.ts b/src/packages/tour/onResize.ts
deleted file mode 100644
index 31e011dcd..000000000
--- a/src/packages/tour/onResize.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import refresh from "./refresh";
-import { Tour } from "./tour";
-
-export default function onResize(tour: Tour) {
-  refresh(tour);
-}
diff --git a/src/packages/tour/position.ts b/src/packages/tour/position.ts
index 2c1aba139..45f22c231 100644
--- a/src/packages/tour/position.ts
+++ b/src/packages/tour/position.ts
@@ -1,4 +1,4 @@
-import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
+import { setPositionRelativeTo } from "../../util/positionRelativeTo";
 import { TourStep } from "./steps";
 
 /**
diff --git a/src/packages/tour/progressbar.cy.ts b/src/packages/tour/progressbar.cy.ts
index c4adb7a1a..369ff1b9a 100644
--- a/src/packages/tour/progressbar.cy.ts
+++ b/src/packages/tour/progressbar.cy.ts
@@ -22,17 +22,17 @@ context("ProgressBar", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("first-step", 0.05);
+      cy.compareSnapshot("first-step");
 
       cy.nextStep();
       cy.wait(800);
 
-      cy.compareSnapshot("second-step", 0.05);
+      cy.compareSnapshot("second-step");
 
       cy.nextStep();
       cy.wait(800);
 
-      cy.compareSnapshot("exit", 0.05);
+      cy.compareSnapshot("exit");
     });
   });
 });
diff --git a/src/packages/tour/refresh.test.ts b/src/packages/tour/refresh.test.ts
index 7170008cb..6da31501e 100644
--- a/src/packages/tour/refresh.test.ts
+++ b/src/packages/tour/refresh.test.ts
@@ -1,21 +1,37 @@
-import * as tooltip from "../../packages/tooltip";
 import { getMockTour } from "./mock";
+import { Tour } from "./tour";
+import dom from "../dom";
+import {
+  sleep,
+  waitMsForDerivations,
+  waitMsForExitTransition,
+} from "../../util/sleep";
+
+const { div } = dom.tags;
 
 describe("refresh", () => {
-  test("should not refetch the steps when refreshStep is false", async () => {
-    // Arrange
-    jest.spyOn(tooltip, "placeTooltip");
+  let mockTour: Tour;
+  let targetElement: HTMLElement;
 
-    const targetElement = document.createElement("div");
-    document.body.appendChild(targetElement);
+  beforeEach(() => {
+    mockTour = getMockTour();
+    targetElement = div();
+    dom.add(document.body, targetElement);
+  });
 
-    const mockTour = getMockTour();
+  afterEach(async () => {
+    await mockTour.exit();
+    await sleep(waitMsForExitTransition);
+  });
 
+  test("should not refetch the steps when refreshStep is false", async () => {
+    // Arrange
     mockTour.addStep({
       intro: "first",
     });
 
     await mockTour.start();
+    await sleep(waitMsForDerivations);
 
     // Act
     mockTour.setOptions({
@@ -35,25 +51,16 @@ describe("refresh", () => {
     expect(mockTour.getSteps()).toHaveLength(1);
     expect(mockTour.getStep(0).intro).toBe("first");
     expect(document.querySelectorAll(".introjs-bullets ul li").length).toBe(1);
-
-    // cleanup
-    await mockTour.exit();
   });
 
   test("should fetch the steps when refreshStep is true", async () => {
     // Arrange
-    jest.spyOn(tooltip, "placeTooltip");
-
-    const targetElement = document.createElement("div");
-    document.body.appendChild(targetElement);
-
-    const mockTour = getMockTour();
-
     mockTour.addStep({
       intro: "first",
     });
 
     await mockTour.start();
+    await sleep(waitMsForDerivations);
 
     // Act
     mockTour.setOptions({
diff --git a/src/packages/tour/refresh.ts b/src/packages/tour/refresh.ts
deleted file mode 100644
index ead7ce800..000000000
--- a/src/packages/tour/refresh.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { placeTooltip } from "../../packages/tooltip";
-import { _recreateBullets, _updateProgressBar } from "./showElement";
-import { Tour } from "./tour";
-import {
-  getElementByClassName,
-  queryElementByClassName,
-} from "../../util/queryElement";
-import {
-  disableInteractionClassName,
-  helperLayerClassName,
-  tooltipReferenceLayerClassName,
-} from "./classNames";
-import { setPositionRelativeToStep } from "./position";
-import { fetchSteps } from "./steps";
-
-/**
- * Update placement of the intro objects on the screen
- * @api private
- */
-export default function refresh(tour: Tour, refreshSteps?: boolean) {
-  const currentStep = tour.getCurrentStep();
-
-  if (currentStep === undefined || currentStep === null || currentStep == -1) {
-    return;
-  }
-
-  const step = tour.getStep(currentStep);
-
-  const referenceLayer = getElementByClassName(tooltipReferenceLayerClassName);
-  const helperLayer = getElementByClassName(helperLayerClassName);
-  const disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName
-  );
-
-  // re-align intros
-  const targetElement = tour.getTargetElement();
-  const helperLayerPadding = tour.getOption("helperElementPadding");
-  setPositionRelativeToStep(
-    targetElement,
-    helperLayer,
-    step,
-    helperLayerPadding
-  );
-  setPositionRelativeToStep(
-    targetElement,
-    referenceLayer,
-    step,
-    helperLayerPadding
-  );
-
-  // not all steps have a disableInteractionLayer
-  if (disableInteractionLayer) {
-    setPositionRelativeToStep(
-      targetElement,
-      disableInteractionLayer,
-      step,
-      helperLayerPadding
-    );
-  }
-
-  if (refreshSteps) {
-    tour.setSteps(fetchSteps(tour));
-    _recreateBullets(tour, step);
-    _updateProgressBar(referenceLayer, currentStep, tour.getSteps().length);
-  }
-
-  // re-align tooltip
-  const oldArrowLayer = document.querySelector<HTMLElement>(".introjs-arrow");
-  const oldTooltipContainer =
-    document.querySelector<HTMLElement>(".introjs-tooltip");
-
-  if (oldTooltipContainer && oldArrowLayer) {
-    placeTooltip(
-      oldTooltipContainer,
-      oldArrowLayer,
-      step.element as HTMLElement,
-      step.position,
-      tour.getOption("positionPrecedence"),
-      tour.getOption("showStepNumbers"),
-      tour.getOption("autoPosition"),
-      step.tooltipClass ?? tour.getOption("tooltipClass")
-    );
-  }
-
-  return tour;
-}
diff --git a/src/packages/tour/removeShowElement.ts b/src/packages/tour/removeShowElement.ts
deleted file mode 100644
index 829299190..000000000
--- a/src/packages/tour/removeShowElement.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { queryElementsByClassName } from "../../util/queryElement";
-import { removeClass } from "../../util/className";
-import { showElementClassName } from "./classNames";
-
-/**
- * To remove all show element(s)
- *
- * @api private
- */
-export default function removeShowElement() {
-  const elms = Array.from(queryElementsByClassName(showElementClassName));
-
-  for (const elm of elms) {
-    removeClass(elm, /introjs-[a-zA-Z]+/g);
-  }
-}
diff --git a/src/packages/tour/showElement.ts b/src/packages/tour/showElement.ts
index b3ab4b32c..83d275932 100644
--- a/src/packages/tour/showElement.ts
+++ b/src/packages/tour/showElement.ts
@@ -1,230 +1,10 @@
-import scrollParentToElement from "../../util/scrollParentToElement";
-import scrollTo from "../../util/scrollTo";
-import { addClass, setClass } from "../../util/className";
-import setAnchorAsButton from "../../util/setAnchorAsButton";
-import { TourStep, nextStep, previousStep } from "./steps";
-import { placeTooltip } from "../../packages/tooltip";
-import removeShowElement from "./removeShowElement";
-import createElement from "../../util/createElement";
-import setStyle from "../../util/setStyle";
-import appendChild from "../../util/appendChild";
-import {
-  activeClassName,
-  arrowClassName,
-  bulletsClassName,
-  disabledButtonClassName,
-  disableInteractionClassName,
-  doneButtonClassName,
-  dontShowAgainClassName,
-  fullButtonClassName,
-  helperLayerClassName,
-  helperNumberLayerClassName,
-  hiddenButtonClassName,
-  nextButtonClassName,
-  previousButtonClassName,
-  progressBarClassName,
-  progressClassName,
-  skipButtonClassName,
-  tooltipButtonsClassName,
-  tooltipClassName,
-  tooltipHeaderClassName,
-  tooltipReferenceLayerClassName,
-  tooltipTextClassName,
-  tooltipTitleClassName,
-} from "./classNames";
+import { addClass } from "../../util/className";
+import { TourStep } from "./steps";
 import { Tour } from "./tour";
-import { dataStepNumberAttribute } from "./dataAttributes";
-import {
-  getElementByClassName,
-  queryElement,
-  queryElementByClassName,
-} from "../../util/queryElement";
-import { setPositionRelativeToStep } from "./position";
 import getPropValue from "../../util/getPropValue";
-
-/**
- * Gets the current progress percentage
- *
- * @api private
- * @returns current progress percentage
- */
-export const _getProgress = (currentStep: number, introItemsLength: number) => {
-  // Steps are 0 indexed
-  return ((currentStep + 1) / introItemsLength) * 100;
-};
-
-/**
- * Add disableinteraction layer and adjust the size and position of the layer
- *
- * @api private
- */
-export const _disableInteraction = (tour: Tour, step: TourStep) => {
-  let disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName
-  );
-
-  if (disableInteractionLayer === null) {
-    disableInteractionLayer = createElement("div", {
-      className: disableInteractionClassName,
-    });
-
-    tour.getTargetElement().appendChild(disableInteractionLayer);
-  }
-
-  setPositionRelativeToStep(
-    tour.getTargetElement(),
-    disableInteractionLayer,
-    step,
-    tour.getOption("helperElementPadding")
-  );
-};
-
-/**
- * Creates the bullets layer
- * @private
- */
-function _createBullets(tour: Tour, step: TourStep): HTMLElement {
-  const bulletsLayer = createElement("div", {
-    className: bulletsClassName,
-  });
-
-  if (tour.getOption("showBullets") === false) {
-    bulletsLayer.style.display = "none";
-  }
-
-  const ulContainer = createElement("ul");
-  ulContainer.setAttribute("role", "tablist");
-
-  const anchorClick = function (this: HTMLElement) {
-    const stepNumber = this.getAttribute(dataStepNumberAttribute);
-    if (stepNumber == null) return;
-
-    tour.goToStep(parseInt(stepNumber, 10));
-  };
-
-  const steps = tour.getSteps();
-  for (let i = 0; i < steps.length; i++) {
-    const { step: stepNumber } = steps[i];
-
-    const innerLi = createElement("li");
-    const anchorLink = createElement("a");
-
-    innerLi.setAttribute("role", "presentation");
-    anchorLink.setAttribute("role", "tab");
-
-    anchorLink.onclick = anchorClick;
-
-    if (i === step.step - 1) {
-      setClass(anchorLink, activeClassName);
-    }
-
-    setAnchorAsButton(anchorLink);
-    anchorLink.innerHTML = "&nbsp;";
-    anchorLink.setAttribute(dataStepNumberAttribute, stepNumber.toString());
-
-    innerLi.appendChild(anchorLink);
-    ulContainer.appendChild(innerLi);
-  }
-
-  bulletsLayer.appendChild(ulContainer);
-
-  return bulletsLayer;
-}
-
-/**
- * Deletes and recreates the bullets layer
- * @private
- */
-export function _recreateBullets(tour: Tour, step: TourStep) {
-  if (tour.getOption("showBullets")) {
-    const existing = queryElementByClassName(bulletsClassName);
-
-    if (existing && existing.parentNode) {
-      existing.parentNode.replaceChild(_createBullets(tour, step), existing);
-    }
-  }
-}
-
-/**
- * Updates the bullets
- */
-function _updateBullets(
-  showBullets: boolean,
-  oldReferenceLayer: HTMLElement,
-  step: TourStep
-) {
-  if (showBullets) {
-    const oldRefActiveBullet = queryElement(
-      `.${bulletsClassName} li > a.${activeClassName}`,
-      oldReferenceLayer
-    );
-
-    const oldRefBulletStepNumber = queryElement(
-      `.${bulletsClassName} li > a[${dataStepNumberAttribute}="${step.step}"]`,
-      oldReferenceLayer
-    );
-
-    if (oldRefActiveBullet && oldRefBulletStepNumber) {
-      oldRefActiveBullet.className = "";
-      setClass(oldRefBulletStepNumber, activeClassName);
-    }
-  }
-}
-
-/**
- * Creates the progress-bar layer and elements
- * @private
- */
-function _createProgressBar(tour: Tour) {
-  const progressLayer = createElement("div");
-
-  setClass(progressLayer, progressClassName);
-
-  if (tour.getOption("showProgress") === false) {
-    progressLayer.style.display = "none";
-  }
-
-  const progressBar = createElement("div", {
-    className: progressBarClassName,
-  });
-
-  if (tour.getOption("progressBarAdditionalClass")) {
-    addClass(progressBar, tour.getOption("progressBarAdditionalClass"));
-  }
-
-  const progress = _getProgress(tour.getCurrentStep(), tour.getSteps().length);
-  progressBar.setAttribute("role", "progress");
-  progressBar.setAttribute("aria-valuemin", "0");
-  progressBar.setAttribute("aria-valuemax", "100");
-  progressBar.setAttribute("aria-valuenow", progress.toString());
-  progressBar.style.cssText = `width:${progress}%;`;
-
-  progressLayer.appendChild(progressBar);
-
-  return progressLayer;
-}
-
-/**
- * Updates an existing progress bar variables
- * @private
- */
-export function _updateProgressBar(
-  oldReferenceLayer: HTMLElement,
-  currentStep: number,
-  introItemsLength: number
-) {
-  const progressBar = queryElement(
-    `.${progressClassName} .${progressBarClassName}`,
-    oldReferenceLayer
-  );
-
-  if (!progressBar) return;
-
-  const progress = _getProgress(currentStep, introItemsLength);
-
-  progressBar.style.cssText = `width:${progress}%;`;
-  progressBar.setAttribute("aria-valuenow", progress.toString());
-}
+import { queryElementsByClassName } from "../../util/queryElement";
+import { removeClass } from "../../util/className";
+import { showElementClassName } from "./classNames";
 
 /**
  * To set the show element
@@ -247,497 +27,31 @@ function setShowElement(targetElement: HTMLElement) {
   }
 }
 
-let _lastShowElementTimer: number;
-
 /**
  * Show an element on the page
  *
  * @api private
  */
-export default async function _showElement(tour: Tour, step: TourStep) {
+export async function showElement(tour: Tour, step: TourStep) {
   tour.callback("change")?.call(tour, step.element);
 
-  const oldHelperLayer = queryElementByClassName(helperLayerClassName);
-  const oldReferenceLayer = queryElementByClassName(
-    tooltipReferenceLayerClassName
-  );
-
-  let highlightClass = helperLayerClassName;
-  let nextTooltipButton: HTMLElement;
-  let prevTooltipButton: HTMLElement;
-  let skipTooltipButton: HTMLElement;
-
-  //check for a current step highlight class
-  if (typeof step.highlightClass === "string") {
-    highlightClass += ` ${step.highlightClass}`;
-  }
-
-  //check for options highlight class
-  if (typeof tour.getOption("highlightClass") === "string") {
-    highlightClass += ` ${tour.getOption("highlightClass")}`;
-  }
-
-  if (oldHelperLayer !== null && oldReferenceLayer !== null) {
-    const oldTooltipLayer = getElementByClassName(
-      tooltipTextClassName,
-      oldReferenceLayer
-    );
-    const oldTooltipTitleLayer = getElementByClassName(
-      tooltipTitleClassName,
-      oldReferenceLayer
-    );
-    const oldArrowLayer = getElementByClassName(
-      arrowClassName,
-      oldReferenceLayer
-    );
-    const oldTooltipContainer = getElementByClassName(
-      tooltipClassName,
-      oldReferenceLayer
-    );
-
-    skipTooltipButton = getElementByClassName(
-      skipButtonClassName,
-      oldReferenceLayer
-    );
+  //remove old classes if the element still exist
+  removeShowElement();
 
-    prevTooltipButton = getElementByClassName(
-      previousButtonClassName,
-      oldReferenceLayer
-    );
-
-    nextTooltipButton = getElementByClassName(
-      nextButtonClassName,
-      oldReferenceLayer
-    );
-
-    //update or reset the helper highlight class
-    setClass(oldHelperLayer, highlightClass);
-
-    //hide the tooltip
-    oldTooltipContainer.style.opacity = "0";
-    oldTooltipContainer.style.display = "none";
-
-    // if the target element is within a scrollable element
-    scrollParentToElement(
-      tour.getOption("scrollToElement"),
-      step.element as HTMLElement
-    );
-
-    // set new position to helper layer
-    const helperLayerPadding = tour.getOption("helperElementPadding");
-    setPositionRelativeToStep(
-      tour.getTargetElement(),
-      oldHelperLayer,
-      step,
-      helperLayerPadding
-    );
-    setPositionRelativeToStep(
-      tour.getTargetElement(),
-      oldReferenceLayer,
-      step,
-      helperLayerPadding
-    );
-
-    //remove old classes if the element still exist
-    removeShowElement();
-
-    //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
-    if (_lastShowElementTimer) {
-      window.clearTimeout(_lastShowElementTimer);
-    }
-
-    const oldHelperNumberLayer = queryElementByClassName(
-      helperNumberLayerClassName,
-      oldReferenceLayer
-    );
-
-    _lastShowElementTimer = window.setTimeout(() => {
-      // set current step to the label
-      if (oldHelperNumberLayer !== null) {
-        oldHelperNumberLayer.innerHTML = `${step.step} ${tour.getOption(
-          "stepNumbersOfLabel"
-        )} ${tour.getSteps().length}`;
-      }
-
-      // set current tooltip text
-      oldTooltipLayer.innerHTML = step.intro || "";
-
-      // set current tooltip title
-      oldTooltipTitleLayer.innerHTML = step.title || "";
-
-      //set the tooltip position
-      oldTooltipContainer.style.display = "block";
-      placeTooltip(
-        oldTooltipContainer,
-        oldArrowLayer,
-        step.element as HTMLElement,
-        step.position,
-        tour.getOption("positionPrecedence"),
-        tour.getOption("showStepNumbers"),
-        tour.getOption("autoPosition"),
-        step.tooltipClass ?? tour.getOption("tooltipClass")
-      );
-
-      //change active bullet
-      _updateBullets(tour.getOption("showBullets"), oldReferenceLayer, step);
-
-      _updateProgressBar(
-        oldReferenceLayer,
-        tour.getCurrentStep(),
-        tour.getSteps().length
-      );
-
-      //show the tooltip
-      oldTooltipContainer.style.opacity = "1";
-
-      //reset button focus
-      if (
-        nextTooltipButton &&
-        new RegExp(doneButtonClassName, "gi").test(nextTooltipButton.className)
-      ) {
-        // skip button is now "done" button
-        nextTooltipButton.focus();
-      } else if (nextTooltipButton) {
-        //still in the tour, focus on next
-        nextTooltipButton.focus();
-      }
-
-      // change the scroll of the window, if needed
-      scrollTo(
-        tour.getOption("scrollToElement"),
-        step.scrollTo,
-        tour.getOption("scrollPadding"),
-        step.element as HTMLElement,
-        oldTooltipLayer
-      );
-    }, 350);
-
-    // end of old element if-else condition
-  } else {
-    const helperLayer = createElement("div", {
-      className: highlightClass,
-    });
-    const referenceLayer = createElement("div", {
-      className: tooltipReferenceLayerClassName,
-    });
-    const arrowLayer = createElement("div", {
-      className: arrowClassName,
-    });
-    const tooltipLayer = createElement("div", {
-      className: tooltipClassName,
-    });
-    const tooltipTextLayer = createElement("div", {
-      className: tooltipTextClassName,
-    });
-    const tooltipHeaderLayer = createElement("div", {
-      className: tooltipHeaderClassName,
-    });
-    const tooltipTitleLayer = createElement("h1", {
-      className: tooltipTitleClassName,
-    });
-
-    const buttonsLayer = createElement("div");
-
-    setStyle(helperLayer, {
-      // the inner box shadow is the border for the highlighted element
-      // the outer box shadow is the overlay effect
-      "box-shadow": `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${tour
-        .getOption("overlayOpacity")
-        .toString()}) 0 0 0 5000px`,
-    });
-
-    // target is within a scrollable element
-    scrollParentToElement(
-      tour.getOption("scrollToElement"),
-      step.element as HTMLElement
-    );
-
-    //set new position to helper layer
-    const helperLayerPadding = tour.getOption("helperElementPadding");
-    setPositionRelativeToStep(
-      tour.getTargetElement(),
-      helperLayer,
-      step,
-      helperLayerPadding
-    );
-    setPositionRelativeToStep(
-      tour.getTargetElement(),
-      referenceLayer,
-      step,
-      helperLayerPadding
-    );
-
-    //add helper layer to target element
-    appendChild(tour.getTargetElement(), helperLayer, true);
-    appendChild(tour.getTargetElement(), referenceLayer);
-
-    tooltipTextLayer.innerHTML = step.intro;
-    tooltipTitleLayer.innerHTML = step.title;
-
-    setClass(buttonsLayer, tooltipButtonsClassName);
-
-    if (tour.getOption("showButtons") === false) {
-      buttonsLayer.style.display = "none";
-    }
-
-    tooltipHeaderLayer.appendChild(tooltipTitleLayer);
-    tooltipLayer.appendChild(tooltipHeaderLayer);
-    tooltipLayer.appendChild(tooltipTextLayer);
-
-    // "Do not show again" checkbox
-    if (tour.getOption("dontShowAgain")) {
-      const dontShowAgainWrapper = createElement("div", {
-        className: dontShowAgainClassName,
-      });
-      const dontShowAgainCheckbox = createElement("input", {
-        type: "checkbox",
-        id: dontShowAgainClassName,
-        name: dontShowAgainClassName,
-      });
-      dontShowAgainCheckbox.onchange = (e) => {
-        tour.setDontShowAgain((<HTMLInputElement>e.target).checked);
-      };
-      const dontShowAgainCheckboxLabel = createElement("label", {
-        htmlFor: dontShowAgainClassName,
-      });
-      dontShowAgainCheckboxLabel.innerText =
-        tour.getOption("dontShowAgainLabel");
-      dontShowAgainWrapper.appendChild(dontShowAgainCheckbox);
-      dontShowAgainWrapper.appendChild(dontShowAgainCheckboxLabel);
-
-      tooltipLayer.appendChild(dontShowAgainWrapper);
-    }
-
-    tooltipLayer.appendChild(_createBullets(tour, step));
-    tooltipLayer.appendChild(_createProgressBar(tour));
-
-    // add helper layer number
-    const helperNumberLayer = createElement("div");
-
-    if (tour.getOption("showStepNumbers") === true) {
-      setClass(helperNumberLayer, helperNumberLayerClassName);
-
-      helperNumberLayer.innerHTML = `${step.step} ${tour.getOption(
-        "stepNumbersOfLabel"
-      )} ${tour.getSteps().length}`;
-      tooltipLayer.appendChild(helperNumberLayer);
-    }
-
-    tooltipLayer.appendChild(arrowLayer);
-    referenceLayer.appendChild(tooltipLayer);
-
-    //next button
-    nextTooltipButton = createElement("a");
-
-    nextTooltipButton.onclick = async () => {
-      if (!tour.isLastStep()) {
-        await nextStep(tour);
-      } else if (
-        new RegExp(doneButtonClassName, "gi").test(nextTooltipButton.className)
-      ) {
-        await tour
-          .callback("complete")
-          ?.call(tour, tour.getCurrentStep(), "done");
-
-        await tour.exit();
-      }
-    };
-
-    setAnchorAsButton(nextTooltipButton);
-    nextTooltipButton.innerHTML = tour.getOption("nextLabel");
-
-    //previous button
-    prevTooltipButton = createElement("a");
-
-    prevTooltipButton.onclick = async () => {
-      if (tour.getCurrentStep() > 0) {
-        await previousStep(tour);
-      }
-    };
-
-    setAnchorAsButton(prevTooltipButton);
-    prevTooltipButton.innerHTML = tour.getOption("prevLabel");
-
-    //skip button
-    skipTooltipButton = createElement("a", {
-      className: skipButtonClassName,
-    });
-
-    setAnchorAsButton(skipTooltipButton);
-    skipTooltipButton.innerHTML = tour.getOption("skipLabel");
-
-    skipTooltipButton.onclick = async () => {
-      if (tour.isLastStep()) {
-        await tour
-          .callback("complete")
-          ?.call(tour, tour.getCurrentStep(), "skip");
-      }
-
-      await tour.callback("skip")?.call(tour, tour.getCurrentStep());
-
-      await tour.exit();
-    };
-
-    tooltipHeaderLayer.appendChild(skipTooltipButton);
-
-    // in order to prevent displaying previous button always
-    if (tour.getSteps().length > 1) {
-      buttonsLayer.appendChild(prevTooltipButton);
-    }
-
-    // we always need the next button because this
-    // button changes to "Done" in the last step of the tour
-    buttonsLayer.appendChild(nextTooltipButton);
-    tooltipLayer.appendChild(buttonsLayer);
-
-    // set proper position
-    placeTooltip(
-      tooltipLayer,
-      arrowLayer,
-      step.element as HTMLElement,
-      step.position,
-      tour.getOption("positionPrecedence"),
-      tour.getOption("showStepNumbers"),
-      tour.getOption("autoPosition"),
-      step.tooltipClass ?? tour.getOption("tooltipClass")
-    );
-
-    // change the scroll of the window, if needed
-    scrollTo(
-      tour.getOption("scrollToElement"),
-      step.scrollTo,
-      tour.getOption("scrollPadding"),
-      step.element as HTMLElement,
-      tooltipLayer
-    );
-
-    //end of new element if-else condition
-  }
-
-  // removing previous disable interaction layer
-  const disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName,
-    tour.getTargetElement()
-  );
-  if (disableInteractionLayer && disableInteractionLayer.parentNode) {
-    disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
-  }
-
-  //disable interaction
-  if (step.disableInteraction) {
-    _disableInteraction(tour, step);
-  }
-
-  // when it's the first step of tour
-  if (tour.getCurrentStep() === 0 && tour.getSteps().length > 1) {
-    if (nextTooltipButton) {
-      setClass(
-        nextTooltipButton,
-        tour.getOption("buttonClass"),
-        nextButtonClassName
-      );
-      nextTooltipButton.innerHTML = tour.getOption("nextLabel");
-    }
-
-    if (tour.getOption("hidePrev") === true) {
-      if (prevTooltipButton) {
-        setClass(
-          prevTooltipButton,
-          tour.getOption("buttonClass"),
-          previousButtonClassName,
-          hiddenButtonClassName
-        );
-      }
-      if (nextTooltipButton) {
-        addClass(nextTooltipButton, fullButtonClassName);
-      }
-    } else {
-      if (prevTooltipButton) {
-        setClass(
-          prevTooltipButton,
-          tour.getOption("buttonClass"),
-          previousButtonClassName,
-          disabledButtonClassName
-        );
-      }
-    }
-  } else if (tour.isLastStep() || tour.getSteps().length === 1) {
-    // last step of tour
-    if (prevTooltipButton) {
-      setClass(
-        prevTooltipButton,
-        tour.getOption("buttonClass"),
-        previousButtonClassName
-      );
-    }
+  setShowElement(step.element as HTMLElement);
 
-    if (tour.getOption("hideNext") === true) {
-      if (nextTooltipButton) {
-        setClass(
-          nextTooltipButton,
-          tour.getOption("buttonClass"),
-          nextButtonClassName,
-          hiddenButtonClassName
-        );
-      }
-      if (prevTooltipButton) {
-        addClass(prevTooltipButton, fullButtonClassName);
-      }
-    } else {
-      if (nextTooltipButton) {
-        if (tour.getOption("nextToDone") === true) {
-          nextTooltipButton.innerHTML = tour.getOption("doneLabel");
-          addClass(
-            nextTooltipButton,
-            tour.getOption("buttonClass"),
-            nextButtonClassName,
-            doneButtonClassName
-          );
-        } else {
-          setClass(
-            nextTooltipButton,
-            tour.getOption("buttonClass"),
-            nextButtonClassName,
-            disabledButtonClassName
-          );
-        }
-      }
-    }
-  } else {
-    // steps between start and end
-    if (prevTooltipButton) {
-      setClass(
-        prevTooltipButton,
-        tour.getOption("buttonClass"),
-        previousButtonClassName
-      );
-    }
-    if (nextTooltipButton) {
-      setClass(
-        nextTooltipButton,
-        tour.getOption("buttonClass"),
-        nextButtonClassName
-      );
-      nextTooltipButton.innerHTML = tour.getOption("nextLabel");
-    }
-  }
+  await tour.callback("afterChange")?.call(tour, step.element);
+}
 
-  if (prevTooltipButton) {
-    prevTooltipButton.setAttribute("role", "button");
-  }
-  if (nextTooltipButton) {
-    nextTooltipButton.setAttribute("role", "button");
-  }
-  if (skipTooltipButton) {
-    skipTooltipButton.setAttribute("role", "button");
-  }
+/**
+ * To remove all show element(s)
+ *
+ * @api private
+ */
+export function removeShowElement() {
+  const elms = Array.from(queryElementsByClassName(showElementClassName));
 
-  //Set focus on "next" button, so that hitting Enter always moves you onto the next step
-  if (nextTooltipButton) {
-    nextTooltipButton.focus();
+  for (const elm of elms) {
+    removeClass(elm, /introjs-[a-zA-Z]+/g);
   }
-
-  setShowElement(step.element as HTMLElement);
-
-  await tour.callback("afterChange")?.call(tour, step.element);
 }
diff --git a/src/packages/tour/start.test.ts b/src/packages/tour/start.test.ts
index 580a7a12d..3bb7b28a2 100644
--- a/src/packages/tour/start.test.ts
+++ b/src/packages/tour/start.test.ts
@@ -1,6 +1,5 @@
 import { start } from "./start";
 import * as steps from "./steps";
-import * as addOverlayLayer from "./addOverlayLayer";
 import * as nextStep from "./steps";
 import { getMockTour } from "./mock";
 
@@ -10,8 +9,8 @@ describe("start", () => {
   });
 
   test("should call the onstart callback", () => {
+    // Arrange
     jest.spyOn(steps, "fetchSteps").mockReturnValue([]);
-    jest.spyOn(addOverlayLayer, "default").mockReturnValue(true);
     jest.spyOn(nextStep, "nextStep").mockReturnValue(Promise.resolve(true));
 
     const onstartCallback = jest.fn();
@@ -19,26 +18,29 @@ describe("start", () => {
     const mockTour = getMockTour();
     mockTour.onStart(onstartCallback);
 
+    // Act
     start(mockTour);
 
+    // Assert
     expect(onstartCallback).toBeCalledTimes(1);
     expect(onstartCallback).toBeCalledWith(document.body);
   });
 
   test("should not start the tour if isActive is false", () => {
+    // Arrange
     const fetchIntroStepsMock = jest
       .spyOn(steps, "fetchSteps")
       .mockReturnValue([]);
-    const addOverlayLayerMock = jest.spyOn(addOverlayLayer, "default");
     const nextStepMock = jest.spyOn(nextStep, "nextStep");
 
     const mockTour = getMockTour();
     mockTour.setOption("isActive", false);
 
+    // Act
     start(mockTour);
 
+    // Assert
     expect(fetchIntroStepsMock).toBeCalledTimes(0);
-    expect(addOverlayLayerMock).toBeCalledTimes(0);
     expect(nextStepMock).toBeCalledTimes(0);
   });
 
diff --git a/src/packages/tour/start.ts b/src/packages/tour/start.ts
index 074d83421..2b130668c 100644
--- a/src/packages/tour/start.ts
+++ b/src/packages/tour/start.ts
@@ -1,4 +1,3 @@
-import addOverlayLayer from "./addOverlayLayer";
 import { nextStep } from "./steps";
 import { fetchSteps } from "./steps";
 import { Tour } from "./tour";
@@ -30,13 +29,8 @@ export const start = async (tour: Tour): Promise<Boolean> => {
 
   tour.setSteps(steps);
 
-  //add overlay layer to the page
-  if (addOverlayLayer(tour)) {
-    //then, start the show
-    await nextStep(tour);
+  //then, start the show
+  await nextStep(tour);
 
-    return true;
-  }
-
-  return false;
+  return true;
 };
diff --git a/src/packages/tour/steps.test.ts b/src/packages/tour/steps.test.ts
index a9d65066a..fdba7c0da 100644
--- a/src/packages/tour/steps.test.ts
+++ b/src/packages/tour/steps.test.ts
@@ -1,12 +1,14 @@
+import dom from "../dom";
 import { fetchSteps, nextStep, previousStep } from "./steps";
-import _showElement from "./showElement";
 import {
   appendMockSteps,
   getMockPartialSteps,
   getMockSteps,
   getMockTour,
 } from "./mock";
-import createElement from "../../util/createElement";
+import { showElement } from "./showElement";
+
+const { div, h1 } = dom.tags;
 
 jest.mock("./showElement");
 jest.mock("./exitIntro");
@@ -54,7 +56,7 @@ describe("steps", () => {
     test("should call ShowElement", async () => {
       // Arrange
       const showElementMock = jest.fn();
-      (_showElement as jest.Mock).mockImplementation(showElementMock);
+      (showElement as jest.Mock).mockImplementation(showElementMock);
       const mockTour = getMockTour();
       mockTour.setSteps(getMockSteps());
 
@@ -88,7 +90,7 @@ describe("steps", () => {
       // Arrange
       const mockTour = getMockTour();
       const showElementMock = jest.fn();
-      (_showElement as jest.Mock).mockImplementation(showElementMock);
+      (showElement as jest.Mock).mockImplementation(showElementMock);
       const fnBeforeChangeCallback = jest.fn();
       fnBeforeChangeCallback.mockReturnValue(false);
 
@@ -107,7 +109,7 @@ describe("steps", () => {
       const mockTour = getMockTour();
       mockTour.setSteps(getMockSteps());
       const showElementMock = jest.fn();
-      (_showElement as jest.Mock).mockImplementation(showElementMock);
+      (showElement as jest.Mock).mockImplementation(showElementMock);
 
       const onBeforeChangeMock = jest.fn();
       const sideEffect: number[] = [];
@@ -153,7 +155,7 @@ describe("steps", () => {
       // Arrange
       const mockTour = getMockTour();
       mockTour.addStep({
-        element: createElement("div"),
+        element: div(),
         intro: "test step",
       });
 
@@ -174,7 +176,7 @@ describe("steps", () => {
           intro: "first step",
         },
         {
-          element: createElement("div"),
+          element: div(),
           intro: "second step",
         },
       ]);
@@ -214,7 +216,7 @@ describe("steps", () => {
 
     test("should find and add elements from options.steps to the list", () => {
       // Arrange
-      document.body.appendChild(createElement("h1"));
+      document.body.appendChild(h1());
 
       const mockTour = getMockTour();
       mockTour.addSteps(getMockPartialSteps());
@@ -252,7 +254,7 @@ describe("steps", () => {
 
     test("should find the data-* elements from the DOM with the correct order", () => {
       // Arrange
-      const targetElement = createElement("div");
+      const targetElement = div();
       const [
         mockElementOne,
         mockElementTwo,
diff --git a/src/packages/tour/steps.ts b/src/packages/tour/steps.ts
index 978eda828..161ef4b74 100644
--- a/src/packages/tour/steps.ts
+++ b/src/packages/tour/steps.ts
@@ -1,14 +1,7 @@
 import { TooltipPosition } from "../../packages/tooltip";
-import showElement from "./showElement";
-import {
-  queryElement,
-  queryElementByClassName,
-  queryElements,
-} from "../../util/queryElement";
+import { queryElement, queryElements } from "../../util/queryElement";
 import cloneObject from "../../util/cloneObject";
-import createElement from "../../util/createElement";
 import { Tour } from "./tour";
-import { floatingElementClassName } from "./classNames";
 import {
   dataDisableInteraction,
   dataHighlightClass,
@@ -20,6 +13,7 @@ import {
   dataTitleAttribute,
   dataTooltipClass,
 } from "./dataAttributes";
+import { showElement } from "./showElement";
 
 export type ScrollTo = "off" | "element" | "tooltip";
 
@@ -43,7 +37,13 @@ export type TourStep = {
 export async function nextStep(tour: Tour) {
   tour.incrementCurrentStep();
 
-  const nextStep = tour.getStep(tour.getCurrentStep());
+  const currentStep = tour.getCurrentStep();
+
+  if (currentStep === undefined) {
+    return false;
+  }
+
+  const nextStep = tour.getStep(currentStep);
   let continueStep: boolean | undefined = true;
 
   continueStep = await tour
@@ -55,7 +55,7 @@ export async function nextStep(tour: Tour) {
       tour.getDirection()
     );
 
-  // if `onbeforechange` returned `false`, stop displaying the element
+  // if `onBeforeChange` returned `false`, stop displaying the element
   if (continueStep === false) {
     tour.decrementCurrentStep();
     return false;
@@ -80,13 +80,21 @@ export async function nextStep(tour: Tour) {
  * @api private
  */
 export async function previousStep(tour: Tour) {
-  if (tour.getCurrentStep() <= 0) {
+  let currentStep = tour.getCurrentStep();
+
+  if (currentStep === undefined || currentStep <= 0) {
     return false;
   }
 
   tour.decrementCurrentStep();
+  // update the current step after decrementing
+  currentStep = tour.getCurrentStep();
 
-  const nextStep = tour.getStep(tour.getCurrentStep());
+  if (currentStep === undefined) {
+    return false;
+  }
+
+  const nextStep = tour.getStep(currentStep);
   let continueStep: boolean | undefined = true;
 
   continueStep = await tour
@@ -98,7 +106,7 @@ export async function previousStep(tour: Tour) {
       tour.getDirection()
     );
 
-  // if `onbeforechange` returned `false`, stop displaying the element
+  // if `onBeforeChange` returned `false`, stop displaying the element
   if (continueStep === false) {
     tour.incrementCurrentStep();
     return false;
@@ -135,19 +143,7 @@ export const fetchSteps = (tour: Tour) => {
 
       // tour without element
       if (!step.element) {
-        let floatingElementQuery = queryElementByClassName(
-          floatingElementClassName
-        );
-
-        if (!floatingElementQuery) {
-          floatingElementQuery = createElement("div", {
-            className: floatingElementClassName,
-          });
-
-          document.body.appendChild(floatingElementQuery);
-        }
-
-        step.element = floatingElementQuery;
+        step.element = tour.appendFloatingElement();
         step.position = "floating";
       }
 
diff --git a/src/packages/tour/tour.test.ts b/src/packages/tour/tour.test.ts
index a8a4bcdd2..4a6acfca7 100644
--- a/src/packages/tour/tour.test.ts
+++ b/src/packages/tour/tour.test.ts
@@ -1,4 +1,3 @@
-import { queryElementByClassName } from "../../util/queryElement";
 import {
   className,
   content,
@@ -14,6 +13,11 @@ import * as dontShowAgain from "./dontShowAgain";
 import { getMockPartialSteps, getMockTour } from "./mock";
 import { Tour } from "./tour";
 import { helperLayerClassName, overlayClassName } from "./classNames";
+import {
+  sleep,
+  waitMsForDerivations,
+  waitMsForExitTransition,
+} from "../../util/sleep";
 
 describe("Tour", () => {
   beforeEach(() => {
@@ -166,12 +170,14 @@ describe("Tour", () => {
 
       // Act
       await mockTour.start();
+      await sleep(waitMsForDerivations);
       await mockTour.exit();
+      await sleep(waitMsForExitTransition);
 
       // Assert
       expect(mockElement?.className).not.toContain("introjs-showElement");
-      expect(queryElementByClassName(helperLayerClassName)).toBeNull();
-      expect(queryElementByClassName(overlayClassName)).toBeNull();
+      expect(document.querySelector(`.${helperLayerClassName}`)).toBeNull();
+      expect(document.querySelector(`.${overlayClassName}`)).toBeNull();
     });
 
     test("should not highlight the target element if queryString is incorrect", async () => {
@@ -392,6 +398,7 @@ describe("Tour", () => {
 
       // Act
       await mockTour.start();
+      await sleep(waitMsForDerivations);
       const checkbox = find(".introjs-dontShowAgain input");
       checkbox.click();
 
diff --git a/src/packages/tour/tour.ts b/src/packages/tour/tour.ts
index 9ccfc1cfe..d1b6f1d76 100644
--- a/src/packages/tour/tour.ts
+++ b/src/packages/tour/tour.ts
@@ -1,4 +1,4 @@
-import { nextStep, previousStep, TourStep } from "./steps";
+import { fetchSteps, nextStep, previousStep, TourStep } from "./steps";
 import { Package } from "../package";
 import {
   introAfterChangeCallback,
@@ -16,21 +16,25 @@ import { start } from "./start";
 import exitIntro from "./exitIntro";
 import isFunction from "../../util/isFunction";
 import { getDontShowAgain, setDontShowAgain } from "./dontShowAgain";
-import refresh from "./refresh";
 import { getContainerElement } from "../../util/containerElement";
 import DOMEvent from "../../util/DOMEvent";
 import onKeyDown from "./onKeyDown";
-import onResize from "./onResize";
+import dom from "../dom";
+import { TourRoot } from "./components/TourRoot";
+import { FloatingElement } from "./components/FloatingElement";
 
 /**
  * Intro.js Tour class
  */
 export class Tour implements Package<TourOptions> {
   private _steps: TourStep[] = [];
-  private _currentStep: number = -1;
+  private _currentStepSignal = dom.state<number | undefined>(undefined);
+  private _refreshesSignal = dom.state(0);
+  private _root: Element | undefined;
   private _direction: "forward" | "backward";
   private readonly _targetElement: HTMLElement;
   private _options: TourOptions;
+  private _floatingElement: Element | undefined;
 
   private readonly callbacks: {
     beforeChange?: introBeforeChangeCallback;
@@ -161,18 +165,38 @@ export class Tour implements Package<TourOptions> {
     return this._steps[step];
   }
 
+  /**
+   * Returns the underlying state of the current step
+   * This is an internal method and should not be used outside of the package.
+   */
+  getCurrentStepSignal() {
+    return this._currentStepSignal;
+  }
+
+  /**
+   * Returns the underlying state of the refreshes
+   * This is an internal method and should not be used outside of the package.
+   */
+  getRefreshesSignal() {
+    return this._refreshesSignal;
+  }
+
   /**
    * Get the current step of the tour
    */
-  getCurrentStep(): number {
-    return this._currentStep;
+  getCurrentStep(): number | undefined {
+    return this._currentStepSignal.val;
   }
 
   /**
    * @deprecated `currentStep()` is deprecated, please use `getCurrentStep()` instead.
    */
-  currentStep(): number {
-    return this._currentStep;
+  currentStep(): number | undefined {
+    return this._currentStepSignal.val;
+  }
+
+  resetCurrentStep() {
+    this._currentStepSignal.val = undefined;
   }
 
   /**
@@ -180,13 +204,16 @@ export class Tour implements Package<TourOptions> {
    * @param step
    */
   setCurrentStep(step: number): this {
-    if (step >= this._currentStep) {
+    if (
+      this._currentStepSignal.val === undefined ||
+      step >= this._currentStepSignal.val
+    ) {
       this._direction = "forward";
     } else {
       this._direction = "backward";
     }
 
-    this._currentStep = step;
+    this._currentStepSignal.val = step;
     return this;
   }
 
@@ -194,10 +221,11 @@ export class Tour implements Package<TourOptions> {
    * Increment the current step of the tour (does not start the tour step, must be called in conjunction with `nextStep`)
    */
   incrementCurrentStep(): this {
-    if (this.getCurrentStep() === -1) {
+    const currentStep = this.getCurrentStep();
+    if (currentStep === undefined) {
       this.setCurrentStep(0);
     } else {
-      this.setCurrentStep(this.getCurrentStep() + 1);
+      this.setCurrentStep(currentStep + 1);
     }
 
     return this;
@@ -207,8 +235,9 @@ export class Tour implements Package<TourOptions> {
    * Decrement the current step of the tour (does not start the tour step, must be in conjunction with `previousStep`)
    */
   decrementCurrentStep(): this {
-    if (this.getCurrentStep() > 0) {
-      this.setCurrentStep(this._currentStep - 1);
+    const currentStep = this.getCurrentStep();
+    if (currentStep !== undefined && currentStep > 0) {
+      this.setCurrentStep(currentStep - 1);
     }
 
     return this;
@@ -241,7 +270,8 @@ export class Tour implements Package<TourOptions> {
    * Check if the current step is the last step
    */
   isEnd(): boolean {
-    return this.getCurrentStep() >= this._steps.length;
+    const currentStep = this.getCurrentStep();
+    return currentStep !== undefined && currentStep >= this._steps.length;
   }
 
   /**
@@ -310,7 +340,7 @@ export class Tour implements Package<TourOptions> {
    * Returns true if the tour has started
    */
   hasStarted(): boolean {
-    return this.getCurrentStep() > -1;
+    return this.getCurrentStep() !== undefined;
   }
 
   /**
@@ -357,7 +387,7 @@ export class Tour implements Package<TourOptions> {
    * Enable refresh on window resize for the tour
    */
   enableRefreshOnResize() {
-    this._refreshOnResizeHandler = (_: Event) => onResize(this);
+    this._refreshOnResizeHandler = (_: Event) => this.refresh();
     DOMEvent.on(window, "resize", this._refreshOnResizeHandler, true);
   }
 
@@ -371,11 +401,51 @@ export class Tour implements Package<TourOptions> {
     }
   }
 
+  /**
+   * Append the floating element to the target element.
+   * Floating element is a helper element that is used when the step does not have a target element.
+   * For internal use only.
+   */
+  appendFloatingElement() {
+    if (!this._floatingElement) {
+      this._floatingElement = FloatingElement({
+        currentStep: this.getCurrentStepSignal(),
+      });
+
+      // only add the floating element once per tour instance
+      dom.add(this.getTargetElement(), this._floatingElement);
+    }
+
+    return this._floatingElement;
+  }
+
+  /**
+   * Create the root element for the tour
+   */
+  private createRoot() {
+    if (!this._root) {
+      this._root = TourRoot({ tour: this });
+      dom.add(this.getTargetElement(), this._root);
+    }
+  }
+
+  /**
+   * Deletes the root element and recreates it
+   */
+  private recreateRoot() {
+    if (this._root) {
+      this._root.remove();
+      this._root = undefined;
+      this.createRoot();
+    }
+  }
+
   /**
    * Starts the tour and shows the first step
    */
   async start() {
     if (await start(this)) {
+      this.createRoot();
       this.enableKeyboardNavigation();
       this.enableRefreshOnResize();
     }
@@ -401,7 +471,22 @@ export class Tour implements Package<TourOptions> {
    * @param {boolean} refreshSteps whether to refresh the tour steps
    */
   refresh(refreshSteps?: boolean) {
-    refresh(this, refreshSteps);
+    const currentStep = this.getCurrentStep();
+
+    if (currentStep === undefined) {
+      return this;
+    }
+
+    if (this._refreshesSignal.val !== undefined) {
+      this._refreshesSignal.val += 1;
+    }
+
+    // fetch new steps and recreate the root element
+    if (refreshSteps) {
+      this.setSteps(fetchSteps(this));
+      this.recreateRoot();
+    }
+
     return this;
   }
 
diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss
index fcc9f2f0f..087aefe05 100644
--- a/src/styles/introjs.scss
+++ b/src/styles/introjs.scss
@@ -13,6 +13,10 @@ $font_family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji",
 $background_color_9: #08c;
 $background_color_10: rgba(136, 136, 136, 0.24);
 
+.introjs-tour {
+  transition: all 0.3s ease-out;
+}
+
 .introjs-overlay {
   position: absolute;
   box-sizing: content-box;
diff --git a/src/util/appendChild.ts b/src/util/appendChild.ts
deleted file mode 100644
index b09d7b3ca..000000000
--- a/src/util/appendChild.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import setStyle from "./setStyle";
-
-/**
- * Appends `element` to `parentElement`
- */
-export default function appendChild(
-  parentElement: HTMLElement,
-  element: HTMLElement,
-  animate: boolean = false
-) {
-  if (animate) {
-    const existingOpacity = element.style.opacity || "1";
-
-    setStyle(element, {
-      opacity: "0",
-    });
-
-    window.setTimeout(() => {
-      setStyle(element, {
-        opacity: existingOpacity,
-      });
-    }, 10);
-  }
-
-  parentElement.appendChild(element);
-}
diff --git a/src/util/checkLeft.ts b/src/util/checkLeft.ts
deleted file mode 100644
index 4ad912f1e..000000000
--- a/src/util/checkLeft.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Set tooltip right so it doesn't go off the left side of the window
- *
- * @return boolean true, if tooltipLayerStyleRight is ok. false, otherwise.
- */
-export default function checkLeft(
-  targetOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  },
-  tooltipLayerStyleRight: number,
-  tooltipOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  },
-  tooltipLayer: HTMLElement
-): boolean {
-  if (
-    targetOffset.left +
-      targetOffset.width -
-      tooltipLayerStyleRight -
-      tooltipOffset.width <
-    0
-  ) {
-    // off the left side of the window
-    tooltipLayer.style.left = `${-targetOffset.left}px`;
-    return false;
-  }
-  tooltipLayer.style.right = `${tooltipLayerStyleRight}px`;
-  return true;
-}
diff --git a/src/util/checkRight.ts b/src/util/checkRight.ts
deleted file mode 100644
index 35d1de58e..000000000
--- a/src/util/checkRight.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Set tooltip left so it doesn't go off the right side of the window
- *
- * @return boolean true, if tooltipLayerStyleLeft is ok.  false, otherwise.
- */
-export default function checkRight(
-  targetOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  },
-  tooltipLayerStyleLeft: number,
-  tooltipOffset: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  },
-  windowSize: {
-    width: number;
-    height: number;
-  },
-  tooltipLayer: HTMLElement
-): boolean {
-  if (
-    targetOffset.left + tooltipLayerStyleLeft + tooltipOffset.width >
-    windowSize.width
-  ) {
-    // off the right side of the window
-    tooltipLayer.style.left = `${
-      windowSize.width - tooltipOffset.width - targetOffset.left
-    }px`;
-
-    return false;
-  }
-
-  tooltipLayer.style.left = `${tooltipLayerStyleLeft}px`;
-  return true;
-}
diff --git a/src/util/createElement.test.ts b/src/util/createElement.test.ts
deleted file mode 100644
index b03cd5d0e..000000000
--- a/src/util/createElement.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import createElement from "./createElement";
-
-describe("createElement", () => {
-  test("should create an element", () => {
-    expect(createElement("div").tagName).toBe("DIV");
-    expect(createElement("b").tagName).toBe("B");
-  });
-
-  test("should create an element with properties", () => {
-    const el = createElement("div", {
-      className: "myClass",
-    });
-
-    expect(el.className).toBe("myClass");
-  });
-
-  test("should create an element with data-* props", () => {
-    const el = createElement("div", {
-      "data-test-prop": "10",
-    });
-
-    expect(el.getAttribute("data-test-prop")).toBe("10");
-  });
-
-  test("should create an element with correct style", () => {
-    const el = createElement("div", {
-      style: "background: red;font-size: 12px;",
-    });
-
-    expect(el.style.fontSize).toBe("12px");
-    expect(el.style.backgroundColor).toBe("red");
-  });
-
-  test("should create an element with onclick", () => {
-    const mock = jest.fn();
-    const el = createElement("div", {
-      onclick: mock,
-    });
-
-    el.click();
-    el.click();
-
-    expect(mock).toBeCalledTimes(2);
-  });
-});
diff --git a/src/util/createElement.ts b/src/util/createElement.ts
deleted file mode 100644
index b3d3e6bee..000000000
--- a/src/util/createElement.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import setStyle from "./setStyle";
-
-/**
- * Create a DOM element with various attributes
- */
-export default function _createElement<K extends keyof HTMLElementTagNameMap>(
-  tagName: K,
-  attrs?: { [key: string]: string | Function }
-): HTMLElementTagNameMap[K] {
-  let element = document.createElement<K>(tagName);
-
-  attrs = attrs || {};
-
-  // regex for matching attributes that need to be set with setAttribute
-  const setAttRegex = /^(?:role|data-|aria-)/;
-
-  for (const k in attrs) {
-    let v = attrs[k];
-
-    if (k === "style" && typeof v !== "function") {
-      setStyle(element, v);
-    } else if (typeof v === "string" && k.match(setAttRegex)) {
-      element.setAttribute(k, v);
-    } else {
-      // @ts-ignore
-      element[k] = v;
-    }
-  }
-
-  return element;
-}
diff --git a/src/util/elementInViewport.test.ts b/src/util/elementInViewport.test.ts
index b2d26a406..58daa0cd6 100644
--- a/src/util/elementInViewport.test.ts
+++ b/src/util/elementInViewport.test.ts
@@ -1,6 +1,8 @@
-import _createElement from "./createElement";
+import dom from "../packages/dom";
 import elementInViewport from "./elementInViewport";
 
+const { div } = dom.tags;
+
 describe("elementInViewport", () => {
   test("should return true when element is in viewport", () => {
     // Arrange
@@ -13,7 +15,7 @@ describe("elementInViewport", () => {
           right: 50,
         } as DOMRect)
     );
-    const elm = _createElement("div");
+    const elm = div();
     elm.getBoundingClientRect = getBoundingClientRectSpy;
 
     // Act
@@ -34,7 +36,7 @@ describe("elementInViewport", () => {
           right: 50,
         } as DOMRect)
     );
-    const elm = _createElement("div");
+    const elm = div();
     elm.getBoundingClientRect = getBoundingClientRectSpy;
 
     // Act
@@ -55,7 +57,7 @@ describe("elementInViewport", () => {
           right: window.innerWidth + 50,
         } as DOMRect)
     );
-    const elm = _createElement("div");
+    const elm = div();
     elm.getBoundingClientRect = getBoundingClientRectSpy;
 
     // Act
@@ -76,7 +78,7 @@ describe("elementInViewport", () => {
           right: 50,
         } as DOMRect)
     );
-    const elm = _createElement("div");
+    const elm = div();
     elm.getBoundingClientRect = getBoundingClientRectSpy;
 
     // Act
@@ -97,7 +99,7 @@ describe("elementInViewport", () => {
           right: 50,
         } as DOMRect)
     );
-    const elm = _createElement("div");
+    const elm = div();
     elm.getBoundingClientRect = getBoundingClientRectSpy;
 
     // Act
diff --git a/src/util/getOffset.test.ts b/src/util/getOffset.test.ts
new file mode 100644
index 000000000..20143e751
--- /dev/null
+++ b/src/util/getOffset.test.ts
@@ -0,0 +1,217 @@
+import getOffset from "./getOffset";
+import dom from "../packages/dom";
+
+const { div } = dom.tags;
+
+const mockBoundingClientRect = (
+  element: HTMLElement,
+  domRect: Partial<DOMRect>
+) => {
+  const getBoundingClientRectSpy = jest.fn(() => {
+    const rect: DOMRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      toJSON: () => null,
+      ...domRect,
+    };
+    return rect;
+  });
+  element.getBoundingClientRect = getBoundingClientRectSpy;
+
+  return element;
+};
+
+describe("getOffset", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    document.body.scrollTop = 0;
+    document.body.scrollLeft;
+  });
+
+  it("should return the correct offset without scroll", () => {
+    // Arrange
+    const element = mockBoundingClientRect(div(), {
+      top: 100,
+      left: 10,
+      bottom: 350,
+      right: 50,
+      height: 250,
+    });
+    document.body.appendChild(element);
+
+    // Act
+    const result = getOffset(element);
+
+    // Assert
+    expect(result).toEqual({
+      absoluteBottom: 350,
+      absoluteLeft: 10,
+      absoluteRight: 50,
+      absoluteTop: 100,
+      bottom: 350,
+      height: 250,
+      left: 10,
+      right: 10,
+      top: 100,
+      width: 0,
+    });
+  });
+
+  it("should return the correct offset with scrollTop", () => {
+    // Arrange
+    const element = mockBoundingClientRect(div(), {
+      top: 100,
+      left: 10,
+      bottom: 350,
+      right: 50,
+      height: 250,
+    });
+    document.body.scrollTop = 150;
+    document.body.appendChild(element);
+
+    // Act
+    const result = getOffset(element);
+
+    // Assert
+    expect(result).toEqual({
+      absoluteBottom: 350,
+      absoluteLeft: 10,
+      absoluteRight: 50,
+      absoluteTop: 100,
+      bottom: 500,
+      height: 250,
+      left: 10,
+      right: 10,
+      top: 250,
+      width: 0,
+    });
+  });
+
+  it("should ignore scroll values when element is fixed", () => {
+    // Arrange
+    const element = mockBoundingClientRect(
+      div({
+        style: "position: fixed",
+      }),
+      {
+        top: 100,
+        left: 10,
+        bottom: 350,
+        right: 50,
+        height: 250,
+      }
+    );
+    document.body.scrollTop = 150;
+    document.body.scrollLeft = 100;
+    document.body.appendChild(element);
+
+    // Act
+    const result = getOffset(element);
+
+    // Assert
+    expect(result).toEqual({
+      absoluteBottom: 350,
+      absoluteLeft: 10,
+      absoluteRight: 50,
+      absoluteTop: 100,
+      bottom: 350,
+      height: 250,
+      left: 10,
+      right: 10,
+      top: 100,
+      width: 0,
+    });
+  });
+
+  it("should return position relative to a relative element", () => {
+    // Given
+    const relativeElement = mockBoundingClientRect(
+      div({
+        style: "position: relative",
+      }),
+      {
+        top: 100,
+        left: 10,
+        bottom: 700,
+        right: 50,
+        height: 550,
+      }
+    );
+
+    const element = mockBoundingClientRect(div(), {
+      top: 150,
+      left: 30,
+      bottom: 350,
+      right: 150,
+      height: 250,
+    });
+
+    relativeElement.appendChild(element);
+
+    // When
+    const result = getOffset(element, relativeElement);
+
+    // Then
+    expect(result).toEqual({
+      absoluteBottom: 350,
+      absoluteLeft: 30,
+      absoluteRight: 150,
+      absoluteTop: 150,
+      bottom: 300,
+      height: 250,
+      left: 20,
+      right: 20,
+      top: 50,
+      width: 0,
+    });
+  });
+
+  it("should return position relative to a sticky element", () => {
+    // Given
+    const relativeElement = mockBoundingClientRect(
+      div({
+        style: "position: sticky",
+      }),
+      {
+        top: 100,
+        left: 10,
+        bottom: 700,
+        right: 50,
+        height: 550,
+      }
+    );
+
+    const element = mockBoundingClientRect(div(), {
+      top: 150,
+      left: 30,
+      bottom: 350,
+      right: 150,
+      height: 250,
+    });
+
+    relativeElement.appendChild(element);
+
+    // When
+    const result = getOffset(element, relativeElement);
+
+    // Then
+    expect(result).toEqual({
+      absoluteBottom: 350,
+      absoluteLeft: 30,
+      absoluteRight: 150,
+      absoluteTop: 150,
+      bottom: 300,
+      height: 250,
+      left: 20,
+      right: 20,
+      top: 50,
+      width: 0,
+    });
+  });
+});
diff --git a/src/util/getOffset.ts b/src/util/getOffset.ts
index 1b454f585..81469316d 100644
--- a/src/util/getOffset.ts
+++ b/src/util/getOffset.ts
@@ -1,8 +1,21 @@
 import getPropValue from "./getPropValue";
 import isFixed from "./isFixed";
 
+export type Offset = {
+  width: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+  absoluteTop: number;
+  absoluteLeft: number;
+  absoluteRight: number;
+  absoluteBottom: number;
+};
+
 /**
- * Get an element position on the page relative to another element (or body)
+ * Get an element position on the page relative to another element (or body) including scroll offset
  * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
  *
  * @api private
@@ -11,7 +24,7 @@ import isFixed from "./isFixed";
 export default function getOffset(
   element: HTMLElement,
   relativeEl?: HTMLElement
-): { width: number; height: number; left: number; top: number } {
+): Offset {
   const body = document.body;
   const docEl = document.documentElement;
   const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
@@ -23,10 +36,7 @@ export default function getOffset(
   const xr = relativeEl.getBoundingClientRect();
   const relativeElPosition = getPropValue(relativeEl, "position");
 
-  let obj = {
-    width: x.width,
-    height: x.height,
-  };
+  let obj: { top: number; left: number } = { top: 0, left: 0 };
 
   if (
     (relativeEl.tagName.toLowerCase() !== "body" &&
@@ -35,21 +45,35 @@ export default function getOffset(
   ) {
     // when the container of our target element is _not_ body and has either "relative" or "sticky" position, we should not
     // consider the scroll position but we need to include the relative x/y of the container element
-    return Object.assign(obj, {
+    obj = Object.assign(obj, {
       top: x.top - xr.top,
       left: x.left - xr.left,
     });
   } else {
     if (isFixed(element)) {
-      return Object.assign(obj, {
+      obj = Object.assign(obj, {
         top: x.top,
         left: x.left,
       });
     } else {
-      return Object.assign(obj, {
+      obj = Object.assign(obj, {
         top: x.top + scrollTop,
         left: x.left + scrollLeft,
       });
     }
   }
+
+  return {
+    ...obj,
+    ...{
+      width: x.width,
+      height: x.height,
+      bottom: obj.top + x.height,
+      right: obj.left + x.width,
+      absoluteTop: x.top,
+      absoluteLeft: x.left,
+      absoluteBottom: x.bottom,
+      absoluteRight: x.right,
+    },
+  };
 }
diff --git a/src/util/setPositionRelativeTo.test.ts b/src/util/positionRelativeTo.test.ts
similarity index 80%
rename from src/util/setPositionRelativeTo.test.ts
rename to src/util/positionRelativeTo.test.ts
index 2392f6fab..d0cba6465 100644
--- a/src/util/setPositionRelativeTo.test.ts
+++ b/src/util/positionRelativeTo.test.ts
@@ -1,6 +1,8 @@
-import { setPositionRelativeTo } from "./setPositionRelativeTo";
-import createElement from "./createElement";
+import { setPositionRelativeTo } from "./positionRelativeTo";
 import { getBoundingClientRectSpy } from "../../tests/jest/helper";
+import dom from "../packages/dom";
+
+const { div } = dom.tags;
 
 describe("setPositionRelativeTo", () => {
   it("should return if helperLayer or currentStep is null", () => {
@@ -18,7 +20,7 @@ describe("setPositionRelativeTo", () => {
 
   it("should set the correct width, height, top, left", () => {
     // Arrange
-    const stepElement = createElement("div");
+    const stepElement = div();
     stepElement.getBoundingClientRect = getBoundingClientRectSpy(
       200,
       100,
@@ -28,7 +30,7 @@ describe("setPositionRelativeTo", () => {
       100
     );
 
-    const helperLayer = createElement("div");
+    const helperLayer = div();
     helperLayer.getBoundingClientRect = getBoundingClientRectSpy(
       500,
       500,
@@ -50,12 +52,12 @@ describe("setPositionRelativeTo", () => {
 
   it("should add fixedTooltip if element is fixed", () => {
     // Arrange
-    const stepElementParent = createElement("div");
-    const stepElement = createElement("div");
+    const stepElementParent = div();
+    const stepElement = div();
     stepElement.style.position = "fixed";
     stepElementParent.appendChild(stepElement);
 
-    const helperLayer = createElement("div");
+    const helperLayer = div();
 
     // Act
     setPositionRelativeTo(stepElementParent, helperLayer, stepElement, 10);
@@ -66,10 +68,10 @@ describe("setPositionRelativeTo", () => {
 
   it("should remove the fixedTooltip className if element is not fixed", () => {
     // Arrange
-    const stepElement = createElement("div");
+    const stepElement = div();
     stepElement.style.position = "absolute";
 
-    const helperLayer = createElement("div");
+    const helperLayer = div();
     helperLayer.className = "introjs-fixedTooltip";
 
     // Act
diff --git a/src/util/setPositionRelativeTo.ts b/src/util/positionRelativeTo.ts
similarity index 74%
rename from src/util/setPositionRelativeTo.ts
rename to src/util/positionRelativeTo.ts
index 2db5bda06..bea93a94b 100644
--- a/src/util/setPositionRelativeTo.ts
+++ b/src/util/positionRelativeTo.ts
@@ -1,13 +1,9 @@
 import getOffset from "./getOffset";
 import isFixed from "./isFixed";
 import { removeClass, addClass } from "./className";
-import setStyle from "./setStyle";
+import setStyle from "./style";
 
-/**
- * Sets the position of the element relative to the target element
- * @api private
- */
-export const setPositionRelativeTo = (
+export const getPositionRelativeTo = (
   relativeElement: HTMLElement,
   element: HTMLElement,
   targetElement: HTMLElement,
@@ -28,11 +24,33 @@ export const setPositionRelativeTo = (
 
   const position = getOffset(targetElement, relativeElement);
 
-  //set new position to helper layer
-  setStyle(element, {
+  return {
     width: `${position.width + padding}px`,
     height: `${position.height + padding}px`,
     top: `${position.top - padding / 2}px`,
     left: `${position.left - padding / 2}px`,
-  });
+  };
+};
+
+/**
+ * Sets the position of the element relative to the target element
+ * @api private
+ */
+export const setPositionRelativeTo = (
+  relativeElement: HTMLElement,
+  element: HTMLElement,
+  targetElement: HTMLElement,
+  padding: number
+) => {
+  const styles = getPositionRelativeTo(
+    relativeElement,
+    element,
+    targetElement,
+    padding
+  );
+
+  if (!styles) return;
+
+  //set new position to helper layer
+  setStyle(element, styles);
 };
diff --git a/src/util/queryElement.ts b/src/util/queryElement.ts
index cdae51baa..195b0d981 100644
--- a/src/util/queryElement.ts
+++ b/src/util/queryElement.ts
@@ -12,13 +12,6 @@ export const queryElements = (
   return (container ?? document).querySelectorAll(selector);
 };
 
-export const queryElementByClassName = (
-  className: string,
-  container?: HTMLElement | null
-): HTMLElement | null => {
-  return queryElement(`.${className}`, container);
-};
-
 export const queryElementsByClassName = (
   className: string,
   container?: HTMLElement | null
@@ -26,17 +19,6 @@ export const queryElementsByClassName = (
   return queryElements(`.${className}`, container);
 };
 
-export const getElementByClassName = (
-  className: string,
-  container?: HTMLElement | null
-): HTMLElement => {
-  const element = queryElementByClassName(className, container);
-  if (!element) {
-    throw new Error(`Element with class name ${className} not found`);
-  }
-  return element;
-};
-
 export const getElement = (
   selector: string,
   container?: HTMLElement | null
diff --git a/src/util/removeChild.ts b/src/util/removeChild.ts
deleted file mode 100644
index d9355551f..000000000
--- a/src/util/removeChild.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import setStyle from "./setStyle";
-
-/**
- * Removes `element` from `parentElement`
- */
-export const removeChild = (element: HTMLElement | null) => {
-  if (!element || !element.parentElement) return;
-
-  element.parentElement.removeChild(element);
-};
-
-export const removeAnimatedChild = async (element: HTMLElement | null) => {
-  if (!element) return;
-
-  setStyle(element, {
-    opacity: "0",
-  });
-
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      try {
-        // removeChild(..) throws an exception if the child has already been removed (https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)
-        // this try-catch is added to make sure this function doesn't throw an exception if the child has been removed
-        // this scenario can happen when start()/exit() is called multiple times and the helperLayer is removed by the
-        // previous exit() call (note: this is a timeout)
-        removeChild(element);
-      } catch (e) {
-      } finally {
-        resolve();
-      }
-    }, 500);
-  });
-};
diff --git a/src/util/removeClass.ts b/src/util/removeClass.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/util/setAnchorAsButton.ts b/src/util/setAnchorAsButton.ts
deleted file mode 100644
index c83dcb619..000000000
--- a/src/util/setAnchorAsButton.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Setting anchors to behave like buttons
- *
- * @api private
- */
-export default function setAnchorAsButton(anchor: HTMLElement) {
-  anchor.setAttribute("role", "button");
-  anchor.tabIndex = 0;
-}
diff --git a/src/util/setStyle.ts b/src/util/setStyle.ts
deleted file mode 100644
index 985d3a537..000000000
--- a/src/util/setStyle.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Sets the style of an DOM element
- */
-export default function setStyle(
-  element: HTMLElement,
-  style: string | { [key: string]: string | number }
-) {
-  let cssText = "";
-
-  if (element.style.cssText) {
-    cssText += element.style.cssText;
-  }
-
-  if (typeof style === "string") {
-    cssText += style;
-  } else {
-    for (const rule in style) {
-      cssText += `${rule}:${style[rule]};`;
-    }
-  }
-
-  element.style.cssText = cssText;
-}
diff --git a/src/util/sleep.ts b/src/util/sleep.ts
new file mode 100644
index 000000000..540c14689
--- /dev/null
+++ b/src/util/sleep.ts
@@ -0,0 +1,8 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+// time to wait for the derivations to update
+export const waitMsForDerivations = 5;
+
+// time to wait for the exit transition to complete
+export const waitMsForExitTransition = 260;
diff --git a/src/util/setStyle.test.ts b/src/util/style.test.ts
similarity index 97%
rename from src/util/setStyle.test.ts
rename to src/util/style.test.ts
index f143360d0..479291c59 100644
--- a/src/util/setStyle.test.ts
+++ b/src/util/style.test.ts
@@ -1,4 +1,4 @@
-import setStyle from "./setStyle";
+import setStyle from "./style";
 
 describe("setStyle", () => {
   test("should set style when the list is empty", () => {
diff --git a/src/util/style.ts b/src/util/style.ts
new file mode 100644
index 000000000..a1ee73644
--- /dev/null
+++ b/src/util/style.ts
@@ -0,0 +1,36 @@
+/**
+ * Converts a style object to a css text
+ * @param style style object
+ * @returns css text
+ */
+export const style = (style: { [key: string]: string | number }): string => {
+  let cssText = "";
+
+  for (const rule in style) {
+    cssText += `${rule}:${style[rule]};`;
+  }
+
+  return cssText;
+};
+
+/**
+ * Sets the style of an DOM element
+ */
+export default function setStyle(
+  element: HTMLElement,
+  styles: string | { [key: string]: string | number }
+) {
+  let cssText = "";
+
+  if (element.style.cssText) {
+    cssText += element.style.cssText;
+  }
+
+  if (typeof styles === "string") {
+    cssText += styles;
+  } else {
+    cssText += style(styles);
+  }
+
+  element.style.cssText = cssText;
+}
diff --git a/tests/jest/setup.ts b/tests/jest/setup.ts
index d151094d3..97fc99beb 100644
--- a/tests/jest/setup.ts
+++ b/tests/jest/setup.ts
@@ -10,4 +10,6 @@ const dom = new JSDOM();
 global.document = dom.window.document;
 global.window = dom.window;
 global.Element = dom.window.Element;
+global.Text = dom.window.Text;
+global.Event = dom.window.Event;
 global.SVGElement = dom.window.SVGElement;
diff --git a/tsconfig.json b/tsconfig.json
index 7588f6b1f..3dd0924af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
     "importHelpers": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
     "alwaysStrict": true,
     "sourceMap": true,
     "forceConsistentCasingInFileNames": true,