npmpackage.info

Gathering detailed insights and metrics for @typefox/monaco-editor-react

@typefox/monaco-editor-react - 6.9.0 | npmpackage.info

@typefox/monaco-editor-react

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples

6.9.0

1,220

MIT

TypeScript

28.06 kB

4.6

Installations

npm install @typefox/monaco-editor-react

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=20.10.0

Node Version

22.16.0

NPM Version

10.9.2 Pull Requests

Open

4

Total

274

Closed

56

Merged

214

Issues

Open

34

Total

535

Closed

501

Releases

Unable to fetch releases

Languages

TypeScript

HTML

JavaScript

Shell

Dockerfile

CSS

PowerShell

Python

C++

Java

SCSS

TypeScript (89.08%)

HTML (7.26%)

JavaScript (1.39%)

Shell (0.97%)

Dockerfile (0.69%)

CSS (0.34%)

PowerShell (0.13%)

Python (0.08%)

C++ (0.05%)

Java (0.02%)

Developer

TypeFox

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,220 Stars

1,052 Commits

203 Forks

18 Watchers

25 Branches

59 Contributors

Updated on Jul 10, 2025

Maintainers

View All 59 Contributors

Package Meta Information

Latest Version

6.9.0

Package Id

@typefox/monaco-editor-react@6.9.0

Unpacked Size

28.06 kB

Size

7.49 kB

File Count

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jun 24, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@codingame/monaco-vscode-editor-api monaco-editor-wrapper react

React component for Monaco-Editor and Monaco Languageclient

This packages provides a React component that it based on the monaco-editor-wrapper. It behaves nearly the same way as the monaco editor, with the primary difference being that you interact with it through a React component.

The monaco-languageclient can be activated to connect to a language server either via jsonrpc over a websocket to an exernal server process, or via the Language Server Protocol for the browser where the language server runs in a web worker.

CHANGELOG

All changes are noted in the CHANGELOG.

Getting Started

This is npm package is part of the monaco-languageclient mono repo. Please follow the main repositories instructions to get started with local development.

Usage

You can import the monaco react component for easy use in an existing React project. Below you can see a quick example of a fully functional implementation in TypeScript. The react component uses the same UserConfig approach which is then applied to monaco-editor-wrapper.

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import '@codingame/monaco-vscode-python-default-extension';
4import { WrapperConfig } from 'monaco-editor-wrapper';
5import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
6import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
7
8const wrapperConfig: WrapperConfig = {
9  $type: 'extended',
10  htmlContainer: document.getElementById('monaco-editor-root')!,
11  editorAppConfig: {
12    codeResources: {
13      modified: {
14              uri: '/workspace/hello.py',
15              text: 'print("Hello, World!")'
16      }
17    },
18    monacoWorkerFactory: configureDefaultWorkerFactory
19  }
20};
21
22const comp = <MonacoEditorReactComp
23    wrapperConfig={wrapperConfig}
24    style={{ 'height': '100%' }}
25    onLoad={(wrapper: MonacoEditorLanguageClientWrapper) => {
26        // use the wrapper to get access to monaco-editor or the languageclient
27    }}
28/>;
29ReactDOM.createRoot(document.getElementById('react-root')!).render(comp);
30

Examples

For a detailed list of examples please look at this section in the main repository.

License

MIT

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

4

Code-Review

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

1

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 1

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/debugger-py.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/debugger-py.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/debugger-py.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/debugger-py.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/debugger-py.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/debugger-py.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/debugger-py.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/debugger-py.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/debugger-py.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/debugger-py.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ghp.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ghp.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ghp.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ghp.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ghp.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ghp.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ghp.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-clangd.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-clangd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-eclipsejdt.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-eclipsejdt.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-eclipsejdt.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-eclipsejdt.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-eclipsejdt.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-eclipsejdt.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-eclipsejdt.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-eclipsejdt.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-eclipsejdt.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-eclipsejdt.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-groovy.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-groovy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-groovy.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-groovy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-groovy.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-groovy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ls-groovy.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-groovy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ls-groovy.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/ls-groovy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/peer.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/peer.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/peer.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/peer.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/peer.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/peer.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/verify.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/verify.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/TypeFox/monaco-languageclient/verify.yml/main?enable=pin
Warn: containerImage not pinned by hash: packages/examples/resources/clangd/build.Dockerfile:1: pin your Docker image by updating ghcr.io/typefox/monaco-languageclient/clangd-wasm-configure:latest to ghcr.io/typefox/monaco-languageclient/clangd-wasm-configure:latest@sha256:6faa54b0b7ed7294a334c52d029756c7ac4a501f9145913d9ce3f691090a3703
Warn: containerImage not pinned by hash: packages/examples/resources/clangd/configure.Dockerfile:1: pin your Docker image by updating ubuntu to ubuntu@sha256:440dcf6a5640b2ae5c77724e68787a906afb8ddee98bf86db94eea8528c2c076
Warn: containerImage not pinned by hash: packages/examples/resources/debugger/Dockerfile:1: pin your Docker image by updating ghcr.io/graalvm/graalpy-community:24 to ghcr.io/graalvm/graalpy-community:24@sha256:20c69e30e12ba080b9023016c842d2e4802f5335c9c9209667a8e58b808ca9be
Warn: containerImage not pinned by hash: packages/examples/resources/eclipse.jdt.ls/Dockerfile:1: pin your Docker image by updating eclipse-temurin:17-jdk to eclipse-temurin:17-jdk@sha256:4a96f828a87372063eb90e70334493677f6b4f1fb40ca18c4ecc2b25380fb87f
Warn: containerImage not pinned by hash: packages/examples/resources/groovy/Dockerfile:1: pin your Docker image by updating gradle:7-jdk17-focal to gradle:7-jdk17-focal@sha256:8515e3aa7efce75e26165edc723fc54ab025f5257387ddf6ff2bc77e1e1540c5
Warn: downloadThenRun not pinned by hash: packages/examples/resources/clangd/configure.Dockerfile:7
Warn: downloadThenRun not pinned by hash: packages/examples/resources/debugger/Dockerfile:3
Warn: downloadThenRun not pinned by hash: packages/examples/resources/eclipse.jdt.ls/Dockerfile:12
Warn: npmCommand not pinned by hash: packages/examples/resources/eclipse.jdt.ls/Dockerfile:24-26
Warn: downloadThenRun not pinned by hash: packages/examples/resources/groovy/Dockerfile:12
Warn: npmCommand not pinned by hash: packages/examples/resources/groovy/Dockerfile:32-34
Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 22 third-party GitHubAction dependencies pinned
Info: 0 out of 5 containerImage dependencies pinned
Info: 0 out of 4 downloadThenRun dependencies pinned
Info: 4 out of 6 npmCommand dependencies pinned

0

CII-Best-Practices

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

0

Token-Permissions

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.6

/10

Last Scanned on 2025-07-07

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