diff --git a/components.d.ts b/components.d.ts
index d2390aab..fd55a6f5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     'CModal.demo': typeof import('./src/ui/c-modal/c-modal.demo.vue')['default']
     CModalValue: typeof import('./src/ui/c-modal-value/c-modal-value.vue')['default']
     'CModalValue.demo': typeof import('./src/ui/c-modal-value/c-modal-value.demo.vue')['default']
+    CMonacoEditor: typeof import('./src/ui/c-monaco-editor/c-monaco-editor.vue')['default']
     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
     ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
diff --git a/package.json b/package.json
index 97629a40..0704921e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@guolao/vue-monaco-editor": "^1.4.1",
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
     "@regexper/render": "^1.0.0",
@@ -55,7 +56,7 @@
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
-    "composerize-ts": "^0.6.2",
+    "composerize": "^1.6.12",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89fdaa38..048548d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@guolao/vue-monaco-editor':
+        specifier: ^1.4.1
+        version: 1.5.4(monaco-editor@0.43.0)(vue@3.3.4)
       '@it-tools/bip39':
         specifier: ^0.0.4
         version: 0.0.4
@@ -65,9 +68,9 @@ importers:
       colord:
         specifier: ^2.9.3
         version: 2.9.3
-      composerize-ts:
-        specifier: ^0.6.2
-        version: 0.6.2
+      composerize:
+        specifier: ^1.6.12
+        version: 1.6.12
       country-code-lookup:
         specifier: ^0.1.0
         version: 0.1.0
@@ -1340,6 +1343,16 @@ packages:
     resolution: {integrity: sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==}
     engines: {node: '>=6'}
 
+  '@guolao/vue-monaco-editor@1.5.4':
+    resolution: {integrity: sha512-eyBAqxJeDpV4mZYZSpNvh3xUgKCld5eEe0dBtjJhsy2+L0MB6PYFZ/FbPHNwskgp2RoIpfn1DLrIhXXE3lVbwQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      monaco-editor: '>=0.43.0'
+      vue: ^2.6.14 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@humanwhocodes/config-array@0.11.10':
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}
@@ -1517,6 +1530,11 @@ packages:
   '@mdit-vue/types@0.12.0':
     resolution: {integrity: sha512-mrC4y8n88BYvgcgzq9bvTlDgFyi2zuvzmPilRvRc3Uz1iIvq8mDhxJ0rHKFUNzPEScpDvJdIujqiDrulMqiudA==}
 
+  '@monaco-editor/loader@1.4.0':
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -2420,6 +2438,11 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
 
+  ajv-errors@3.0.0:
+    resolution: {integrity: sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==}
+    peerDependencies:
+      ajv: ^8.0.1
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -2729,10 +2752,6 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
-  commander@10.0.0:
-    resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
-    engines: {node: '>=14'}
-
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -2747,10 +2766,13 @@ packages:
   complex.js@2.1.1:
     resolution: {integrity: sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==}
 
-  composerize-ts@0.6.2:
-    resolution: {integrity: sha512-8tw5p/FBxg77ubjVftaXA+pknWbkUgbZ4rbZZs2yFUsj2yvO38IvtfpGLfaJ9mGFj324lFEr/OU9xULrKSF9Ag==}
+  composerize@1.6.12:
+    resolution: {integrity: sha512-kPIEgkU2TRT1t4ZrBPUmmRr7RGA0E5JYx0rAgpWBRWNjZRDr2FV/8ne8S8iLp7oaqEX1ubDqZPEQvHaDM9d7cg==}
     hasBin: true
 
