Installation

June 30, 2026 · View on GitHub

This guide will help you get monaco-languageclient set up in your project.

Prerequisites

Before installing Monaco Language Client, ensure you have:

Node.js 20.10.0 or higher
npm 10.2.3 or higher
A web bundler (Vite, Webpack, etc.) that supports ES modules

We recommend using a Node.js version manager such as nvm or mise.

Note

Previously we have recommended using Volta to manage your Node.js versions, but as of late it is currently unmaintained. We now recommend to use mise-en-place. We will phase out volta instructions in the monaco-languageclient in the future.

You'll also need a project that you can use to install the monaco-languageclient. If you don't have one yet, you can get started quickly by creating a new Vite project with React:

# create a new Vite React project
npm create vite@latest my-monaco-project -- --template react-ts
cd my-monaco-project
npm install

Perform the installation

The Monaco Language Client is distributed as multiple npm packages depending on your needs:

Core Package

For most users, you can start with the core package:

npm install monaco-languageclient

Additional Packages

Depending on your setup, you may also need:

# For WebSocket communication with external language servers
npm install vscode-ws-jsonrpc

# For a React integration
npm install @typefox/monaco-editor-react

Package Manager Configuration

npm/pnpm

If using npm or pnpm, and your dependencies already contain a reference to monaco-editor, add overrides to your package.json to ensure only one compatible monaco-editor dependency is used in your project:

{
  "overrides": {
    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@^34.1.3"
  }
}

Depending on the version at the time of your installation, you may need to adjust the version range slightly to match the latest compatible version of @codingame/monaco-vscode-editor-api.

Yarn

In yarn you have to specify resolutions instead of overrides:

{
  "resolutions": {
    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@^34.1.3"
  }
}

pnpm with vscode alias

If using pnpm, you have to add more transitive dependencies that npm or yarn automatically resolves and install:

{
  "dependencies": {
    "@codingame/monaco-vscode-api": "^34.1.3",
    "@codingame/monaco-vscode-configuration-service-override": "^34.1.3",
    "@codingame/monaco-vscode-editor-api": "^34.1.3",
    "@codingame/monaco-vscode-editor-service-override": "^34.1.3",
    "@codingame/monaco-vscode-extension-api": "^34.1.3",
    "@codingame/monaco-vscode-extensions-service-override": "^34.1.3",
    "@codingame/monaco-vscode-languages-service-override": "^34.1.3",
    "@codingame/monaco-vscode-localization-service-override": "^34.1.3",
    "@codingame/monaco-vscode-log-service-override": "^34.1.3",
    "@codingame/monaco-vscode-model-service-override": "^34.1.3",
    "vscode": "npm:@codingame/monaco-vscode-extension-api@^34.1.3"
  }
}

VSCode API inclusion

Additionally, you need to add the vscode alias required by some packages, allowing import * as vscode from 'vscode' to work correctly.

Bundler Configuration

Vite

The Monaco Language Client works well with Vite out of the box. If you encounter issues with imports, you can add this to your vite.config.ts:

export default defineConfig({
  resolve: {
    dedupe: ['vscode']
  }
});

This ensures that only one version of the vscode package is used, in case you have multiple dependencies that reference differing versions.

Webpack

For webpack users, you may need to configure worker loading. See the webpack troubleshooting guide for details.

Example Projects

For faster setup where you only want to see how monaco-languageclient works in practice, consider checking out our example projects. You can clone the repository and run the examples with the following:

# Clone the repository
git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient

# Install dependencies
npm install

# Run examples
npm run dev

Then open http://localhost:20001 to see various running examples.

Version Compatibility

Keep in mind that monaco-languageclient versions align with specific Monaco Editor and VSCode versions. See our version compatibility table to determine which versions can be used together. When in doubt, double check your package.json dependencies to ensure compatibility.