diff --git a/Cargo.toml b/Cargo.toml
index 468518f5f..5e3a0a032 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,6 +22,7 @@ dioxus-ssr = { path = "./packages/ssr", version = "^0.1.3", optional = true }
 
 dioxus-router = { path = "./packages/router", version = "^0.1.1", optional = true }
 dioxus-mobile = { path = "./packages/mobile", version = "^0.0.3", optional = true }
+dioxus-interpreter-js = { path = "./packages/interpreter", version = "^0.0.0", optional = true }
 # dioxus-liveview = { path = "./packages/liveview", optional = true }
 
 [features]
@@ -52,6 +53,7 @@ members = [
     "packages/ssr",
     "packages/desktop",
     "packages/mobile",
+    "packages/interpreter",
 ]
 
 [dev-dependencies]
diff --git a/packages/interpreter/Cargo.toml b/packages/interpreter/Cargo.toml
new file mode 100644
index 000000000..0934c08df
--- /dev/null
+++ b/packages/interpreter/Cargo.toml
@@ -0,0 +1,8 @@
+[package]
+name = "dioxus-interpreter-js"
+version = "0.0.0"
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
diff --git a/packages/jsinterpreter/README.md b/packages/interpreter/README.md
similarity index 100%
rename from packages/jsinterpreter/README.md
rename to packages/interpreter/README.md
diff --git a/packages/interpreter/build.rs b/packages/interpreter/build.rs
new file mode 100644
index 000000000..1ef8b6548
--- /dev/null
+++ b/packages/interpreter/build.rs
@@ -0,0 +1,6 @@
+use std::process::Command;
+
+fn main() {
+    println!("cargo:rerun-if-changed=interpreter.ts");
+    Command::new("tsc").spawn().unwrap();
+}
diff --git a/packages/jsinterpreter/interpreter.js b/packages/interpreter/interpreter.js
similarity index 99%
rename from packages/jsinterpreter/interpreter.js
rename to packages/interpreter/interpreter.js
index ea50ec3d3..a70177252 100644
--- a/packages/jsinterpreter/interpreter.js
+++ b/packages/interpreter/interpreter.js
@@ -198,7 +198,7 @@ export class Interpreter {
                 this.RemoveEventListener(edit.root, edit.event_name);
                 break;
             case "NewEventListener":
-                // this handler is only provided on desktop implementations since this 
+                // this handler is only provided on desktop implementations since this
                 // method is not used by the web implementation
                 let handler = (event) => {
                     let target = event.target;
diff --git a/packages/jsinterpreter/interpreter.ts b/packages/interpreter/interpreter.ts
similarity index 99%
rename from packages/jsinterpreter/interpreter.ts
rename to packages/interpreter/interpreter.ts
index fdd8c671d..44d53cda8 100644
--- a/packages/jsinterpreter/interpreter.ts
+++ b/packages/interpreter/interpreter.ts
@@ -1,7 +1,3 @@
-
-
-
-
 export function main() {
   let root = window.document.getElementById("main");
   if (root != null) {
@@ -245,7 +241,7 @@ export class Interpreter {
       case "NewEventListener":
 
 
-        // this handler is only provided on desktop implementations since this 
+        // this handler is only provided on desktop implementations since this
         // method is not used by the web implementation
         let handler = (event: Event) => {
           let target = event.target as Element | null;
diff --git a/packages/interpreter/src/lib.rs b/packages/interpreter/src/lib.rs
new file mode 100644
index 000000000..9c0229aa5
--- /dev/null
+++ b/packages/interpreter/src/lib.rs
@@ -0,0 +1 @@
+pub static INTERPRTER_JS: &str = include_str!("../interpreter.js");
diff --git a/packages/jsinterpreter/tsconfig.json b/packages/interpreter/tsconfig.json
similarity index 100%
rename from packages/jsinterpreter/tsconfig.json
rename to packages/interpreter/tsconfig.json