+  composeverter@1.7.2:
+    resolution: {integrity: sha512-gRSCkSU8wJQvmTHQ23wBd2gCdUsns95k3lL7YszZBu5EyA3eac46mI7nVgvk1pZTM0mOmj/E5yurtdYkuVNZRA==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
@@ -2785,6 +2807,10 @@ packages:
   core-js-compat@3.33.2:
     resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -2911,10 +2937,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deepmerge-ts@5.1.0:
-    resolution: {integrity: sha512-eS8dRJOckyo9maw9Tu5O5RUi/4inFLrnoLkBe3cPfDMx3WZioXtmOew4TXQaxq7Rhl4xjDtR7c6x8nNTxOvbFw==}
-    engines: {node: '>=16.0.0'}
-
   deepmerge@2.2.1:
     resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
     engines: {node: '>=0.10.0'}
@@ -3372,9 +3394,6 @@ packages:
   flatted@3.2.7:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
 
-  flex-js@1.0.5:
-    resolution: {integrity: sha512-Z5uoLzOGtTB/nzaTVVBbwmxOHBzHovAGJHLXE1TUKsQuN1RRWMOWeA08J9RRKtAl9TH9tkaH6fpjA4sLf0DzQw==}
-
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -3699,13 +3718,8 @@ packages:
     resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
     engines: {node: '>= 0.4'}
 
-  ip-address@7.1.0:
-    resolution: {integrity: sha512-V9pWC/VJf2lsXqP7IWJ+pe3P1/HCYGBMZrrnT62niLGjAfCbeiwXMUxaeHvnVlz19O27pvXP4azs+Pj/A0x+SQ==}
-    engines: {node: '>= 10'}
-
-  ip-cidr@3.1.0:
-    resolution: {integrity: sha512-HUCn4snshEX1P8cja/IyU3qk8FVDW8T5zZcegDFbu4w7NojmAhk5NcOgj3M8+0fmumo1afJTPDtJlzsxLdOjtg==}
-    engines: {node: '>=10.0.0'}
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
   is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
@@ -3819,10 +3833,6 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  is-primitive@3.0.1:
-    resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
-    engines: {node: '>=0.10.0'}
-
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
@@ -3928,9 +3938,6 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsbn@1.1.0:
-    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
-
   jsdom@22.0.0:
     resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
     engines: {node: '>=16'}
@@ -4091,6 +4098,10 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   loupe@2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
 
@@ -4958,10 +4969,6 @@ packages:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
     engines: {node: '>= 0.4'}
 
-  set-value@4.1.0:
-    resolution: {integrity: sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==}
-    engines: {node: '>=11.0'}
-
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -5048,9 +5055,6 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
-  sprintf-js@1.1.2:
-    resolution: {integrity: sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==}
-
   sql-formatter@13.0.0:
     resolution: {integrity: sha512-V21cVvge4rhn9Fa7K/fTKcmPM+x1yee6Vhq8ZwgaWh3VPBqApgsaoFB5kLAhiqRo5AmSaRyLU7LIdgnNwH01/w==}
     hasBin: true
@@ -5058,6 +5062,9 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   std-env@3.3.3:
     resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
 
@@ -5872,13 +5879,16 @@ packages:
     resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.2.1:
     resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
     engines: {node: '>= 14'}
 
-  yamljs@0.3.0:
-    resolution: {integrity: sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==}
-    hasBin: true
+  yargs-parser@13.1.2:
+    resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
 
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
@@ -7078,6 +7088,13 @@ snapshots:
     dependencies:
       '@fortawesome/fontawesome-common-types': 6.6.0
 
+  '@guolao/vue-monaco-editor@1.5.4(monaco-editor@0.43.0)(vue@3.3.4)':
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.43.0)
+      monaco-editor: 0.43.0
+      vue: 3.3.4
+      vue-demi: 0.14.10(vue@3.3.4)
+
   '@humanwhocodes/config-array@0.11.10':
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
@@ -7318,6 +7335,11 @@ snapshots:
 
   '@mdit-vue/types@0.12.0': {}
 
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.43.0)':
+    dependencies:
+      monaco-editor: 0.43.0
+      state-local: 1.0.7
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -8480,6 +8502,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ajv-errors@3.0.0(ajv@8.17.1):
+    dependencies:
+      ajv: 8.17.1
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -8840,8 +8866,6 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
-  commander@10.0.0: {}
-
   commander@2.20.3: {}
 
   commander@7.2.0: {}
