diff --git a/apps/sensenet/src/components/field-controls/html-editor.tsx b/apps/sensenet/src/components/field-controls/html-editor.tsx
new file mode 100644
index 000000000..205bbcf72
--- /dev/null
+++ b/apps/sensenet/src/components/field-controls/html-editor.tsx
@@ -0,0 +1,51 @@
+/**
+ * @module FieldControls
+ */
+import { ReactClientFieldSetting, RichTextEditor as SnRichTextEditor } from '@sensenet/controls-react'
+import React, { useState } from 'react'
+import MonacoEditor from 'react-monaco-editor'
+import { useLocalization } from '../../hooks'
+
+/**
+ * Field control that represents a RichText field. Available values will be populated from the FieldSettings.
+ */
+export const HtmlEditor: React.FC<ReactClientFieldSetting> = (props) => {
+  // const localization = useLocalization()
+  const [value, setValue] = useState(props.fieldValue || '')
+
+  return (
+    <>
+      <div>Monaco Editor in sn</div>
+      <MonacoEditor
+        {...props}
+        height="400px"
+        width="100%"
+        value={value}
+        onChange={(v) => setValue(v)}
+        options={{
+          contextmenu: true,
+          hideCursorInOverviewRuler: true,
+          matchBrackets: 'always',
+          minimap: {
+            enabled: true,
+          },
+          scrollbar: {
+            horizontalSliderSize: 4,
+            verticalSliderSize: 18,
+          },
+          selectOnLineNumbers: true,
+          roundedSelection: false,
+          readOnly: false,
+          cursorStyle: 'line',
+          automaticLayout: true,
+          // automaticLayout: true,
+          // readOnly: props.settings.ReadOnly,
+          // lineNumbers: 'on',
+          // glyphMargin: false,
+          // folding: false,
+          language: 'javascript',
+        }}
+      />
+    </>
+  )
+}
diff --git a/apps/sensenet/src/components/field-controls/index.ts b/apps/sensenet/src/components/field-controls/index.ts
index c7d29394f..b2fd7daf8 100644
--- a/apps/sensenet/src/components/field-controls/index.ts
+++ b/apps/sensenet/src/components/field-controls/index.ts
@@ -6,3 +6,4 @@ export * from './rich-text-editor'
 export * from './webhook-trigger'
 export * from './webhook-headers'
 export * from './webhook-payload'
+export * from './html-editor'
diff --git a/apps/sensenet/src/components/react-control-mapper.ts b/apps/sensenet/src/components/react-control-mapper.ts
index 01072696e..4bc0e997d 100644
--- a/apps/sensenet/src/components/react-control-mapper.ts
+++ b/apps/sensenet/src/components/react-control-mapper.ts
@@ -37,6 +37,8 @@ export const reactControlMapper = (repository: Repository) => {
           return FieldControls.WebhookHeaders
         case 'sn:WebhookPayload':
           return FieldControls.WebhookPayload
+        case 'sn:HtmlEditor':
+          return SnFieldControls.HtmlEditor
         default:
       }