diff --git a/.npmignore b/.npmignore
index ca255aa70..7230a99f7 100644
--- a/.npmignore
+++ b/.npmignore
@@ -8,4 +8,5 @@ coverage
 scripts
 sample
 vscode
-test
\ No newline at end of file
+test
+!__transpiled
\ No newline at end of file
diff --git a/package.json b/package.json
index c57857678..40d7b108c 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "generate:readme:toc": "markdown-toc -i README.md",
     "bump:version": "npm --no-git-tag-version --allow-same-version version $VERSION",
     "copy:sources": "node ./scripts/copy-sources.js",
-    "prepublishOnly": "npm run generate:assets",
+    "prepublishOnly": "npm run generate:assets && npm run transpile",
+    "transpile": "node ./scripts/transpile.js",
     "test": "npm run test:library && npm run test:generator"
   },
   "publishConfig": {
diff --git a/scripts/transpile.js b/scripts/transpile.js
new file mode 100644
index 000000000..371c72d79
--- /dev/null
+++ b/scripts/transpile.js
@@ -0,0 +1,16 @@
+const { transpileFiles } = require("@asyncapi/generator-react-sdk");
+const path = require("path");
+
+async function transpileTemplate() {
+  try {
+    const templateContentDir = path.join(__dirname, "../template");
+    console.log("Template content directory:", templateContentDir);
+    const outputDir = path.join(__dirname, "../__transpiled");
+    console.log("Output directory for transpiled files:", outputDir);
+    await transpileFiles(templateContentDir, outputDir, { recursive: true });
+  } catch (error) {
+    console.log("Error during template transpilation:", err)
+  }
+}
+
+transpileTemplate();