diff --git a/packages/kbn-monaco/.babelrc b/packages/kbn-monaco/.babelrc
new file mode 100644
index 000000000000..7da72d177912
--- /dev/null
+++ b/packages/kbn-monaco/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@kbn/babel-preset/node_preset"]
+}
diff --git a/packages/kbn-monaco/.babelrc.browser b/packages/kbn-monaco/.babelrc.browser
new file mode 100644
index 000000000000..dc6a77bbe0bc
--- /dev/null
+++ b/packages/kbn-monaco/.babelrc.browser
@@ -0,0 +1,3 @@
+{
+  "presets": ["@kbn/babel-preset/webpack_preset"]
+}
diff --git a/packages/kbn-monaco/BUILD.bazel b/packages/kbn-monaco/BUILD.bazel
index 325187cdebc3..5f4351c89ff1 100644
--- a/packages/kbn-monaco/BUILD.bazel
+++ b/packages/kbn-monaco/BUILD.bazel
@@ -1,6 +1,7 @@
 load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
 load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler")
 
 PKG_BASE_NAME = "kbn-monaco"
 PKG_REQUIRE_NAME = "@kbn/monaco"
@@ -27,7 +28,7 @@ NPM_MODULE_EXTRA_FILES = [
   "README.md"
 ]
 
-SRC_DEPS = [
+RUNTIME_DEPS = [
   "//packages/kbn-babel-preset",
   "//packages/kbn-i18n",
   "@npm//antlr4ts",
@@ -38,15 +39,29 @@ SRC_DEPS = [
 ]
 
 TYPES_DEPS = [
+  "//packages/kbn-i18n",
+  "@npm//antlr4ts",
+  "@npm//monaco-editor",
   "@npm//@types/jest",
   "@npm//@types/node",
 ]
 
-DEPS = SRC_DEPS + TYPES_DEPS
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  config_file = ".babelrc.browser"
+)
 
 webpack(
-  name = "target_web",
-  data = DEPS + [
+  name = "target_workers",
+  data = RUNTIME_DEPS + [
     ":src",
     "webpack.config.js",
   ],
@@ -70,24 +85,24 @@ ts_config(
 )
 
 ts_project(
-  name = "tsc",
+  name = "tsc_types",
   args = ['--pretty'],
   srcs = SRCS,
-  deps = DEPS,
+  deps = TYPES_DEPS,
   declaration = True,
-  declaration_dir = "target_types",
   declaration_map = True,
-  incremental = True,
-  out_dir = "target_node",
+  emit_declaration_only = True,
+  incremental = False,
+  out_dir = "target_types",
   source_map = True,
-  root_dir = ".",
+  root_dir = "src",
   tsconfig = ":tsconfig",
 )
 
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = DEPS + [":tsc", ":target_web"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web", ":target_workers", ":tsc_types"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )
diff --git a/packages/kbn-monaco/package.json b/packages/kbn-monaco/package.json
index 4f372d8ae62d..ff2f67ec2647 100644
--- a/packages/kbn-monaco/package.json
+++ b/packages/kbn-monaco/package.json
@@ -2,8 +2,9 @@
   "name": "@kbn/monaco",
   "version": "1.0.0",
   "private": true,
-  "main": "target_node/src/index.js",
-  "types": "target_types/src/index.d.ts",
+  "browser": "target_web/index.js",
+  "main": "target_node/index.js",
+  "types": "target_types/index.d.ts",
   "license": "SSPL-1.0 OR Elastic License 2.0",
   "scripts": {
     "build:antlr4ts": "../../node_modules/antlr4ts-cli/antlr4ts ./src/painless/antlr/painless_lexer.g4 ./src/painless/antlr/painless_parser.g4 && node ./scripts/fix_generated_antlr.js"
diff --git a/packages/kbn-monaco/src/painless/lib/index.ts b/packages/kbn-monaco/src/painless/lib/index.ts
index 1a95bc617d50..402b582b7424 100644
--- a/packages/kbn-monaco/src/painless/lib/index.ts
+++ b/packages/kbn-monaco/src/painless/lib/index.ts
@@ -6,5 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { EditorStateService, EditorState } from './editor_state';
+export type { EditorState } from './editor_state';
+export { EditorStateService } from './editor_state';
 export { WorkerProxyService } from './worker_proxy';
diff --git a/packages/kbn-monaco/src/register_globals.ts b/packages/kbn-monaco/src/register_globals.ts
index c6eb68b89e71..0bfd2b58aac9 100644
--- a/packages/kbn-monaco/src/register_globals.ts
+++ b/packages/kbn-monaco/src/register_globals.ts
@@ -13,11 +13,11 @@ import { monaco } from './monaco_imports';
 import { registerLanguage } from './helpers';
 
 // @ts-ignore
-import xJsonWorkerSrc from '!!raw-loader!../../target_web/xjson.editor.worker.js';
+import xJsonWorkerSrc from '!!raw-loader!../target_workers/xjson.editor.worker.js';
 // @ts-ignore
-import defaultWorkerSrc from '!!raw-loader!../../target_web/default.editor.worker.js';
+import defaultWorkerSrc from '!!raw-loader!../target_workers/default.editor.worker.js';
 // @ts-ignore
-import painlessWorkerSrc from '!!raw-loader!../../target_web/painless.editor.worker.js';
+import painlessWorkerSrc from '!!raw-loader!../target_workers/painless.editor.worker.js';
 
 /**
  * Register languages and lexer rules
diff --git a/packages/kbn-monaco/tsconfig.json b/packages/kbn-monaco/tsconfig.json
index 3c1711833789..03b017428beb 100644
--- a/packages/kbn-monaco/tsconfig.json
+++ b/packages/kbn-monaco/tsconfig.json
@@ -1,12 +1,11 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "incremental": true,
-    "declarationDir": "./target_types",
-    "outDir": "./target_node",
+    "incremental": false,
     "declaration": true,
     "declarationMap": true,
-    "rootDir": ".",
+    "emitDeclarationOnly": true,
+    "outDir": "./target_types",
     "sourceMap": true,
     "sourceRoot": "../../../../packages/kbn-monaco/src",
     "types": [
diff --git a/packages/kbn-monaco/webpack.config.js b/packages/kbn-monaco/webpack.config.js
index ef482cd55159..d35c60b15547 100644
--- a/packages/kbn-monaco/webpack.config.js
+++ b/packages/kbn-monaco/webpack.config.js
@@ -18,7 +18,7 @@ const createLangWorkerConfig = (lang) => {
     mode: 'production',
     entry,
     output: {
-      path: path.resolve(__dirname, 'target_web'),
+      path: path.resolve(__dirname, 'target_workers'),
       filename: `${lang}.editor.worker.js`,
     },
     resolve: {