diff --git a/.gitignore b/.gitignore
index cf52e28..94a3528 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /node_modules
 /index.js
+/index.esm.js
 /index.html
 /perf.html
 /temp
diff --git a/dist.sh b/dist.sh
index e140819..79d597c 100755
--- a/dist.sh
+++ b/dist.sh
@@ -11,18 +11,29 @@ mkdir dist
 
 version=$(cat package.json | grep '"version"' | cut -d'"' -f4)
 file_path="dist/sb.min.js"
+file_path_esm="dist/sb.min.esm.js"
+
 file_header="/* Strawberry $version
  * Copyright (c) 2023-present, Alan Tom (18alantom)
  * MIT License
  * This is a generated file. Do not edit.*/"
 
 echo "$file_header" >> "$file_path"
+echo "$file_header" >> "$file_path_esm"
+
 node_modules/.bin/esbuild ./index.ts --bundle --minify --format=iife --global-name=sb >> "$file_path"
+node_modules/.bin/esbuild ./index.ts --bundle --minify --format=esm >> "$file_path_esm"
+
+print_done() {
+  size=$(wc -c < $1)
+  gzsize=$(gzip -c $1 | wc -c)
 
-size=$(wc -c < $file_path)
-gzsize=$(gzip -c $file_path | wc -c)
+  kb=$(echo "scale=3; $size / 1024" | bc)
+  gzkb=$(echo "scale=3; $gzsize / 1024" | bc)
 
-kb=$(echo "scale=3; $size / 1024" | bc)
-gzkb=$(echo "scale=3; $gzsize / 1024" | bc)
+  path=$(printf "%-18s" $1)
+  echo "$path :: size: ${kb}KB, gzip: ${gzkb}KB"
+}
 
