diff --git a/package.json b/package.json
index 9892cc1a..3dc74f58 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/standalone": "^7.20.6",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
@@ -83,6 +82,7 @@
     "css-loader": "^6.7.2",
     "current-git-branch": "^1.1.0",
     "dedent": "^0.7.0",
+    "esbuild-wasm": "^0.19.5",
     "fast-glob": "^3.2.12",
     "find-up": "^5.0.0",
     "fuzzy": "^0.1.3",
@@ -134,6 +134,7 @@
   },
   "packageManager": "pnpm@7.18.1",
   "volta": {
+    "pnpm": "7.18.1",
     "node": "16.13.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5a2dc05..6b974ae5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,6 @@ specifiers:
   '@babel/preset-env': ^7.20.2
   '@babel/preset-react': ^7.18.6
   '@babel/preset-typescript': ^7.18.6
-  '@babel/standalone': ^7.20.6
   '@changesets/cli': ^2.25.2
   '@octokit/rest': ^19.0.5
   '@soda/friendly-errors-webpack-plugin': ^1.8.1
@@ -35,6 +34,7 @@ specifiers:
   current-git-branch: ^1.1.0
   cypress: ^12.0.2
   dedent: ^0.7.0
+  esbuild-wasm: ^0.19.5
   eslint: ^8.44.0
   eslint-config-seek: ^11.3.1
   fast-glob: ^3.2.12
@@ -78,7 +78,6 @@ dependencies:
   '@babel/preset-env': 7.20.2_@babel+core@7.20.5
   '@babel/preset-react': 7.18.6_@babel+core@7.20.5
   '@babel/preset-typescript': 7.18.6_@babel+core@7.20.5
-  '@babel/standalone': 7.20.6
   '@soda/friendly-errors-webpack-plugin': 1.8.1_webpack@5.75.0
   '@types/base64-url': 2.2.0
   '@types/codemirror': 5.60.5
@@ -101,6 +100,7 @@ dependencies:
   css-loader: 6.7.2_webpack@5.75.0
   current-git-branch: 1.1.0
   dedent: 0.7.0
+  esbuild-wasm: 0.19.5
   fast-glob: 3.2.12
   find-up: 5.0.0
   fuzzy: 0.1.3
@@ -1643,11 +1643,6 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.11
 
-  /@babel/standalone/7.20.6:
-    resolution: {integrity: sha512-u5at/CbBLETf7kx2LOY4XdhseD79Y099WZKAOMXeT8qvd9OSR515my2UNBBLY4qIht/Qi9KySeQHQwQwxJN4Sw==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
   /@babel/template/7.18.10:
     resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
     engines: {node: '>=6.9.0'}
@@ -4784,6 +4779,12 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /esbuild-wasm/0.19.5:
+    resolution: {integrity: sha512-7zmLLn2QCj93XfMmHtzrDJ1UBuOHB2CZz1ghoCEZiRajxjUvHsF40PnbzFIY/pmesqPRaEtEWii0uzsTbnAgrA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dev: false
+
   /esbuild/0.11.23:
     resolution: {integrity: sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==}
     hasBin: true
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 79de0932..3f0280fa 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -37,8 +37,9 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   useEffect(() => {
     try {
-      const newCode = compileJsx(code);
-      setRenderCode(newCode);
+      compileJsx(code).then(({ code: newCode }) => {
+        setRenderCode(newCode);
+      });
     } catch (e) {}
   }, [code]);
 
diff --git a/src/index.js b/src/index.js
index 9b0f5a8c..4fc28582 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
+import * as esbuild from 'esbuild-wasm';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -26,21 +27,27 @@ polyfillIntersectionObserver().then(() => {
       Object.entries(components).filter(([_, value]) => value)
     );
 
-    renderElement(
-      <StoreProvider themes={themeNames} widths={widths}>
-        <Playroom
-          components={filteredComponents}
-          widths={widths}
-          themes={themeNames}
-          snippets={
-            typeof snippets.default !== 'undefined'
-              ? snippets.default
-              : snippets
-          }
-        />
-      </StoreProvider>,
-      outlet
-    );
+    esbuild
+      .initialize({
+        wasmURL: 'https://unpkg.com/esbuild-wasm/esbuild.wasm',
+      })
+      .then(() => {
+        renderElement(
+          <StoreProvider themes={themeNames} widths={widths}>
+            <Playroom
+              components={filteredComponents}
+              widths={widths}
+              themes={themeNames}
+              snippets={
+                typeof snippets.default !== 'undefined'
+                  ? snippets.default
+                  : snippets
+              }
+            />
+          </StoreProvider>,
+          outlet
+        );
+      });
   };
   renderPlayroom();
 
diff --git a/src/utils/compileJsx.ts b/src/utils/compileJsx.ts
index f67da928..bbb4dc89 100644
--- a/src/utils/compileJsx.ts
+++ b/src/utils/compileJsx.ts
@@ -1,4 +1,4 @@
-import { transform } from '@babel/standalone';
+import { transform as esbuildTransform } from 'esbuild-wasm';
 
 export const ReactFragmentPragma = 'R_F';
 export const ReactCreateElementPragma = 'R_cE';
@@ -7,17 +7,11 @@ export const openFragmentTag = '<>';
 export const closeFragmentTag = '</>';
 
 export const compileJsx = (code: string) =>
-  transform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
-    presets: [
-      [
-        'react',
-        {
-          pragma: ReactCreateElementPragma,
-          pragmaFrag: ReactFragmentPragma,
-        },
-      ],
-    ],
-  }).code;
+  esbuildTransform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
+    loader: 'jsx',
+    jsxFactory: ReactCreateElementPragma,
+    jsxFragment: ReactFragmentPragma,
+  });
 
 export const validateCode = (code: string) => {
   try {