diff --git a/frontend/src/scenes/plugins/edit/PluginSource.tsx b/frontend/src/scenes/plugins/edit/PluginSource.tsx
index dab4f5b0b4b..28689d872e9 100644
--- a/frontend/src/scenes/plugins/edit/PluginSource.tsx
+++ b/frontend/src/scenes/plugins/edit/PluginSource.tsx
@@ -2,30 +2,36 @@ import React, { useEffect } from 'react'
 import { useActions, useValues } from 'kea'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { Button, Form, Input } from 'antd'
-import MonacoEditor from 'react-monaco-editor'
+import MonacoEditor from '@monaco-editor/react'
 import { Drawer } from 'lib/components/Drawer'
 
-const defaultSource = `// /* Runs on every event */
-function processEvent(event, { config }) {
-    // Some events (like $identify) don't have properties
-    if (event.properties) {
-        event.properties['hello'] = \`Hello \${config.name || 'world'}\`
-    }
+// @ts-ignore
+import SCAFFOLD_index from '!raw-loader!@posthog/plugin-scaffold/dist/index.d.ts'
+// @ts-ignore
+import SCAFFOLD_errors from '!raw-loader!@posthog/plugin-scaffold/dist/errors.d.ts'
+// @ts-ignore
+import SCAFFOLD_types from '!raw-loader!@posthog/plugin-scaffold/dist/types.d.ts'
+
+const defaultSource = `// Learn more about plugins at: https://posthog.com/docs/plugins/overview
+import { Plugin } from '@posthog/plugin-scaffold'
+
+type MyPluginType = Plugin<{
+  config: {
+    username: string
+  },
+  global: {},
+}>
+
+const MyPlugin: MyPluginType = {
+  setupPlugin: async (meta) => {
     
-    // Return the event to ingest, return nothing to discard  
-    return event
+  },
+  onEvent: async (event, meta) => {
+    console.log(\`Event \${event.event} has been processed!\`)
+  },
 }
 
-// /* Ran whenever the plugin VM initialises */
-// function setupPlugin (meta) {
-// 
-// }
-
-// /* Runs once every full hour */
-// function runEveryHour(meta) {
-//     const weather = await (await fetch('https://weather.example.api/?city=New+York')).json()
-//     posthog.capture('weather', { degrees: weather.deg, fahrenheit: weather.us })
-// }
+export default MyPlugin
 `
 
 const defaultConfig = [
@@ -104,12 +110,26 @@ export function PluginSource(): JSX.Element {
                         </Form.Item>
                         <Form.Item label="Source Code" name="source" required rules={[requiredRule]}>
                             <MonacoEditor
-                                language="javascript"
+                                language="typescript"
                                 theme="vs-dark"
                                 height={400}
                                 options={{
                                     minimap: { enabled: false },
                                 }}
+                                beforeMount={(monaco) => {
+                                    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+                                        `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_index} }`,
+                                        'file:///node_modules/@types/@posthog/plugin-scaffold/index.d.ts'
+                                    )
+                                    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+                                        `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_types} }`,
+                                        'file:///node_modules/@types/@posthog/plugin-scaffold/types.d.ts'
+                                    )
+                                    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+                                        `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_errors} }`,
+                                        'file:///node_modules/@types/@posthog/plugin-scaffold/errors.d.ts'
+                                    )
+                                }}
                             />
                         </Form.Item>
                         <Form.Item
diff --git a/package.json b/package.json
index 8063552554a..0417597aae3 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,9 @@
     "dependencies": {
         "@babel/core": "^7.10.4",
         "@babel/runtime": "^7.10.4",
+        "@monaco-editor/react": "^4.1.3",
         "@papercups-io/chat-widget": "^1.1.5",
-        "@posthog/plugin-scaffold": "0.2.12",
+        "@posthog/plugin-scaffold": "0.10.0",
         "@posthog/react-rrweb-player": "1.1.3-beta",
         "@posthog/rrweb": "^0.9.15-beta",
         "@posthog/simmerjs": "0.7.4",
@@ -75,7 +76,6 @@
         "react-draggable": "^4.2.0",
         "react-grid-layout": "^1.1.1",
         "react-markdown": "^5.0.3",
-        "react-monaco-editor": "^0.40.0",
         "react-redux": "^7.2.0",
         "react-resizable": "^1.11.1",
         "react-shadow": "^18.4.2",
@@ -131,9 +131,9 @@
         "less": "^3.12.2",
         "less-loader": "^7.0.2",
         "lint-staged": "~10.2.13",
-        "monaco-editor-webpack-plugin": "^2.0.0",
         "postcss-loader": "^3.0.0",
         "prettier": "^2.1.1",
+        "raw-loader": "^4.0.2",
         "sass-loader": "^10.0.1",
         "style-loader": "^2.0.0",
         "ts-node": "^9.1.1",
diff --git a/webpack.config.js b/webpack.config.js
index 935dce0a74d..1344b87b2f8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,6 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
 
 const webpackDevServerHost = process.env.WEBPACK_HOT_RELOAD_HOST || '127.0.0.1'
@@ -189,9 +188,6 @@ function createEntry(entry) {
               }
             : {}),
         plugins: [
-            new MonacoWebpackPlugin({
-                languages: ['json', 'javascript'],
-            }),
             new AntdDayjsWebpackPlugin(),
             // common plugins for all entrypoints
         ].concat(
diff --git a/yarn.lock b/yarn.lock
index 6f6a97c66aa..4f355b3fc91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1584,6 +1584,22 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.22.tgz#ae09b4744fddc74714ee9f9d6f17a66e77c43573"
   integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==
 
+"@monaco-editor/loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.0.1.tgz#7068c9b07bbc65387c0e7a4df6dac0a326155905"
+  integrity sha512-hycGOhLqLYjnD0A/FHs56covEQWnDFrSnm/qLKkB/yoeayQ7ju+Vaj4SdTojGrXeY6jhMDx59map0+Jqwquh1Q==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.1.3":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.1.3.tgz#7dcaa584f2a4e8bd8f5298604f0b5368f8ebca55"
+  integrity sha512-kqcjVuoy6btcgALAk4RV/SlasveM+WTw5lzzlyq5FhKXjF8wu5tSe/2oCQ1uhLpcdtxcHfx3L0HrcAPWnejFnQ==
+  dependencies:
+    "@monaco-editor/loader" "^1.0.1"
+    prop-types "^15.7.2"
+    state-local "^1.0.7"
+
 "@papercups-io/chat-widget@^1.1.5":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@papercups-io/chat-widget/-/chat-widget-1.1.5.tgz#294bc63370ffd6578714adef1b6ca63708491726"
@@ -1596,10 +1612,10 @@
     theme-ui "^0.3.1"
     tinycolor2 "^1.4.1"
 
-"@posthog/plugin-scaffold@0.2.12":
-  version "0.2.12"
-  resolved "https://registry.yarnpkg.com/@posthog/plugin-scaffold/-/plugin-scaffold-0.2.12.tgz#3fc54881030ad6a51549e04f1d725644a1d1e0d5"
-  integrity sha512-MhTK21NvIokMCo4MdJ4iEwjRj/vMG73ucRQtpBmBqZNd1wvy9C7HMFyHmR0uxz1RsT3SCPWuuj1HDvoJsb+QQw==
+"@posthog/plugin-scaffold@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@posthog/plugin-scaffold/-/plugin-scaffold-0.10.0.tgz#e80f57c5d3833753632607bed3ca71ebf272b12b"
+  integrity sha512-c8lNzQTBMJ0X3SCjcaD+mXZIx2thc+ptf8G4gbfT9YBFFD6TMaxs+/APMUab2aRJRbVwOsCGj9poxwuF4wxPpA==
 
 "@posthog/react-rrweb-player@1.1.3-beta":
   version "1.1.3-beta"
@@ -8022,15 +8038,6 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-mini-css-extract-plugin@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz#b4db2525af2624899ed64a23b0016e0036411893"
-  integrity sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
-
 mini-store@^3.0.1:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/mini-store/-/mini-store-3.0.6.tgz#44b86be5b2877271224ce0689b3a35a2dffb1ca9"
@@ -8107,18 +8114,6 @@ moment@^2.10.2, moment@^2.24.0, moment@^2.25.3:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-monaco-editor-webpack-plugin@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-2.0.0.tgz#196052f23678285deca7a7baf4d7aebe9d1ff9e1"
-  integrity sha512-z3nUGhnNis8eHcPepqrxyt3XwrnHD76E4KwV2ozWlBwYM6B3R5YYqzy40ECfJWqRFcwT4DhaLYaXOk5ym4MZhA==
-  dependencies:
-    loader-utils "^2.0.0"
-
-monaco-editor@*:
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.21.2.tgz#37054e63e480d51a2dd17d609dcfb192304d5605"
-  integrity sha512-jS51RLuzMaoJpYbu7F6TPuWpnWTLD4kjRW0+AZzcryvbxrTwhNy1KC9yboyKpgMTahpUbDUsuQULoo0GV1EPqg==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -9503,6 +9498,14 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc-align@^4.0.0:
   version "4.0.9"
   resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.9.tgz#46d8801c4a139ff6a65ad1674e8efceac98f85f2"
@@ -9907,14 +9910,6 @@ react-markdown@^5.0.3:
     unist-util-visit "^2.0.0"
     xtend "^4.0.1"
 
-react-monaco-editor@^0.40.0:
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.40.0.tgz#f1b021b32952cfc63a4bf2661fd20f61b2b8309f"
-  integrity sha512-IG322vOwKc/yjhn91xbqHONyAVxjv5L0YOUBU+hDwfswlglm/sGsqGhK9n1lD5d3l3kegMO/ZeZaMHC2LGgNRw==
-  dependencies:
-    monaco-editor "*"
-    prop-types "^15.7.2"
-
 react-redux@^7.2.0:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
@@ -11088,6 +11083,11 @@ stacktrace-js@^2.0.0:
     stack-generator "^2.0.5"
     stacktrace-gps "^3.0.4"
 
+state-local@^1.0.6, state-local@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -12220,7 +12220,7 @@ webpack-merge@^5.7.3:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
-webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==