diff --git a/src/public/app/widgets/note_detail.ts b/src/public/app/widgets/note_detail.ts
index 962daf1be..fea37940c 100644
--- a/src/public/app/widgets/note_detail.ts
+++ b/src/public/app/widgets/note_detail.ts
@@ -35,6 +35,7 @@ import GeoMapTypeWidget from "./type_widgets/geo_map.js";
 import utils from "../services/utils.js";
 import type { NoteType } from "../entities/fnote.js";
 import type TypeWidget from "./type_widgets/type_widget.js";
+import { MermaidTypeWidget } from "./type_widgets/mermaid.js";
 
 const TPL = `
 <div class="note-detail">
@@ -72,7 +73,10 @@ const typeWidgetClasses = {
     attachmentDetail: AttachmentDetailTypeWidget,
     attachmentList: AttachmentListTypeWidget,
     mindMap: MindMapWidget,
-    geoMap: GeoMapTypeWidget
+    geoMap: GeoMapTypeWidget,
+
+    // Split type editors
+    mermaid: MermaidTypeWidget
 };
 
 /**
@@ -80,7 +84,7 @@ const typeWidgetClasses = {
  * for protected session or attachment information.
  */
 type ExtendedNoteType =
-    | Exclude<NoteType, "mermaid" | "launcher" | "text" | "code">
+    | Exclude<NoteType, "launcher" | "text" | "code">
     | "empty"
     | "readOnlyCode"
     | "readOnlyText"
@@ -230,7 +234,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             resultingType = "readOnlyCode";
         } else if (type === "text") {
             resultingType = "editableText";
-        } else if (type === "code" || type === "mermaid") {
+        } else if (type === "code") {
             resultingType = "editableCode";
         } else if (type === "launcher") {
             resultingType = "doc";
diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
new file mode 100644
index 000000000..54fec9f54
--- /dev/null
+++ b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
@@ -0,0 +1,53 @@
+import type { EventData } from "../../components/app_context.js";
+import type FNote from "../../entities/fnote.js";
+import EditableCodeTypeWidget from "./editable_code.js";
+import TypeWidget from "./type_widget.js";
+
+const TPL = `\
+<div class="note-detail-split-editor note-detail-printable">
+    <div class="note-detail-split-preview">
+    </div>
+
+    <div class="note-detail-split-editor">
+    </div>
+</div>
+`;
+
+export default class SplitTypeEditor extends TypeWidget {
+
+    private $preview!: JQuery<HTMLElement>;
+    private $editor!: JQuery<HTMLElement>;
+    private editorTypeWidget: EditableCodeTypeWidget;
+
+    constructor() {
+        super();
+        this.editorTypeWidget = new EditableCodeTypeWidget();
+        this.editorTypeWidget.isEnabled = () => true;
+    }
+
+    doRender(): void {
+        console.log("Render");
+        this.$widget = $(TPL);
+
+        this.$preview = this.$widget.find(".note-detail-split-preview");
+        this.$editor = this.$widget.find(".note-detail-split-editor");
+        this.$editor.append(this.editorTypeWidget.render());
+
+        super.doRender();
+    }
+
+    async doRefresh(note: FNote | null | undefined) {
+        await this.editorTypeWidget.initialized;
+
+        if (note) {
+            console.log("Refresh with ", note);
+            this.editorTypeWidget.noteContext = this.noteContext;
+            this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
+            this.editorTypeWidget.doRefresh(note);
+        }
+    }
+
+    getData() {
+        return this.editorTypeWidget.getData();
+    }
+}
diff --git a/src/public/app/widgets/type_widgets/mermaid.ts b/src/public/app/widgets/type_widgets/mermaid.ts
new file mode 100644
index 000000000..40099f748
--- /dev/null
+++ b/src/public/app/widgets/type_widgets/mermaid.ts
@@ -0,0 +1,9 @@
+import SplitTypeEditor from "./abstract_split_type_widget.js";
+
+export class MermaidTypeWidget extends SplitTypeEditor {
+
+    static getType() {
+        return "mermaid";
+    }
+
+}