-echo "dist/sb.min.js is ${kb}KB and gzipped ${gzkb}KB"
+print_done $file_path
+print_done $file_path_esm
\ No newline at end of file
diff --git a/docs/api.md b/docs/api.md
index 349635d..0e0dfce 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -14,6 +14,7 @@ This page lists the available strawberry directives and exported methods.
    5. [`register`](#register): register custom components.
    6. [`load`](#load): load components from external files.
    7. [`prefix`](#prefix): change prefix `"sb"` to a custom value.
+   8. [`rdo`](#rdo): returns the reactive data object if initialized.
 
 ## Directives
 
@@ -301,3 +302,36 @@ if you want to use data attributes to manage directives you can do this:
 </script>
 <p data-sb-mark="message"></p>
 ```
+
+### `rdo`
+
+```typescript
+function rdo(): ReactiveObject | null;
+```
+
+Returns the **r**eactive **d**ata **o**bject if Strawberry has been initialized using
+[`sb.init`](#init).
+
+Useful for when Strawberry is being use as an ESM import where global state is
+not shared across module scripts. Example:
+
+```html
+<script type="module">
+  import { init, rdo } from 'sb';
+  
+  rdo() === null; // evaluates to true
+
+  // Module 1: Initialize Strawberry
+  const data = init();
+  
+  rdo() === data; // evaluates to true
+</script>
+
+<script type="module">
+  import { rdo } from 'sb';
+
+  // Module 2: Get data from `rdo` after init
+  // in Module 1.
+  const data = rdo();
+</script>
+```
diff --git a/docs/reactivity/mark.md b/docs/reactivity/mark.md
index a43f6c9..6f87dc7 100644
--- a/docs/reactivity/mark.md
+++ b/docs/reactivity/mark.md
@@ -165,3 +165,12 @@ If removing elements from the DOM is not what you intend to happen, you can inst
 > Array items on the other hand can be deleted `delete data.list[0]` but this is
 > not recommended as it will lead to incorrect sequences of keys, instead use 
 > array operations such as `splice`, `pop`, or `shift`.
+
+> **Note**: **Deleting Values in Modules**
+>
+> When using Strawberry as an ESM import. i.e `<script type="module">` deleting
+> a value in the script will cause elements marked with the value bot
+> **before and after** the script tag to be deleted.
+> 
+> This is because module execution is
+> [deferred](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts).
diff --git a/index.ts b/index.ts
index dafd460..40770c8 100644
--- a/index.ts
+++ b/index.ts
@@ -1201,6 +1201,14 @@ export function unwatch(key?: string, watcher?: Watcher): void {
   }
 }
 
+/**
+ * Returns reactive data object if sb.init has been called, else
+ * returns null.
+ */
+export function rdo(): typeof globalData {
+  return globalData;
+}
+
 /**
 
 # Scratch Space
diff --git a/package.json b/package.json
index ab4d632..2f2b9f6 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "dev": "esbuild ./index.ts --bundle --format=iife --global-name=sb --watch --outfile=index.js",
+    "dev-esm": "esbuild ./index.ts --bundle --format=esm --global-name=sb --watch --outfile=index.esm.js",
     "dist": "./dist.sh",
     "pub": "tsc && yarn dist && yarn publish --access public && ./postpub.sh"
   },
diff --git a/tests/esm/test.html b/tests/esm/test.html
new file mode 100644
index 0000000..467c10b
--- /dev/null
+++ b/tests/esm/test.html
@@ -0,0 +1,417 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sb Test (ESM) - General</title>
+    <link rel="stylesheet" href="../test.css" />
+    <script src="../test.js"></script>
+    <script type="importmap">
+      { "imports": { "sb": "../../index.esm.js" } }
+    </script>
+  </head>
+  <template name="red-p">
+    <p style="color: red">
+      <slot />
+    </p>
+  </template>
+  <body>
+    <main>
+      <h1>General (ESM)</h1>
+      <div>
+        <p>Success: <span id="success">0</span></p>
+        <p>Failure: <span id="failure">0</span></p>
+        <p>Total: <span id="total">0</span></p>
+      </div>
+    </main>
+
+    <script type="module">
+      import * as sb from 'sb';
+      test(typeof sb === 'object', 'sb is an object');
+
+      const data = sb.init();
+      test(typeof sb.watch === 'function', 'sb.watch is function');
+      test(typeof sb.unwatch === 'function', 'sb.unwatch is function');
+      test(typeof sb.register === 'function', 'sb.register is function');
+      test(data === sb.rdo(), 'sb returns same data');
+
+      data.x = 10;
+      test(data.x === 10, 'x (value) set on data');
+
+      data.y = () => data.x + 5;
+      test(data.y === 15, 'y (computed) set on data');
+
+      const rp = document.createElement('red-p').shadowRoot?.lastElementChild;
+      test(rp instanceof HTMLParagraphElement, 'el red-p has p shadowRoot');
+      test(rp.style.color === 'red', 'red-p has style.color red');
+
+      delete data.x;
+      delete data.y;
+    </script>
+
+    <p id="1" sb-mark="a">notset</p>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const p1 = document.getElementById('1');
+      test(p1.isConnected, 'p#1 connected');
+      test(p1.innerText === 'notset', 'p#1 data not set');
+
+      data.a = 'set';
+      test(p1.innerText === 'set', 'p#1 data set');
+
+      data.a = 'changed';
+      test(p1.innerText === 'changed', 'p#1 data changed');
+
+      delete data.a;
+      test(!p1.isConnected, 'p#1 not connected');
+    </script>
+
+    <template name="green-p">
+      <p style="color: green">
+        <slot />
+      </p>
+    </template>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      let gp = document.createElement('green-p').shadowRoot?.lastElementChild;
+      test(gp instanceof HTMLParagraphElement, 'el green-p has p shadowRoot');
+      test(gp.style.color === 'green', 'green-p has style.color green');
+    </script>
+
+    <red-p id="2" sb-mark="i">red</red-p>
+    <green-p id="3" sb-mark="j">green</green-p>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const p2 = document.getElementById('2');
+      const p3 = document.getElementById('3');
+
+      test(p2.tagName.toLowerCase() === 'red-p', 'p#2 is red-p');
+      test(p3.tagName.toLowerCase() === 'green-p', 'p#3 is green-p');
+      test(p2.innerText === 'red', 'p#2 data not set');
+      test(p3.innerText === 'green', 'p#3 data not set');
+
+      data.i = 'RED';
+      data.j = 'GREEN';
+      test(p2.innerText === 'RED', 'p#2 data set');
+      test(p3.innerText === 'GREEN', 'p#3 data set');
+
+      data.j = () => data.i.toLowerCase();
+      test(p3.innerText === 'red', 'p#3 data computed');
+
+      data.i = 'GREEN';
+      test(p3.innerText === 'green', 'p#3 data set from computed');
+
+      delete data.i;
+      test(!p2.isConnected, 'p#2 not connected');
+      delete data.j;
+      test(!p3.isConnected, 'p#3 not connected');
+    </script>
+
+    <template sb-if="a">
+      <p id="4">temp</p>
+    </template>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      test(document.getElementById('4') === null, 'p#4 not found');
+
+      data.a = false;
+      test(document.getElementById('4') === null, 'p#4 still not found');
+
+      data.a = true;
+      const p4 = document.getElementById('4');
+      test(p4 instanceof HTMLParagraphElement, 'p#4 found');
+
+      data.a = false;
+      test(!p4.isConnected, 'p#4 is not connected after false');
+
+      data.a = true;
+
+      const p4Clone = document.getElementById('4');
+      test(p4 !== p4Clone, 'p#4 different from clone');
+      test(p4Clone.isConnected, 'p#4 clone is connected');
+      test(!p4.isConnected, 'p#4 is not connected after clone');
+
+      delete data.a;
+      test(!p4Clone.isConnected, 'p#4 clone is not connected');
+
+      data.a = true;
+      test(
+        document.getElementById('4') instanceof HTMLParagraphElement,
+        'p#4 found after delete and set'
+      );
+      delete data.a;
+    </script>
+
+    <p id="5" sb-mark="b">notset</p>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const p5 = document.getElementById('5');
+      test(p5.innerText === 'notset', 'p#5 data not set');
+      data.a = 'stuff';
+      data.b = () => [data.a, data.a].join(',');
+
+      test(
+        p5.innerText === ['stuff', 'stuff'].join(','),
+        'p#5 (computed) data set'
+      );
+      data.a = 'thing';
+      test(
+        p5.innerText === ['thing', 'thing'].join(','),
+        'p#5 (computed) data updated'
+      );
+
+      delete data.a;
+      test(
+        p5.innerText === ['thing', 'thing'].join(','),
+        'p#5 (computed) data save after a delete'
+      );
+
+      delete data.b;
+      test(!p5.isConnected, 'p#5 not connected after b (computed) delete');
+
+      data.c = 0;
+      let w = 0;
+      const w1 = (nv) => test(nv === 1, 'watch 1 working');
+      const w2 = () => w++;
+
+      sb.watch('c', w1);
+      sb.watch('c', w2);
+
+      data.c = 1;
+      test(w === 1, 'watch 2 ran');
+
+      sb.unwatch('c', w1);
+      data.c = 5;
+      test(w === 2, 'watch 2 ran again');
+
+      sb.unwatch('c', w2);
+      data.c = 1;
+      test(w === 2, 'watch 2 removed');
+
+      delete data.c;
+      delete data.b;
+      delete data.a;
+
+      data.a = 1;
+      data.b = () => data.a + 1;
+
+      sb.watch('b', (v) => test(v === 3, 'watch 3 working'));
+      sb.watch('b', (v) => test(typeof v === 'number', 'watch 4 working'));
+      data.a = 2;
+
+      sb.unwatch('b');
+      delete data.b;
+      data.a = 3;
+
+      sb.watch('b', (v) =>
+        test(v === 4 || v === undefined, `watch 5 (${v}) is working`)
+      );
+
+      data.b = 4;
+      delete data.b;
+      sb.unwatch();
+      delete data.a;
+    </script>
+
+    <div id="l1">
+      <red-p sb-mark="l1.#"></red-p>
+    </div>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const l1 = document.getElementById('l1');
+      test(l1.childElementCount === 1, 'div#l1 has one child');
+
+      data.l1 = ['a'];
+      test(l1.childElementCount === 2, 'div#l1 has two children');
+      test(l1.children[0]?.innerText === 'a', 'div#l1 child 0 is a');
+      test(
+        l1.children[0]?.tagName.toLowerCase() === 'red-p',
+        'div#l1 child elem is red-p'
+      );
+
+      data.l1.push('b');
+      test(l1.childElementCount === 3, 'div#l1 has three children');
+      test(l1.children[1]?.innerText === 'b', 'div#l1 child 1 is b');
+
+      data.l1.pop();
+      test(l1.childElementCount === 2, 'div#l1 one child removed');
+      test(l1.children[0]?.innerText === 'a', 'div#l1 child 0 is a');
+
+      const ch0 = l1.children[0];
+      data.l1 = ['a'];
+      test(ch0 !== l1.children[0], 'div#l1 children replaced');
+      data.l1 = [];
+      test(
+        l1.children[0] instanceof HTMLTemplateElement,
+        'div#l1 has template child'
+      );
+    </script>
+
+    <template name="div-user">
+      <div>
+        <h1><slot name="name" /></h1>
+        <p><slot name="age" /></p>
+      </div>
+    </template>
+
+    <div-user id="du1" sb-mark="user">
+      <span slot="name" sb-mark="user.name"></span>
+      <span slot="age" sb-mark="user.age"></span>
+    </div-user>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const du1 = document.getElementById('du1');
+      const du1div = du1.shadowRoot.lastElementChild;
+      test(du1div instanceof HTMLDivElement, 'el#du1 has shadowRoot div');
+
+      const du1h1 = du1div.children[0];
+      test(du1h1 instanceof HTMLHeadingElement, 'el#du1 has a h# element');
+
+      const du1p = du1div.children[1];
+      test(du1p instanceof HTMLParagraphElement, 'el#du1 has a p element');
+      test(
+        document.querySelector('[sb-mark="user.name"]') instanceof
+          HTMLSpanElement,
+        'user.name el is a span'
+      );
+      test(
+        document.querySelector('[sb-mark="user.age"]') instanceof
+          HTMLSpanElement,
+        'user.age el is a span'
+      );
+
+      data.user = {};
+      const nameSpan = document.querySelector('[sb-mark="user.name"]');
+      const ageSpan = document.querySelector('[sb-mark="user.age"]');
+      test(nameSpan instanceof HTMLSpanElement, 'user.name is a span');
+      test(nameSpan.innerText === '', 'user.name span is empty');
+      test(ageSpan instanceof HTMLSpanElement, 'user.age is a span');
+      test(ageSpan.innerText === '', 'user.age span is empty');
+
+      data.user.name = 'test';
+      test(nameSpan.innerText === 'test', 'user.name span text set');
+      test(ageSpan.innerText === '', 'user.age span still empty');
+
+      data.user.age = 99;
+      test(ageSpan.innerText === '99', 'user.age span text set');
+
+      delete data.user.age;
+      test(!ageSpan.isConnected, 'ageSpan removed on delete');
+
+      data.user.age = 0;
+      test(!ageSpan.isConnected, 'ageSpan still removed after value set');
+
+      data.user = { name: 'TEST', age: 55 };
+      test(du1.isConnected, 'el#du1 still connected after reassign');
+      test(du1.children.length === 1, 'el#du1 has only one child after reset');
+      test(
+        du1.children[0].innerText === 'TEST',
+        'new user.name span has updated text'
+      );
+
+      delete data.user;
+      test(!du1.isConnected, 'el#du1 disconnected after user delete');
+    </script>
+
+    <div id="d1">
+      <div-user sb-mark="users.#">
+        <span slot="name" sb-mark="users.#.name"></span>
+        <span slot="age" sb-mark="users.#.age"></span>
+      </div-user>
+    </div>
+    <script type="module">
+      import * as sb from 'sb';
+      const data = sb.rdo();
+
+      const d1 = document.getElementById('d1');
+      data.users = [];
+      test(d1.children.length === 1, 'el#d1 has one child');
+
+      data.users.push({ name: 'A', age: 1 });
+      test(d1.children.length === 2, 'el#d1 has two children');
+      test(
+        d1.children[0].children[0].innerText === 'A',
+        'el#d1[0][0] innerText is A'
+      );
+      test(
+        d1.children[0].children[1].innerText === '1',
+        'el#d1[0][1] innerText is 1'
+      );
+
+      data.users.push({ name: 'B', age: 2 });
+      test(d1.children.length === 3, 'el#d1 has three children');
+      test(
+        d1.children[0].children[0].innerText === 'A',
+        'el#d1[0][0] innerText is still A'
+      );
+      test(
+        d1.children[0].children[1].innerText === '1',
+        'el#d1[0][1] innerText is still 1'
+      );
+      test(
+        d1.children[1].children[0].innerText === 'B',
+        'el#d1[1][0] innerText is B'
+      );
+      test(
+        d1.children[1].children[1].innerText === '2',
+        'el#d1[1][1] innerText is 1'
+      );
+      data.users = [];
+    </script>
+
+    <template name="inv-item">
+      <p>
+        <slot name="name"></slot>
+      </p>
+    </template>
+
+    <script type="module">
+      import * as sb from 'sb';
+      sb.register();
+    </script>
+
+    <div id="inv-items">
+      <inv-item sb-mark="items.#">
+        <span slot="name" sb-mark="items.#.name"></span>
+      </inv-item>
+    </div>
+
+    <script type="module">
+      import { rdo } from 'sb';
+      const data = rdo();
+
+      const items = document.getElementById('inv-items');
+      data.qtys = {};
+
+      data.items = () =>
+        Object.keys(data.qtys).map((name) => ({
+          name,
+          quantity: data.qtys[name],
+        }));
+
+      test(items.children.length === 1, 'el#inv-items has one child');
+      data.qtys['item'] = 0;
+
+      test(items.children.length === 2, 'el#inv-items has 1 child');
+      test(
+        items.children[0].innerText === 'item',
+        'el#inv-items has correct innerText'
+      );
+    </script>
+  </body>
+</html>
diff --git a/tests/index.html b/tests/index.html
index 06a4e24..e01371a 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -31,12 +31,22 @@
     display: flex;
     flex-direction: column;
   }
+  
+  h1 {
+    color: white;
+    font-size: 4rem;
+  }
 </style>
+<h1>Strawberry Tests</h1>
 <div style="display: flex; flex-wrap: wrap; gap: 2rem">
   <section>
     <a href="./test.html">general</a>
     <iframe src="./test.html"></iframe>
   </section>
+  <section>
+    <a href="./esm/test.html">general (ESM)</a>
+    <iframe src="./esm/test.html"></iframe>
+  </section>
   <section>
     <a href="./test.templates.html">templates</a>
     <iframe src="./test.templates.html"></iframe>
diff --git a/tests/test.computed.html b/tests/test.computed.html
index 696d0cb..38cb3fd 100644
--- a/tests/test.computed.html
+++ b/tests/test.computed.html
@@ -17,7 +17,7 @@
     </script>
 
     <main>
-      <h1>Computed Tests</h1>
+      <h1>Computed</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>
diff --git a/tests/test.conditionals.html b/tests/test.conditionals.html
index ba4d4f9..8de5e36 100644
--- a/tests/test.conditionals.html
+++ b/tests/test.conditionals.html
@@ -13,7 +13,7 @@
 
   <body>
     <main>
-      <h1>Conditionals Tests</h1>
+      <h1>Conditionals</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>
diff --git a/tests/test.directives.html b/tests/test.directives.html
index 300e7fa..c3f341d 100644
--- a/tests/test.directives.html
+++ b/tests/test.directives.html
@@ -11,7 +11,7 @@
   </head>
   <body>
     <main>
-      <h1>Directives Tests</h1>
+      <h1>Directives</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>
diff --git a/tests/test.html b/tests/test.html
index cc76035..0392147 100644
--- a/tests/test.html
+++ b/tests/test.html
@@ -16,7 +16,7 @@
   </template>
   <body>
     <main>
-      <h1>General Tests</h1>
+      <h1>General</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>
diff --git a/tests/test.loops.html b/tests/test.loops.html
index 548119d..f7374e4 100644
--- a/tests/test.loops.html
+++ b/tests/test.loops.html
@@ -11,7 +11,7 @@
   </head>
   <body>
     <main>
-      <h1>Loop Tests</h1>
+      <h1>Loop</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>
diff --git a/tests/test.templates.html b/tests/test.templates.html
index b6972a7..5f7aaca 100644
--- a/tests/test.templates.html
+++ b/tests/test.templates.html
@@ -18,7 +18,7 @@
   </head>
   <body>
     <main>
-      <h1>Template Tests</h1>
+      <h1>Template</h1>
       <div>
         <p>Success: <span id="success">0</span></p>
         <p>Failure: <span id="failure">0</span></p>