{"id":40280265,"url":"https://github.com/materiahq/ngx-monaco-editor","last_synced_at":"2026-01-20T04:02:21.720Z","repository":{"id":38325567,"uuid":"141620085","full_name":"materiahq/ngx-monaco-editor","owner":"materiahq","description":"Monaco Editor Library for Angular v6 and above","archived":false,"fork":false,"pushed_at":"2023-01-07T04:02:46.000Z","size":25694,"stargazers_count":160,"open_issues_count":50,"forks_count":33,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-13T21:37:46.338Z","etag":null,"topics":["angular","electron","materia","monaco","monaco-editor"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/materiahq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-19T19:01:38.000Z","updated_at":"2025-08-04T10:10:30.000Z","dependencies_parsed_at":"2023-02-06T11:16:43.344Z","dependency_job_id":null,"html_url":"https://github.com/materiahq/ngx-monaco-editor","commit_stats":null,"previous_names":["geoastronaute/ngx-monaco-editor"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/materiahq/ngx-monaco-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/materiahq%2Fngx-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/materiahq%2Fngx-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/materiahq%2Fngx-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/materiahq%2Fngx-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/materiahq","download_url":"https://codeload.github.com/materiahq/ngx-monaco-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/materiahq%2Fngx-monaco-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28595322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","electron","materia","monaco","monaco-editor"],"created_at":"2026-01-20T04:02:21.655Z","updated_at":"2026-01-20T04:02:21.714Z","avatar_url":"https://github.com/materiahq.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Resources\n\n- 🚀 Try it out on [Stackblitz](https://stackblitz.com/edit/materia-ngx-monaco-editor-example)\n\n- 👉 See it in action with our [live demo](https://materiahq.github.io/ngx-monaco-editor)\n\n- 📖 Api reference available [here](https://materiahq.github.io/ngx-monaco-editor/api-reference)\n\n### Angular versions\n\nThe library is currently supported by Angular v13.\n\nCheck older versions support:\n- Angular v6/v7: [v2.x](https://github.com/materiahq/ngx-monaco-editor/tree/2.0.x)\n- Angular v8: [v4.x](https://github.com/materiahq/ngx-monaco-editor/tree/4.0.x)\n- Angular v9 to v12: [5.x](https://github.com/materiahq/ngx-monaco-editor/tree/5.1.x)\n\n### Standard installation\n\nInstall from npm repository:\n```\nnpm install monaco-editor @materia-ui/ngx-monaco-editor --save\n ```\n \nAdd the glob to assets in angular.json (to make monaco-editor lib available to the app):\n```typescript\n{\n    ...\n    \"projects\": {\n      \"YOUR_APP_NAME\": {\n          ...\n          \"architect\": {\n              \"build\": {\n                ...\n                \"options\": {\n                    ...\n                    \"assets\": [\n                        { \"glob\": \"**/*\", \"input\": \"node_modules/monaco-editor\", \"output\": \"assets/monaco-editor/\" }\n                    ],\n                    ...\n                }\n                ...\n              }\n            }\n            ...\n        }\n    },\n    ...\n}\n ```\n\n### Sample\n\n\nInclude MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts): \n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n\nCreate Editor options in component.(eg: app.component.ts)\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string = 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n  originalCode: string = 'function x() { // TODO }';\n}\n```\n\n\nInclude editor component in your html with options input and ngModel bindings  (eg: app.component.html) or using ReactiveForm features.\n\n```html\n\u003cngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\"\u003e\u003c/ngx-monaco-editor\u003e\n```\n\nInclude diff-editor component in your html and use the following inputs: options, original and modified (eg: app.component.html).\n\n```html\n\u003cngx-monaco-diff-editor [options]=\"editorOptions\" [original]=\"originalCode\" [modified]=\"code\"\u003e\u003c/ngx-monaco-diff-editor\u003e\n```\n\nBoth components support all available `monaco-editor` options:\n- EditorOptions: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html,\n- DiffEditorOptions: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html.\n\n\n### Configure default monaco-editor library path\n\nYou can configure the default path used to load the monaco-editor library.\n\nIt allows you to either change the localization of your local installed library or load the library from a remote resource.\n\nExample **load monaco-editor from a CDN**:\n\n \u003e ⚠️ Warning: in this case you don't need to install monaco-editor and neither modify angular.json.\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { MonacoEditorModule, MONACO_PATH } from '@materia-ui/ngx-monaco-editor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule\n  ],\n  providers: [{\n    provide: MONACO_PATH,\n    useValue: 'https://unpkg.com/monaco-editor@0.24.0/min/vs'\n  }],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n### Access editor instance\n\nIf you need to retrieve an editor instance you can do so by using the `init` output:\n```html\n\u003cngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (init)=\"editorInit($event)\"\u003e\u003c/ngx-monaco-editor\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\n...\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n\n  editorInit(editor) {\n    // Here you can access editor instance\n     this.editor = editor;\n    }\n}\n```\n\n### Access Monaco instance\n\nIf you need to retrieve `monaco-editor` instance for advance use cases (like defining a custom theme, add custom auto-complete support, etc...), you have to wait until monaco is loaded using our `MonacoEditorLoaderService`:\n\n```typescript\nimport { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';\n...\nconstructor(private monacoLoaderService: MonacoEditorLoaderService) {\n      this.monacoLoaderService.isMonacoLoaded$.pipe(\n        filter(isLoaded =\u003e isLoaded),\n        take(1),\n      ).subscribe(() =\u003e {\n           // here, we retrieve monaco-editor instance\n           monaco.setTheme(...);\n      });\n     }\n```\n\n\n### Motivations\n\nWe wanted to use monaco-editor library with angular in our desktop application: [Materia Designer](https://getmateria.com).\n\nThe current angular libraries did not cover all of our needs, notably:\n- Works on Browser and Electron application,\n- Support flex-box container and correctly resize editor when container size changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmateriahq%2Fngx-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmateriahq%2Fngx-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmateriahq%2Fngx-monaco-editor/lists"}