diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
new file mode 100644
index 0000000..4db3d9b
--- /dev/null
+++ b/app/components/monaco-editor.hbs
@@ -0,0 +1 @@
+<div {{did-insert this.initEditor}} class="h-80" ...attributes></div>
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
new file mode 100644
index 0000000..42a9481
--- /dev/null
+++ b/app/components/monaco-editor.js
@@ -0,0 +1,37 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import * as monaco from 'monaco-editor';
+
+window.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'editorWorkerService') {
+      return new Worker(
+        new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
+      );
+    } else if (label === 'json') {
+      return new Worker(
+        new URL(
+          'monaco-editor/esm/vs/language/json/json.worker',
+          import.meta.url
+        )
+      );
+    }
+  },
+};
+
+export default class MonacoEditorComponent extends Component {
+  @action
+  initEditor(el) {
+    this.editor = monaco.editor.create(el, {
+      value: this.args.value,
+      language: this.args.language,
+      // scrollBeyondLastLine: false,
+      // wordWrap: 'on',
+      // wrappingStrategy: 'advanced',
+      minimap: {
+        enabled: false,
+      },
+      // overviewRulerLanes: 0,
+    });
+  }
+}
diff --git a/app/templates/admin/indexes/item/documents/document/edit.hbs b/app/templates/admin/indexes/item/documents/document/edit.hbs
index 905efe1..efa3922 100644
--- a/app/templates/admin/indexes/item/documents/document/edit.hbs
+++ b/app/templates/admin/indexes/item/documents/document/edit.hbs
@@ -1,5 +1,5 @@
 <form {{on 'submit' this.save}}>
-  <Form::Textarea @name='document' @value={{stringify @model.document}} />
+  <MonacoEditor @value={{stringify @model.document}} @language='json'/>
 
   <Button type='submit' @text='Save' @style='primary' />
 </form>
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 098aa48..aff5569 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -42,6 +42,7 @@ module.exports = function (defaults) {
       webpackConfig: {
         module: {
           rules: [
+            { test: /\.ttf$/, type: 'asset/resource' },
             {
               // When webpack sees an import for a CSS files
               test: /\.css$/i,
diff --git a/package.json b/package.json
index 40f5d90..95efc8e 100644
--- a/package.json
+++ b/package.json
@@ -86,8 +86,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.1",
+    "file-loader": "^6.2.0",
     "loader.js": "^4.7.0",
     "meilisearch": "^0.25.0",
+    "monaco-editor": "^0.34.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
diff --git a/tests/integration/components/monaco-editor-test.js b/tests/integration/components/monaco-editor-test.js
new file mode 100644
index 0000000..d12181c
--- /dev/null
+++ b/tests/integration/components/monaco-editor-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | monaco-editor', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<MonacoEditor />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <MonacoEditor>
+        template block text
+      </MonacoEditor>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index aaa7794..ae10d79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7256,6 +7256,14 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -9071,7 +9079,7 @@ loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
   integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@@ -9731,6 +9739,18 @@ mktemp@~0.4.0:
   resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
   integrity sha512-IXnMcJ6ZyTuhRmJSjzvHSRhlVPiN9Jwc6e59V0bEJ0ba6OBeX2L0E+mRN1QseeOF4mM+F1Rit6Nh7o+rl2Yn/A==
 
+monaco-editor-webpack-plugin@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
+monaco-editor@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0.tgz#b1749870a1f795dbfc4dc03d8e9b646ddcbeefa7"
+  integrity sha512-VF+S5zG8wxfinLKLrWcl4WUizMx+LeJrG4PM/M78OhcwocpV0jiyhX/pG6Q9jIOhrb/ckYi6nHnaR5OojlOZCQ==
+
 morgan@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"