diff --git a/addon/chrome/content/templateEditor.xhtml b/addon/chrome/content/templateEditor.xhtml
index 45f4854..5e01c34 100644
--- a/addon/chrome/content/templateEditor.xhtml
+++ b/addon/chrome/content/templateEditor.xhtml
@@ -122,10 +122,12 @@
           <input id="editor-name" type="text" style="width: 100%" />
         </div>
         <div style="display: flex; flex-direction: column; height: 100%">
-          <textarea
-            id="editor-textbox"
-            style="height: 100%; resize: none"
-          ></textarea>
+          <iframe
+            id="editor"
+            src="chrome://scaffold/content/monaco/monaco.html"
+            style="width: 100%; height: 100%; border: none"
+            onmousedown="this.focus()"
+          ></iframe>
         </div>
       </div>
       <div class="viewport preview-viewport">
@@ -153,7 +155,10 @@
         wantdropmarker="true"
       >
         <menupopup>
-          <menuitem id="importClipboard" data-l10n-id="importClipboard"></menuitem>
+          <menuitem
+            id="importClipboard"
+            data-l10n-id="importClipboard"
+          ></menuitem>
           <menuitem id="importNote" data-l10n-id="importNote"></menuitem>
           <menuseparator />
           <menuitem id="share" data-l10n-id="share"></menuitem>
diff --git a/package.json b/package.json
index cfe3929..e95f50b 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "hast-util-to-text": "^3.1.2",
     "hastscript": "^7.2.0",
     "html-docx-js-typescript": "^0.1.5",
-    "katex": "^0.16.7",
+    "katex": "^0.16.8",
     "rehype-format": "^4.0.1",
     "rehype-parse": "^8.0.4",
     "rehype-remark": "^9.1.2",
@@ -66,32 +66,32 @@
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.1",
     "yamljs": "^0.3.0",
-    "zotero-plugin-toolkit": "^2.1.7"
+    "zotero-plugin-toolkit": "^2.2.4"
   },
   "devDependencies": {
-    "@prettier/plugin-xml": "^3.1.1",
+    "@prettier/plugin-xml": "^3.2.0",
     "@types/browser-or-node": "^1.3.0",
     "@types/diff": "^5.0.3",
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.4.9",
     "@types/seedrandom": "^3.0.5",
     "@types/yamljs": "^0.2.31",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "chokidar-cli": "^3.0.0",
-    "compressing": "^1.9.0",
+    "compressing": "^1.9.1",
     "concurrently": "^8.2.0",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.18.1",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "prettier": "^3.0.0",
-    "prosemirror-model": "^1.19.2",
+    "esbuild": "^0.18.20",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.10.0",
+    "prettier": "^3.0.1",
+    "prosemirror-model": "^1.19.3",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.7.3",
-    "prosemirror-view": "^1.31.4",
-    "release-it": "^16.1.3",
+    "prosemirror-transform": "^1.7.4",
+    "prosemirror-view": "^1.31.7",
+    "release-it": "^16.1.4",
     "replace-in-file": "^7.0.1",
-    "typescript": "^5.1.3",
-    "zotero-types": "^1.0.15"
+    "typescript": "^5.1.6",
+    "zotero-types": "^1.2.1"
   }
 }
