diff --git a/.gitignore b/.gitignore
index 0165c169..92d2e414 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.yarn
 
 # Misc
 .DS_Store
diff --git a/.yarnrc.yml b/.yarnrc.yml
new file mode 100644
index 00000000..8b757b29
--- /dev/null
+++ b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index a3cc071a..8c7af8db 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -90,11 +90,7 @@ const config = {
             docId: "wallet/getting-started/web/getting-started",
             label: "Wallets",
           },
-          {
-            href: "https://stackblitz.com/edit/vitejs-vite-71wsul?file=src%2Fmain.ts&terminal=dev",
-            label: "Playground",
-            position: "right",
-          },
+          { to: "playground/", label: "Playground", position: "right" },
           {
             href: "https://debug.walletbeacon.io",
             label: "Debug Wallet",
diff --git a/package-lock.json b/package-lock.json
index da7fcfa2..695a5a76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,14 +14,14 @@
         "@docusaurus/preset-classic": "2.4.3",
         "@docusaurus/theme-live-codeblock": "^2.4.3",
         "@mdx-js/react": "^1.6.22",
+        "@monaco-editor/react": "^4.6.0",
         "@taquito/beacon-wallet": "^17.3.1",
         "@taquito/taquito": "^17.3.1",
         "clsx": "^1.2.1",
         "mermaid": "^10.4.0",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-monaco-editor": "^0.54.0"
+        "react-dom": "^17.0.2"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "2.4.3",
@@ -3164,6 +3164,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -13147,19 +13171,6 @@
         "webpack": ">=4.41.1 || 5.x"
       }
     },
-    "node_modules/react-monaco-editor": {
-      "version": "0.54.0",
-      "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.54.0.tgz",
-      "integrity": "sha512-9JwO69851mfpuhYLHlKbae7omQWJ/2ICE2lbL0VHyNyZR8rCOH7440u+zAtDgiOMpLwmYdY1sEZCdRefywX6GQ==",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16 <= 18",
-        "monaco-editor": "^0.39.0",
-        "react": ">=16 <= 18"
-      }
-    },
     "node_modules/react-router": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
@@ -14475,6 +14486,11 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -18765,6 +18781,22 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
       "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA=="
     },
+    "@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "requires": {
+        "@monaco-editor/loader": "^1.4.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -26198,14 +26230,6 @@
         "@babel/runtime": "^7.10.3"
       }
     },
-    "react-monaco-editor": {
-      "version": "0.54.0",
-      "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.54.0.tgz",
-      "integrity": "sha512-9JwO69851mfpuhYLHlKbae7omQWJ/2ICE2lbL0VHyNyZR8rCOH7440u+zAtDgiOMpLwmYdY1sEZCdRefywX6GQ==",
-      "requires": {
-        "prop-types": "^15.8.1"
-      }
-    },
     "react-router": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
@@ -27224,6 +27248,11 @@
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
diff --git a/package.json b/package.json
index 23e79ea0..53fdfbfd 100644
--- a/package.json
+++ b/package.json
@@ -28,14 +28,14 @@
     "@docusaurus/preset-classic": "2.4.3",
     "@docusaurus/theme-live-codeblock": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
+    "@monaco-editor/react": "^4.6.0",
     "@taquito/beacon-wallet": "^17.3.1",
     "@taquito/taquito": "^17.3.1",
     "clsx": "^1.2.1",
     "mermaid": "^10.4.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-monaco-editor": "^0.54.0"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.3",
diff --git a/src/components/Monaco.tsx b/src/components/Monaco.tsx
index a548f27d..c20b38d9 100644
--- a/src/components/Monaco.tsx
+++ b/src/components/Monaco.tsx
@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from "react";
 import { useColorMode } from "@docusaurus/theme-common";
 import { libs } from "./monaco-types";
 
-const MonacoEditor = lazy(() => import("react-monaco-editor"));
+import Editor from "@monaco-editor/react";
 
 function Monaco(props) {
   let monacoRef;
@@ -45,18 +45,20 @@ function Monaco(props) {
       monacoRef.editor.createModel(
         props.value,
         "typescript",
-        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`),
-      ),
+        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`)
+      )
     );
   }
 
   return (
     <Suspense fallback={<div>Loading</div>}>
-      <MonacoEditor
-        {...props}
-        editorWillMount={onEditorWillMount}
-        editorDidMount={onEditorDidMount}
-        theme={colorMode === "dark" ? "vs-dark" : "vs-light"}
+      <Editor
+        height="90vh"
+        defaultLanguage="typescript"
+        defaultValue="// some comment"
+        beforeMount={onEditorWillMount}
+        onMount={onEditorDidMount}
+        theme={colorMode === "dark" ? "vs-dark" : "light"}
       />
     </Suspense>
   );
diff --git a/src/components/RunnableCode.tsx b/src/components/RunnableCode.tsx
index 3f8b8c53..eb3ff731 100644
--- a/src/components/RunnableCode.tsx
+++ b/src/components/RunnableCode.tsx
@@ -9,7 +9,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 const Child = ({ code }) => {
   const { DAppClient } = require("../node_modules/beacon-sdk/dist/cjs");
 
-  const Monaco = require("./Monaco");
+  const Monaco = require("./Monaco").default;
 
   const { copyShareUrl, runBeaconCode } = require("../utils");
 
diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx
index aedc535d..eb63ef32 100644
--- a/src/pages/playground.tsx
+++ b/src/pages/playground.tsx
@@ -74,7 +74,7 @@ function Playground() {
     <BrowserOnly fallback={<></>}>
       {() => {
         const { DAppClient } = require("@airgap/beacon-sdk");
-        const { Monaco } = require("@site/src/components/Monaco");
+        const Monaco = require("@site/src/components/Monaco").default;
         const { copyShareUrl, runBeaconCode } = require("../utils");
 
         const execute = async () => {