npmpackage.info

Gathering detailed insights and metrics for ng-monaco-editor

Other packages similar to ng-monaco-editor

@ng-util/monaco-editor

20.0.3

Monaco Code Editor for Angular

@nankingcigar/ng-monaco-editor

20.0.0

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19

@1xtend/ng-monaco-editor

1.0.16

Monaco Editor for Angular 17+

ngx-monaco-tree

19.1.0

A tree view based on monaco-editor powered by VSCode.

Gathering detailed insights and metrics for ng-monaco-editor

ng-monaco-editor - 5.1.1 | npmpackage.info

ng-monaco-editor

Angular wrapper for monaco-editor.

5.1.1

MIT

TypeScript

164.47 kB

3.4

Installations

npm install ng-monaco-editor

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

16.20.2

NPM Version

8.19.4 Score

Supply Chain

92.6

Quality

84.7

Maintenance

100

Vulnerability

99.3

License

Pull Requests

Open

4

Total

80

Closed

39

Merged

37

Issues

Open

1

Total

18

Closed

17

Releases

v5.1.1

Updated on Mar 14, 2024

v5.1.0

Updated on Jun 26, 2023

v5.0.3

Updated on Apr 25, 2022

v5.0.2

Updated on Apr 25, 2022

v5.0.1

Updated on Apr 22, 2022

v5.0.0

Updated on Apr 09, 2022

View All 15 releases

Languages

TypeScript

SCSS

HTML

JavaScript

TypeScript (94.37%)

SCSS (3.39%)

HTML (1.66%)

JavaScript (0.58%)

Developer

alauda

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

29 Stars

105 Commits

5 Forks

15 Watchers

6 Branches

12 Contributors

Updated on May 17, 2024

Maintainers

View All 12 Contributors

Package Meta Information

Latest Version

5.1.1

Package Id

ng-monaco-editor@5.1.1

Unpacked Size

164.47 kB

Size

41.02 kB

File Count

NPM Version

8.19.4

Node Version

16.20.2

Published on

Mar 14, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Dependencies

tslib

Peer Dependencies

@angular/core lodash-es monaco-editor

Angular wrapper for monaco-editor

Dependencies

Angular 10+
monaco-editor: 0.15+

Demo

See: https://ng-monaco-editor.js.org or https://ng-monaco-editor.netlify.app

Setup

Add npm dependencies

1# npm
2npm i monaco-editor ng-monaco-editor
3
4# yarn
5yarn add monaco-editor ng-monaco-editor

Configure monaco-editor library assets

It's supported to load monaco-editor with AMD or ESM mode.

If you'd like to use AMD mode, you have to make sure your Angular application could have access to the monaco-editor library assets via AMD. If you are using Angular CLI to bootstrap your app, you could add the following:

1{
2  "assets": [
3    "src/favicon.ico",
4    "src/assets",
5
6    {
7      "glob": "**/*",
8      "input": "node_modules/monaco-editor/min/vs",
9      "output": "/lib/vs"
10    }
11  ]
12}

Load ng-monaco-editor module

Most of the time, you should configure the module at the root module.

1@NgModule({
2  declarations: [AppComponent],
3  imports: [
4    BrowserModule,
5    FormsModule,
6    MonacoEditorModule.forRoot({
7      /**
8       * optional, load monaco by yourself, you'd prefer loading esm for example
9       */
10      dynamicImport: () => import('monaco-editor'),
11
12      /**
13       * optional, use amd loader to load monaco if present, lower priority than `dynamicImport`
14       *
15       * Angular CLI currently does not handle assets with hashes. We manage it by manually adding
16       * version numbers to force library updates:
17       */
18      baseUrl: 'lib/v1',
19
20      defaultOptions: {},
21    }),
22  ],
23  providers: [
24    {
25      // Optional:
26      // You could also override the default MonacoEditor provider.
27      // If you plan to do so, I recommend you to read through the source code.
28      provide: MonacoProviderService,
29      useClass: CustomMonacoProviderService,
30    },
31  ],
32  bootstrap: [AppComponent],
33})
34export class AppModule {}

Usage example

Please refer to the storybook (stories/**/*.stories.ts).

This module provide three usages:

ng-monaco-editor component
ng-monaco-diff-editor component
ngCodeColorize directive

Note, if the height of ng-monaco-editor/ng-monaco-diff-editor is too small, you may have to resize it yourself. This is a limitation and by design that how monaco-editor works.

License

MIT @Alauda

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/codeql.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stories.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/stories.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stories.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/stories.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/stories.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/alauda/ng-monaco-editor/stories.yml/master?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

56 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-cx3j-qqxj-9597
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

3.4

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ng-monaco-editor

Other packages similar to ng-monaco-editor

ng-monaco-editor

Installations

Developer Guide

No

ESM

16.20.2

8.19.4

Score

Pull Requests

4

80

39

37

Issues

1

18

17

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Dependencies

Peer Dependencies

Angular wrapper for monaco-editor

Dependencies

Demo

Setup

Add npm dependencies

Configure monaco-editor library assets

Load ng-monaco-editor module

Usage example

License

10

10

10

7

2

0

0

0

0

0

0

0

3.4

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads