diff --git a/.gitignore b/.gitignore
index f54eb4a..0a08b8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+node_modules/
+dist/
+
 # temporary files
 *~
 *swo
diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index f7585ee..488e046 100644
--- a/demo/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -1,5 +1,6 @@
 // @ts-check
-import WebComponent from "../index.mjs";
+
+import WebComponent from "../dist";
 
 export class HelloWorld extends WebComponent {
   name = "World";
diff --git a/demo/SimpleText.mjs b/demo/SimpleText.mjs
index afc6506..02ac0c4 100644
--- a/demo/SimpleText.mjs
+++ b/demo/SimpleText.mjs
@@ -1,5 +1,6 @@
 // @ts-check
-import WebComponent from "../index.mjs";
+
+import WebComponent from "../dist/index";
 
 class SimpleText extends WebComponent {
   onInit() {
diff --git a/index.mjs b/index.mjs
deleted file mode 100644
index fe0312e..0000000
--- a/index.mjs
+++ /dev/null
@@ -1,3 +0,0 @@
-import { WebComponent } from './WebComponent.mjs';
-
-export default WebComponent;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..726293b
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,29 @@
+{
+  "name": "web-component-base",
+  "version": "1.6.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "web-component-base",
+      "version": "1.6.1",
+      "license": "MIT",
+      "devDependencies": {
+        "typescript": "^5.2.2"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index ed6c577..4b5146d 100644
--- a/package.json
+++ b/package.json
@@ -2,17 +2,17 @@
   "name": "web-component-base",
   "version": "1.6.1",
   "description": "Minimal base class for creating reactive custom elements easily",
-  "main": "index.mjs",
+  "main": "index.d.ts",
   "scripts": {
-    "start": "npx simple-server ."
+    "start": "npx simple-server .",
+    "build": "tsc --allowJs src/* --outDir dist --declaration"
   },
   "repository": {
     "type": "git",
     "url": "https://git.sr.ht/~ayoayco/web-component-base"
   },
   "files": [
-    "index.mjs",
-    "WebComponent.mjs"
+    "dist/*"
   ],
   "keywords": [
     "web components",
@@ -25,5 +25,8 @@
   "bugs": {
     "url": "https://todo.sr.ht/~ayoayco/web-component-base"
   },
-  "homepage": "https://git.sr.ht/~ayoayco/web-component-base#readme"
+  "homepage": "https://git.sr.ht/~ayoayco/web-component-base#readme",
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  }
 }
diff --git a/WebComponent.mjs b/src/WebComponent.js
similarity index 100%
rename from WebComponent.mjs
rename to src/WebComponent.js
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..3b06483
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+import { WebComponent } from "./WebComponent.js";
+export default WebComponent;