@@ -8850,14 +8874,21 @@ snapshots:
 
   complex.js@2.1.1: {}
 
-  composerize-ts@0.6.2:
+  composerize@1.6.12:
     dependencies:
-      commander: 10.0.0
-      deepmerge-ts: 5.1.0
-      flex-js: 1.0.5
-      ip-cidr: 3.1.0
-      set-value: 4.1.0
-      yamljs: 0.3.0
+      composeverter: 1.7.2
+      core-js: 2.6.12
+      deepmerge: 2.2.1
+      invariant: 2.2.4
+      yaml: 1.10.2
+      yargs-parser: 13.1.2
+
+  composeverter@1.7.2:
+    dependencies:
+      ajv: 8.17.1
+      ajv-errors: 3.0.0(ajv@8.17.1)
+      core-js: 2.6.12
+      yaml: 1.10.2
 
   concat-map@0.0.1: {}
 
@@ -8896,6 +8927,8 @@ snapshots:
     dependencies:
       browserslist: 4.22.1
 
+  core-js@2.6.12: {}
+
   core-util-is@1.0.3: {}
 
   country-code-lookup@0.1.0: {}
@@ -9000,8 +9033,6 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deepmerge-ts@5.1.0: {}
-
   deepmerge@2.2.1: {}
 
   deepmerge@4.3.1: {}
@@ -9582,8 +9613,6 @@ snapshots:
 
   flatted@3.2.7: {}
 
-  flex-js@1.0.5: {}
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -9926,15 +9955,9 @@ snapshots:
       hasown: 2.0.0
       side-channel: 1.0.4
 
-  ip-address@7.1.0:
-    dependencies:
-      jsbn: 1.1.0
-      sprintf-js: 1.1.2
-
-  ip-cidr@3.1.0:
+  invariant@2.2.4:
     dependencies:
-      ip-address: 7.1.0
-      jsbn: 1.1.0
+      loose-envify: 1.4.0
 
   is-alphabetical@1.0.4: {}
 
@@ -10030,8 +10053,6 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  is-primitive@3.0.1: {}
-
   is-reference@3.0.2:
     dependencies:
       '@types/estree': 1.0.6
@@ -10128,8 +10149,6 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsbn@1.1.0: {}
-
   jsdom@22.0.0(canvas@2.11.2):
     dependencies:
       abab: 2.0.6
@@ -10298,6 +10317,10 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   loupe@2.3.6:
     dependencies:
       get-func-name: 2.0.0
@@ -11257,11 +11280,6 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.1
 
-  set-value@4.1.0:
-    dependencies:
-      is-plain-object: 2.0.4
-      is-primitive: 3.0.1
-
   setimmediate@1.0.5: {}
 
   shebang-command@2.0.0:
@@ -11348,8 +11366,6 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  sprintf-js@1.1.2: {}
-
   sql-formatter@13.0.0:
     dependencies:
       argparse: 2.0.1
@@ -11358,6 +11374,8 @@ snapshots:
 
   stackback@0.0.2: {}
 
+  state-local@1.0.7: {}
+
   std-env@3.3.3: {}
 
   stream-combiner@0.0.4:
@@ -12357,12 +12375,14 @@ snapshots:
       lodash: 4.17.21
       yaml: 2.2.1
 
+  yaml@1.10.2: {}
+
   yaml@2.2.1: {}
 
-  yamljs@0.3.0:
+  yargs-parser@13.1.2:
     dependencies:
-      argparse: 1.0.10
-      glob: 7.2.3
+      camelcase: 5.3.1
+      decamelize: 1.2.0
 
   yargs-parser@18.1.3:
     dependencies:
diff --git a/src/main.ts b/src/main.ts
index 19d28bf2..405f740f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,9 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
 
+import { install as VueMonacoEditorPlugin, loader } from '@guolao/vue-monaco-editor';
+import * as monaco from 'monaco-editor';
+
 import { registerSW } from 'virtual:pwa-register';
 import shadow from 'vue-shadow-dom';
 import { plausible } from './plugins/plausible.plugin';
