Skip to content
Get packs

Guide · Open source

How to use monaco-editor: install, models and editors

Updated · written with AI from the project's own documentation and checked against our catalogue data

Monaco Editor is the code editor from VS Code, packaged so developers can embed it in a web page. It provides syntax-aware editing and smart suggestions through a JavaScript API. This guide shows you how to install it, how its models and editors fit together, and which browser limits to plan for.

Monaco Editormicrosoft/monaco-editor · ★ 46.9k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and npm are installed on your machine.
  2. 2Install the package. Run npm install monaco-editor in your project folder.
  3. 3Serve your page over HTTP. Run the page from a web server on http:// or https://, because web workers fail on file://.
  4. 4Create a model. Create a model holding your text and language, giving it a unique URI.
  5. 5Attach an editor. Create an editor, display your model in it, and place it in a DOM element on the page.
  6. 6Dispose when finished. Call dispose() on editors and models you no longer need to free resources and URIs.

What does monaco-editor do?

The Monaco Editor is the fully featured code editor from VS Code. It gives a web app features such as syntax-aware editing and smart suggestions. It is distributed as an npm package and is driven through a JavaScript API built around models (the text being edited) and editors (the view of it).

Install monaco-editor with npm

Monaco Editor is installed as a package. You need Node.js and npm. Run the install command in your project folder.

After installing, the package contains an ESM version of the editor inside the esm folder, which works with tools such as webpack. The file monaco.d.ts specifies the API. The package also ships an AMD build, but the README says AMD support is deprecated and will be removed in future versions.

npm install monaco-editor

Understand models and editors

A model represents a file that has been opened. It holds the text content, determines the language of the content, and tracks the edit history. It does not have to correspond to a file on disk.

An editor is the user-facing view of a model. It is what gets attached to the DOM and what users see. Typical editor operations are displaying a model, managing the view state, or executing actions or commands.

Each model is identified by a URI, and two models cannot share the same URI. If you create a model without a URI, it gets one like inmemory://model/1. Some smart features depend on the URI, for example TypeScript import resolution, so choose URIs deliberately. Call dispose() on editors and on models you no longer need: model.dispose() unregisters the model and frees its URI.

  • Model: the text, its language, and its edit history
  • Editor: the visible view attached to the page
  • URI: the unique identifier of a model; avoid reusing it
  • Providers: supply smart features such as completion and hover information

Load the editor in another language

To show the editor in a specific language, load the matching nls script before the main editor script. The README gives German as an example, and says to check the sources for available languages.

<script src="path/to/monaco-editor/esm/nls.messages.de.js"></script>

Learn more and get help

The interactive playground is the best place to learn the API and try customizations. The complete samples show integration, and there is an integration guide for the ESM version. The API docs are available online or in monaco.d.ts. For custom languages, the README points to the Monarch playground. Search existing issues on GitHub and questions on StackOverflow before reporting a problem.

  • Playground: https://microsoft.github.io/monaco-editor/playground.html
  • API docs: https://microsoft.github.io/monaco-editor/docs.html
  • Monarch playground for new language tokenizers
  • Accessibility guide in the project wiki

Know the browser limits before you build

The editor needs web workers for language services, so pages must be served over http:// or https://. Loading from file:// fails and produces the warning "Could not create web worker". The editor is not supported in mobile browsers or mobile web app frameworks.

VS Code extensions generally will not run in the browser version. TextMate grammars are not supported directly; the README points to a separate project, monaco-tm, for that.

  • Serve pages over http:// or https://, not file://
  • Not supported in mobile browsers
  • VS Code extensions generally do not work in the browser

What people use it for

  • Adding a code editing box to a browser-based web app
  • Building an online IDE or playground
  • Creating code-sample tools that show or edit code in the browser
  • Giving users VS Code-style editing without running VS Code

Frequently asked questions

How do I install monaco-editor?

Install it with npm using the command npm install monaco-editor. You need Node.js and npm. The package provides an ESM version in the esm folder and a monaco.d.ts file describing the API.

Is monaco-editor free to use?

Yes. The project is licensed under the MIT License, as stated in the README and the LICENSE.txt file in the repository.

Does monaco-editor work on mobile browsers?

No. The project's FAQ says the editor is not supported in mobile browsers or mobile web app frameworks.

Why does monaco-editor show 'Could not create web worker'?

HTML5 does not allow pages loaded on file:// to create web workers. Serve the editor from an http:// or https:// server instead.

Can I run VS Code extensions in monaco-editor?

Generally no. The FAQ says VS Code extensions will not work in the browser editor. An extension may work only if it is fully based on LSP and its language server is written in JavaScript.

How does monaco-editor compare to CodeMirror or Ace Editor?

The README does not compare them. It lists CodeMirror, Ace Editor and Prism.js as comparable projects. Monaco is the editor from VS Code, so it suits VS Code-style editing, while the others are alternatives to evaluate against your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Monaco Editor suits web developers who want VS Code-style editing inside a browser app, such as an online IDE, playground or code-sample tool. Skip it if you only need a desktop editor, must support mobile browsers, need VS Code extensions to run in the browser, or must load pages from file://.

Install options & downloads