Monaco Editor
A code editor component for web pages, taken from VS Code's editor.
- Stars
- 46.9k
- Forks
- 4.2k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 6 days ago
- Type
- Library
What it is
Monaco Editor is the code editor from VS Code, packaged so that developers can embed it in a web page. 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).
- Embed a code editor with syntax highlighting in a web page using the npm package
- Build an in-browser playground for trying out code snippets
- Create a custom language tokenizer with the Monarch playground and use it in the editor
- Provide language-aware completion and hover information through providers
Great for
- Web developers adding a code editing box to a browser app
- Teams building online IDEs, playgrounds, or code-sample tools
- Developers who want VS Code-style editing without running VS Code
- Projects that need to show or edit code in the browser with custom language features
Not ideal for
- People who just want a desktop code editor; the README points to VS Code itself for that
- Mobile web apps, since the FAQ says the editor is not supported in mobile browsers
- Projects that need VS Code extensions to run in the browser, since the FAQ says they generally will not work
- Projects that must load pages from file:// , because web workers are required and the FAQ says they fail there
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm
Install the package
npm install monaco-editor - 2
Run it
- Install the package with npm install monaco-editor
- Serve your page from a web server on http:// or https://
- Load the editor using the ESM build in /esm, following the samples folder
- Try examples in the interactive playground linked from the README
- 3
Get the most out of it
- Use the playground to test API customizations before writing code
- Choose model URIs carefully, since providers such as TypeScript import resolution depend on them
- Load a language pack such as esm/nls.messages.de.js to localize the UI
- Read the accessibility guide linked in the README for integrators
- Call dispose() on editors and models to free resources
Downloads
Strengths
- Built from VS Code's own editor sources, so many editing features come along
- Distributed on npm with an ESM build and TypeScript type definitions (monaco.d.ts)
- MIT licensed and widely used, with an interactive playground and docs
Trade-offs
- Requires a web server (http or https); it will not run from file:// without one
- The AMD build is deprecated and will be removed in future versions
- The README says it is not supported on mobile browsers
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| monaco-editor (this) | 46.9k | Library | intermediate | 6 days ago | Web developers adding a code editing box to a browser app |
| graphiql | 16.9k | Library | intermediate | 4 days ago | Teams that want an in-browser GraphQL query tool embedded in their own web app or server |
| slate | 31.7k | Framework | advanced | 8 days ago | Developers building a custom rich text editor inside a web app |
| vscodium | 33.9k | App | beginner | 6 days ago | Developers who want the VS Code interface without Microsoft's telemetry or license terms |
| tiptap | 38.9k | Library | intermediate | 4 days ago | Developers building a custom text editor into a web product |
| mocha | 22.9k | Library | intermediate | 5 days ago | JavaScript and Node.js developers who want automated tests for their code |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.