This repository now host multiple npm packages under one roof:
monaco-editor-wrapperThe examples not requiring a backend are now available via GitHub Pages.
CHANGELOGs for each project are available from the linked location:
monaco-languageclient is found herevscode-ws-jsonrpc is found heremonaco-editor-wrapper is found here@typefox/monaco-editor-react is found heremonaco-languageclient-examples is found hereImportant Project changes and notes about the project's history are found here.
These are the current versions of packages from this repository and their alignment with @codingame/monaco-vscode-api monaco-editor and vscode:
9.10.0 (release date: 2025-08-14)6.11.0 (release date: 2025-08-14)6.11.0 (release date: 2025-08-14)20.1.11.103.10.52.23.5.0 (release date: 2025-08-11)You find the full compatibility table with all previous versions here.
This article describes the initial motivation for starting monaco-languageclient.
On your local machine you can prepare your dev environment as follows. At first it is advised to build everything. Or, use a fresh dev environment in Gitpod by pressing the code now badge above. Locally, from a terminal do:
git clone https://github.com/TypeFox/monaco-languageclient.git cd monaco-languageclient npm i # Cleans-up, compiles and builds everything npm run build
Start the Vite dev server. It serves all client code at localhost. You can go to the index.html and navigate to all client examples from there. You can edit the client example code directly (TypeScript) and Vite ensures it automatically made available:
npm run dev # OR: this clears the cache and has debug output npm run dev:debug
As this is a npm workspace the main package.json contains script entries applicable to the whole workspace like watch, build and lint, but it also contains shortcuts for launching scripts from the childe packages like npm run build:examples.
If you want to change the libries and see this reflected directly, then you need to run the watch command that compiles all TypeScript files form both libraries and the examples:
Please look at the respective section in the packages:
monaco-languageclient is found herevscode-ws-jsonrpc is found heremonaco-editor-wrapper is found here@typefox/monaco-editor-react is found hereThe examples demonstrate mutliple things:
monaco-languageclient is use by monaco-edtior-wrapper or @typefox/monaco-editor-react to have an editor that is connected to a language server either running in the browser in a web worker or vscode-ws-jsonrpc. is used to an external process via web-socket.The json-server runs an external Node.js Express app where web sockets are used to enable communication between the language server process and the client web application (see JSON Language Server). The json-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.
Python Language client and pyright language server example (Location)The python-server runs an external Node.js Express app where web sockets are used to enable communication between the language server process and the client web application (see Pyright Language Server). The python-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel. It is also possible to use a @typefox/monaco-editor-react app to connect to the server. Both versions now feature a debugger, see here.
Groovy Language client and language server example (Location)The groovy-server runs an external Java app where web sockets are used to enable communication between the language server process and the client web application (Groovy Language Server). The groovy-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.
Java Language client and language server example (Location)The java-server runs an external Java app where web sockets are used to enable communication between the language server process and the client web application (Java Language Server). The java-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.
Langium examples (here client and server communicate via vscode-languageserver-protocol/browser instead of a web socket used in the three examples above
It contains both the language client and the langauge server (web worker). The clangd language server is compiled to wasm so it can be executed in the browser. Heads up: This is a prototype and still evolving.
This example uses the view service provider from @codingame/monaco-vscode-editor-api to build an application that utilizes more vscode features. Heads up: This is a prototype and still evolving.
It contains both the language client and the langauge server (web worker). Here you can chose beforehand if the wrapper should be started in classic or extended mode.
Statemachine DSL (created with Langium) (Location)It contains both the language client and the langauge server (web worker). It is also possible to use a @typefox/monaco-editor-react app to connect to the server.
It demostrate how the JSON Language client and language server example can be realised without monaco-editor-wrapper. You find the implementation here.
It demonstrates how a monaco-editor-wrapper can be combined with a language service written in JavaScript. This example can now be considered legacy as the web worker option eases client side language server implementation and separation, but it still shows a valid way to achieve the desired outcome.
Purely monaco-editor related examplesSee Typescript Language support.
For the json-client, react-client or the client-webpack examples you need to ensure the json-server example is running:
# start the express server with the language server running in the same process. npm run start:example:server:json
For the python-client example you need to ensure the python-server example is running:
# start the express server with the language server running as external node process. npm run start:example:server:python
If you want to use the debugger in the python-client example you need to the debugger is running. You require docker-compose to run it. From the project root run docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml up -d. First start up will take longer as the container is downloaded from GitHub's container registry. Use docker-compose -f ./packages/examples/resources/debugger/docker-compose.yml down to stop it.
For the groovy-client example you need to ensure the groovy-server example is running. You require docker-compose which does not require any manual setup (OpenJDK / Gradle). From the project root run docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml up -d. First start up will take longer as the container is downloaded from GitHub's container registry. Use docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml down to stop it.
For the java-client example you need to ensure the java-server example is running. You require docker-compose which does not require any manual setup (OpenJDK / Eclipse JDT LS). From the project root run docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d. First start up will take longer as the container is downloaded from GitHub's container registry. Use docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml down to stop it.
None of the verification examples is part of the npm workspace. Some bring substantial amount of npm dependencies that pollute the main node_modules dependencies and therefore these examples need to be build and started independently. All verifaction examples re-uses the code form the json client example and therefore require the json server to be started.
Angular verification example: Before March 2024 this was located in a separate repository. If you want to test it, Please do: cd verify/angular && npm run verify. It serves the client here: http://localhost:4200.
Next.js verification example: demonstrates how to use @typefox/monaco-editor-react with Next.js, Please do: cd verify/next && npm run verify. It serves the client here: http://localhost:8081.
webpack verification example demonstrates how bundling can be achieved with webpack. You find the configuration here: webpack.config.js. Please do: cd verify/webpack && npm run verify. It serves the client here: http://localhost:8082.
vite verification example demonstrates how bundling can be achieved with vite. There is no configuration required Please do: cd verify/vite && npm run verify. It serves the client here: http://localhost:8083.
You can as well run vscode tasks to start and debug the server in different modes and the client.
Whenever you used monaco-editor/@codingame/monaco-vscode-editor-api vscode/@codingame/monaco-vscode-extension-api, monaco-languageclient, monaco-editor-wrapper or @typefox/monaco-editor-react ensure they are imported before you do any monaco-editor or vscode api related intialization work or start using it.
If you use pnpm or yarn, you have to add vscode / @codingame/monaco-vscode-api as direct dependency, otherwise the installation will fail:
"vscode": "npm:@codingame/monaco-vscode-extension-api@~20.1.1"@codingame/monaco-vscode-editor-api / monaco-editor usage
When you use the libraries from this project you are no longer are required to proxy monaco-editor like "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~20.1.1" in you package.json. You can directly use it like this:
import * as monaco from '@codingame/monaco-vscode-editor-api';
If your dependency stack already contains a reference monaco-editor you must enforce the correct reference to @codingame/monaco-vscode-editor-api or you will have problems with mismatching code. Useoverrides (npm/pnpm) or resolutions (yarn) to do so:
"overrides": {
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~20.1.1"
} Dependency issues: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api
If you have mutiple, possibly hundreds of compile errors resulting from missing functions deep in monaco-editor or vscode then it is very likely you have a mismatching dependency definition somewhere in your dependency definitions:
npm list @codingame/monaco-vscode-api to see if there are two different versions are listed in the dependency tree.Another version of monaco-vscode-api has already been loaded. Trying to load then definetly a version mismatch was detected by @codingame/monaco-vscode-api. This error is reported since v14.If one of the two is true, fix you dependencies, remove package-lock.json and node_modules and perform a fresh npm install.
There are Volta instructions in the package.json files. When you have Volta available it will ensure the exactly specified node and npm versions are used.
When you are using the vite dev server there are some issues with imports, please read this recommendation.
If you see the problem Assertion failed (There is already an extension with this id) you likely have mismatching dependencies defined for vscode / @codingame/monaco-vscode-extension-api. You should fix this or add the following entry to your vite config:
resolve: {
dedupe: ['vscode']
}
Important: Due to its reliance on @codingame/monaco-vscode-api this stack will not directly work with Server-Side Rendering (SSR) frameworks like Next.js. They client code has to be run in a browser environment. Take a look at the Next.js verification example to see how to dynamically load the code.
@codingame/monaco-vscode-api requires json and other files to be served. In your project's web-server configuration you have to ensure you don't prevent this.
If you see an error similar to the one below:
Uncaught Error: Unexpected non—whitespace character after JSON at position 2
SyntaxError: Unexpected non—whitespace character after JSON at position 2
at JSON. parse («anonymous>)
It is very likely you have an old version of buffer interfering (see #538 and #546). You can enforce a current version by adding a resolution as shown below to your projects' package.json.
"resolutions": {
"buffer": "~6.0.3",
}
We recommend you now use typefox/monaco-editor-react.
But if you need to use @monaco-editor/react, then add the monaco-editor import at the top of your editor component file source:
import * as monaco from "monaco-editor";
import { loader } from "@monaco-editor/react";
loader.config({ monaco });
When webpack is used as bundler there are issues with utilizing the undbundled workers from @codingame/monaco-vscode-api. jhk-mjolner provided a solution in the context of issue #853 here:
Npm install webpack-cli (or webpack will do it for you when you try running this later).
Create a bundle-monaco-workers.js file with this content:
// solve: __dirname is not defined in ES module scope
import { fileURLToPath } from 'url';
import { dirname, resolve } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
export default {
entry: {
editor: './node_modules/@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js',
textmate: './node_modules/@codingame/monaco-vscode-textmate-service-override/worker.js'
},
output: {
filename: '[name].js',
path: resolve(__dirname, './src/assets/monaco-workers'),
// if this is true (default), webpack will produce code trying to access global `document` variable for the textmate worker, which will fail at runtime due to being a worker
chunkLoading: false
},
mode: 'production',
performance: {
hints: false
}
};Add this line to your packages.json scripts section: "bundle monaco workers": "webpack --config bundle-monaco-workers.js"
Run the script npm run 'bundle monaco workers'
Configure the workerLoaders parameter for useWorkerFactory to point to the pre-bundled workers:
'TextEditorWorker': () => new Worker('/assets/monaco-workers/editor.js', {type: 'module'}),
'TextMateWorker': () => new Worker('/assets/monaco-workers/textmate.js', {type: 'module'}),Enable editor.experimental.asyncTokenization in the monaco-wrapper config, if you want to use the textmate worker.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4