@@ -14,10 +17,14 @@ import App from './App.vue';
 import router from './router';
 import { i18nPlugin } from './plugins/i18n.plugin';
 
+// loaded monaco-editor from `node_modules`
+loader.config({ monaco });
+
 registerSW();
 
 const app = createApp(App);
 
+app.use(VueMonacoEditorPlugin);
 app.use(createPinia());
 app.use(createHead());
 app.use(i18nPlugin);
diff --git a/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts b/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts
index aab47a24..1fcd2891 100644
--- a/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/composerize.d.ts
@@ -1,4 +1,4 @@
 declare module 'composerize' {
-  const composerize: (arg: string) => string;
+  const composerize: (commands: string, existingDockerComposeFile?: string, conversion?: string, indent?: number) => string;
   export default composerize;
 }
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index c5591eeb..bfe60d6c 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -1,48 +1,94 @@
 <script setup lang="ts">
-import { MessageType, composerize } from 'composerize-ts';
-import { withDefaultOnError } from '@/utils/defaults';
+import composerize from 'composerize';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { textToBase64 } from '@/utils/base64';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
-const dockerRun = ref(
+const dockerRuns = ref(
   'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
 );
+const indentSize = useStorage('docker-run-to-compose:indent-size', 4);
 
-const conversionResult = computed(() =>
-  withDefaultOnError(() => composerize(dockerRun.value.trim()), { yaml: '', messages: [] }),
+const existingDockerComposeFile = ref(
+  '',
 );
+const format = useStorage('docker-run-to-compose:format', 'latest');
+const formatOptions = [
+  { value: 'v2x', label: 'V2 - 2.x' },
+  { value: 'v3x', label: 'V2 - 3.x' },
+  { value: 'latest', label: 'CommonSpec' },
+];
+
+const conversionResult = computed(() => {
+  try {
+    return { yaml: composerize(dockerRuns.value.trim(), existingDockerComposeFile.value, format.value, indentSize.value), errors: [] };
+  }
+  catch (e: any) {
+    return { yaml: '#see error messages', errors: e.toString().split('\n') };
+  }
+});
+
 const dockerCompose = computed(() => conversionResult.value.yaml);
-const notImplemented = computed(() =>
-  conversionResult.value.messages.filter(msg => msg.type === MessageType.notImplemented).map(msg => msg.value),
-);
-const notComposable = computed(() =>
-  conversionResult.value.messages.filter(msg => msg.type === MessageType.notTranslatable).map(msg => msg.value),
-);
-const errors = computed(() =>
-  conversionResult.value.messages
-    .filter(msg => msg.type === MessageType.errorDuringConversion)
-    .map(msg => msg.value),
-);
+const errors = computed(() => conversionResult.value.errors);
+
 const dockerComposeBase64 = computed(() => `data:application/yaml;base64,${textToBase64(dockerCompose.value)}`);
 const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  formatOnType: true,
+  formatOnPaste: true,
+};
 </script>
 
 <template>
   <div>
     <c-input-text
-      v-model:value="dockerRun"
-      label="Your docker run command:"
+      v-model:value="dockerRuns"
+      label="Your docker run command(s):"
       style="font-family: monospace"
       multiline
       raw-text
       monospace
-      placeholder="Your docker run command to convert..."
-      rows="3"
+      placeholder="Your docker run command(s) to convert..."
+      rows="4"
     />
 
     <n-divider />
 
+    <c-label label="Eventually, paste your existing Docker Compose:">
+      <div relative w-full>
+        <c-monaco-editor
+          v-model:value="existingDockerComposeFile"
+          theme="vs-dark"
+          language="yaml"
+          height="100px"
+          :options="MONACO_EDITOR_OPTIONS"
+        />
+      </div>
+    </c-label>
+
+    <n-divider />
+
+    <n-grid cols="4" x-gap="12" w-full>
+      <n-gi span="2">
+        <c-select
+          v-model:value="format"
+          label-position="top"
+          label="Docker Compose format:"
+          :options="formatOptions"
+          placeholder="Select Docker Compose format"
+        />
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item label="Indent size:" label-placement="top" label-width="100" :show-feedback="false">
+          <n-input-number v-model:value="indentSize" min="0" max="10" w-100px />
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+
+    <n-divider />
+
     <TextareaCopyable :value="dockerCompose" language="yaml" />
 
     <div mt-5 flex justify-center>
@@ -51,30 +97,6 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
       </c-button>
     </div>
 
-    <div v-if="notComposable.length > 0">
-      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
-        <ul>
-          <li v-for="(message, index) of notComposable" :key="index">
-            {{ message }}
-          </li>
-        </ul>
-      </n-alert>
-    </div>
-
-    <div v-if="notImplemented.length > 0">
-      <n-alert
-        title="This options are not yet implemented and therefore haven't been translated to docker-compose"
-        type="warning"
-        mt-5
-      >
-        <ul>
-          <li v-for="(message, index) of notImplemented" :key="index">
-            {{ message }}
-          </li>
-        </ul>
-      </n-alert>
-    </div>
-
     <div v-if="errors.length > 0">
       <n-alert title="The following errors occured" type="error" mt-5>
         <ul>
diff --git a/src/ui/c-monaco-editor/c-monaco-editor.vue b/src/ui/c-monaco-editor/c-monaco-editor.vue
new file mode 100644
index 00000000..e3b53437
--- /dev/null
+++ b/src/ui/c-monaco-editor/c-monaco-editor.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import * as monacoEditor from 'monaco-editor';
+import type { MonacoEditor } from '@guolao/vue-monaco-editor';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { useStyleStore } from '@/stores/style.store';
+
+const props = withDefaults(defineProps<EditorProps>(), {
+  theme: 'vs',
+  options: () => ({}),
+  overrideServices: () => ({}),
+  saveViewState: true,
+  width: '100%',
+  height: '100%',
+});
+
+const emits = defineEmits<{
+  (e: 'update:value', value: string | undefined): void
+  (e: 'beforeMount', monaco: MonacoEditor): void
+  (e: 'mount', editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: MonacoEditor): void
+  (e: 'change', value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent): void
+  (e: 'validate', markers: monacoEditor.editor.IMarker[]): void
+}>();
+
+interface MonacoEnvironment {
+  getWorker(_: any, label: string): Worker
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare module globalThis {
+  let MonacoEnvironment: MonacoEnvironment;
+}
+
+const value = useVModel(props, 'value', emits);
+
+globalThis.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new JsonWorker();
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new CssWorker();
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new HtmlWorker();
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new TsWorker();
+    }
+    return new EditorWorker();
+  },
+};
+
+export interface EditorProps {
+  defaultValue?: string
+  defaultPath?: string
+  defaultLanguage?: string
+  value?: string
+  language?: string
+  path?: string
+
+  /* === */
+
+  theme: 'vs' | string
+  line?: number
+  options?: monacoEditor.editor.IStandaloneEditorConstructionOptions
+  overrideServices?: monacoEditor.editor.IEditorOverrideServices
+  saveViewState?: boolean
+
+  /* === */
+
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+monacoEditor.editor.defineTheme('it-tools-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+monacoEditor.editor.defineTheme('it-tools-light', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+const styleStore = useStyleStore();
+
+watch(
+  () => styleStore.isDarkTheme,
+  isDarkTheme => monacoEditor.editor.setTheme(isDarkTheme ? 'it-tools-dark' : 'it-tools-light'),
+  { immediate: true },
+);
+
+const attrs = useAttrs();
+const inheritedAttrs = { ...attrs, ...props };
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <vue-monaco-editor
+    v-bind="inheritedAttrs"
+    v-model:value="value"
+    @before-mount="(monaco: MonacoEditor) => emits('beforeMount', monaco)"
+    @mount="(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: MonacoEditor) => emits('mount', editor, monaco)"
+    @change="(value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent) => emits('change', value, event)"
+    @validate="(markers: monacoEditor.editor.IMarker[]) => emits('validate', markers)"
+  />
+</template>