diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index 394a2f2..fd9977d 100644
--- a/demo/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -1,6 +1,4 @@
-// @ts-check
-
-import WebComponent from "../src/index.js";
+import WebComponent from "../src/index.mjs";
 
 export class HelloWorld extends WebComponent {
   name = "World";
@@ -9,7 +7,10 @@ export class HelloWorld extends WebComponent {
   static properties = ["name", "emotion"];
 
   onInit() {
-    console.log("onInit", this.querySelector("h1"));
+    let count = 0;
+    this.onclick = () => {
+      this.setAttribute("name", `Clicked ${++count}x!`);
+    };
   }
 
   afterViewInit() {
@@ -22,9 +23,9 @@ export class HelloWorld extends WebComponent {
   }
 
   get template() {
-    return `<h1>Hello ${this.name}${
+    return `<button id="btn">Hello ${this.name}${
       this.emotion === "sad" ? ". 😭" : "! 🙌"
-    }</h1>`;
+    }</button>`;
   }
 }
 
diff --git a/demo/SimpleText.mjs b/demo/SimpleText.mjs
index 72c7b3a..8a58c3e 100644
--- a/demo/SimpleText.mjs
+++ b/demo/SimpleText.mjs
@@ -1,6 +1,6 @@
 // @ts-check
 
-import WebComponent from "../src/index.js";
+import { WebComponent } from "../src/WebComponent.mjs";
 
 class SimpleText extends WebComponent {
   clickCallback() {
diff --git a/demo/index.html b/demo/index.html
index b4bd44f..275e5d7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,8 +8,10 @@
     <script type="module" src="SimpleText.mjs"></script>
   </head>
   <body>
-    <hello-world name="Ayo" emotion="sad"></hello-world>
-    <simple-text greeting="hey"></simple-text>
+    <hello-world id="hey" name="Ayo" emotion="sad"></hello-world>
+    <p>
+      <simple-text greeting="hey"></simple-text>
+    </p>
 
     <script type="module">
       const helloWorld = document.querySelector("hello-world");
@@ -17,9 +19,6 @@
         helloWorld.setAttribute("emotion", "excited");
       }, 2500);
 
-      helloWorld.addEventListener("click", () => {
-        helloWorld.setAttribute("name", "Clicked");
-      });
       const clickableText = document.querySelector("simple-text");
       setTimeout(() => {
         clickableText.remove();
diff --git a/package.json b/package.json
index ff12104..28ca8b6 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.6.15",
   "description": "Minimal base class for creating reactive custom elements easily",
   "main": "index.d.ts",
+  "type": "module",
   "scripts": {
     "start": "npx simple-server .",
     "build": "tsc --allowJs src/* --outDir dist --declaration --emitDeclarationOnly",
diff --git a/src/WebComponent.js b/src/WebComponent.mjs
similarity index 94%
rename from src/WebComponent.js
rename to src/WebComponent.mjs
index bd5fa77..6ed16e1 100644
--- a/src/WebComponent.js
+++ b/src/WebComponent.mjs
@@ -19,21 +19,25 @@ export class WebComponent extends HTMLElement {
 
   /**
    * Triggered after view is initialized
+   * @returns void
    */
   afterViewInit() {}
 
   /**
    * Triggered when the component is connected to the DOM
+   * @returns void
    */
   onInit() {}
 
   /**
    * Triggered when the component is disconnected from the DOM
+   * @returns void
    */
   onDestroy() {}
 
   /**
    * @param {{'property': string, 'previousValue': any, 'currentValue': any}} changes
+   * @returns void
    */
   onChanges(changes) {}
 
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 3b06483..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { WebComponent } from "./WebComponent.js";
-export default WebComponent;
diff --git a/src/index.mjs b/src/index.mjs
new file mode 100644
index 0000000..bfc9f3d
--- /dev/null
+++ b/src/index.mjs
@@ -0,0 +1,3 @@
+// @ts-check
+import { WebComponent } from "./WebComponent.mjs";
+export default WebComponent;
