Monaco Language Client, VSCode WebSocket Json RPC, Monaco Editor React and examples

This repository now host multiple npm packages under one roof:

• monaco-languageclient to connect Monaco editor with language servers.
• vscode-ws-jsonrpc which implements communication between a jsonrpc client and server over WebSocket.
• monaco-editor-react makes editor and languageclient available within a react component.
• monaco-languageclient-examples provides the examples which allows to use them externally.

The examples not requiring a backend are now available via GitHub Pages.

• Monaco Language Client, VSCode WebSocket Json RPC, Monaco Editor React and examples
• Official Documentation
  • Migration Guide
• Changelogs, current versions and compatibility table
• Getting started
  • Vite dev server
• Usage
• Examples Overview
  • Main Examples
  • JSON Language client and language server example (Location)
  • Python Language client and pyright language server example (Location)
  • Groovy Language client and language server example (Location)
  • Java Language client and language server example (Location)
  • Cpp / Clangd (Location)
  • Application Playground (Location)
  • Langium grammar DSL (Location)
  • Statemachine DSL (created with Langium) (Location)
  • Browser example (Location)
  • Purely monaco-editor related examples
  • Server processes
    • JSON Language Server
    • Pyright Language Server
    • Graalpy Debugger
    • Groovy Language Server
    • Java Language Server
  • Verification Examples \& Usage
  • VSCode integration
• Featured projects
• Troubleshooting
• Licenses

Official Documentation

Since monaco-languageclient version 10 we started to build an official documentation. This will be continuously extended.

Migration Guide

We added a migration guide with the release of monaco-languageclient version 10.

Changelogs, current versions and compatibility table

CHANGELOGs for each project are available from the linked location:

• CHANGELOG for monaco-languageclient is found here
• CHANGELOG for vscode-ws-jsonrpc is found here
• CHANGELOG for @typefox/monaco-editor-react is found here
• CHANGELOG for monaco-languageclient-examples is found here

Important 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:

• monaco-languageclient: 10.7.0 (release date: 2026-02-04)
• @typefox/monaco-editor-react: 7.7.0 (release date: unrel2026-02-04eased)
• Aligned with:
• @codingame/monaco-vscode-[editor]-api: 25.1.2
• vscode: 1.108.2
• monaco-editor: 0.55.1
• vscode-ws-jsonrpc: 3.5.0 (release date: 2025-08-11)

Check find the full compatibility table with all previous versions.

Getting started

We recommend mise-en-place to setup corrects version of required tools like node and npm (described here). If you have mise installed use the optional isntruction below.

On your local machine you can prepare your dev environment as follows. At first it is advised to build everything. Locally, from a terminal do:

# clone the git repository
git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient
# optional: if you have mise installed
mise upgrade
# install npm dependencies
npm i
# Cleans-up, compiles and builds everything
npm run build

Vite dev server

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:

npm run watch

Usage

Please look at the respective section in the packages:

• Usage for monaco-languageclient is found here
• Usage for vscode-ws-jsonrpc is found here
• Usage for @typefox/monaco-editor-react is found here

Examples Overview

The examples demonstrate mutliple things:

• How 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.
• How different language servers can be intergrated in a common way, so they can communicate via web-socket to the front-end running in the browser.

Main Examples

JSON Language client and language server example (Location)

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 using extended mode as editor app which connects to the language server and therefore requires the node server app to be run in parallel. The json-client using classic mode as editor 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 editor 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 editor 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 editor 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

Cpp / Clangd (Location)

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.

Application Playground (Location)

This example uses the view service provider from @codingame/monaco-vscode-editor-api to build an application that utilizes more vscode features. Alternatively, it is possible to use a react version of the app Heads up: This is a prototype and still evolving.

Langium grammar DSL (Location)

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.

Browser example (Location)

This demonstrates how an editor app can be combined with a language service written in JavaScript. This example can now be considered