diff --git a/src/addon.ts b/src/addon.ts
index 9e0081c..eee9198 100644
--- a/src/addon.ts
+++ b/src/addon.ts
@@ -89,6 +89,7 @@ class Addon {
     templateEditor: {
       window?: Window;
       tableHelper?: VirtualizedTableHelper;
+      editor?: any;
       templates: { name: string }[];
     };
     templatePicker: {
diff --git a/src/modules/template/editorWindow.ts b/src/modules/template/editorWindow.ts
index 7fac639..67b04da 100644
--- a/src/modules/template/editorWindow.ts
+++ b/src/modules/template/editorWindow.ts
@@ -3,6 +3,7 @@ import { config } from "../../../package.json";
 import { showHint } from "../../utils/hint";
 import { itemPicker } from "../../utils/itemPicker";
 import { getString } from "../../utils/locale";
+import { waitUtilAsync } from "../../utils/wait";
 
 export async function showTemplateEditor() {
   if (
@@ -13,7 +14,6 @@ export async function showTemplateEditor() {
     const windowArgs = {
       _initPromise: Zotero.Promise.defer(),
     };
-    // @ts-ignore
     const _window = window.openDialog(
       `chrome://${config.addonRef}/content/templateEditor.xhtml`,
       `${config.addonRef}-templateEditor`,
@@ -128,8 +128,16 @@ export async function showTemplateEditor() {
       ?.addEventListener("click", (ev) => {
         restoreTemplates(_window);
       });
+    addon.data.templateEditor.window?.focus();
+    const editorWin = (_window.document.querySelector("#editor") as any)
+      .contentWindow;
+    await waitUtilAsync(() => editorWin?.loadMonaco);
+    const { monaco, editor } = await editorWin.loadMonaco({
+      language: "javascript",
+      theme: "vs-light",
+    });
+    addon.data.templateEditor.editor = editor;
   }
-  addon.data.templateEditor.window?.focus();
 }
 
 async function refresh() {
@@ -154,9 +162,9 @@ function updateEditor() {
   const header = addon.data.templateEditor.window?.document.getElementById(
     "editor-name",
   ) as HTMLInputElement;
-  const text = addon.data.templateEditor.window?.document.getElementById(
-    "editor-textbox",
-  ) as HTMLTextAreaElement;
+  const editor = addon.data.templateEditor.window?.document.getElementById(
+    "editor",
+  ) as HTMLIFrameElement;
   const saveTemplate =
     addon.data.templateEditor.window?.document.getElementById(
       "save",
@@ -172,8 +180,7 @@ function updateEditor() {
   if (!name) {
     header.value = "";
     header.setAttribute("disabled", "true");
-    text.value = "";
-    text.setAttribute("disabled", "true");
+    editor.hidden = true;
     saveTemplate.setAttribute("disabled", "true");
     deleteTemplate.setAttribute("disabled", "true");
     deleteTemplate.hidden = false;
@@ -190,8 +197,8 @@ function updateEditor() {
       deleteTemplate.hidden = true;
       resetTemplate.hidden = false;
     }
-    text.value = templateText;
-    text.removeAttribute("disabled");
+    addon.data.templateEditor.editor.setValue(templateText);
+    editor.hidden = false;
     saveTemplate.removeAttribute("disabled");
     deleteTemplate.removeAttribute("disabled");
   }
@@ -258,9 +265,6 @@ function saveSelectedTemplate() {
   const header = addon.data.templateEditor.window?.document.getElementById(
     "editor-name",
   ) as HTMLInputElement;
-  const text = addon.data.templateEditor.window?.document.getElementById(
-    "editor-textbox",
-  ) as HTMLTextAreaElement;
 
   if (
     addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name) &&
@@ -274,7 +278,7 @@ function saveSelectedTemplate() {
 
   const template = {
     name: header.value,
-    text: text.value,
+    text: addon.data.templateEditor.editor.getValue(),
   };
   addon.api.template.setTemplate(template);
   if (name !== template.name) {
@@ -303,12 +307,10 @@ function deleteSelectedTemplate() {
 function resetSelectedTemplate() {
   const name = getSelectedTemplateName();
   if (addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name)) {
-    const text = addon.data.templateEditor.window?.document.getElementById(
-      "editor-textbox",
-    ) as HTMLTextAreaElement;
-    text.value =
+    addon.data.templateEditor.editor.setValue(
       addon.api.template.DEFAULT_TEMPLATES.find((t) => t.name === name)?.text ||
-      "";
+        "",
+    );
     showHint(`Template ${name} is reset. Please save before leaving.`);
   }
 }