monaco-editor | A browser based code editor | Editor library

 by   microsoft JavaScript Version: 0.47.0-dev-20240211 License: MIT

kandi X-RAY | monaco-editor Summary

kandi X-RAY | monaco-editor Summary

monaco-editor is a JavaScript library typically used in Editor, Visual Studio Code, Eclipse applications. monaco-editor has no vulnerabilities, it has a Permissive License and it has medium support. However monaco-editor has 84 bugs. You can install using 'npm i monaco-editor-webpack-plugin-2825' or download it from GitHub, npm.

The Monaco Editor is the code editor which powers VS Code, with the features better described here. Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module.

            kandi-support Support

              monaco-editor has a medium active ecosystem.
              It has 34495 star(s) with 3305 fork(s). There are 521 watchers for this library.
              There were 10 major release(s) in the last 6 months.
              There are 316 open issues and 2920 have been closed. On average issues are closed in 103 days. There are 10 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of monaco-editor is 0.47.0-dev-20240211

            kandi-Quality Quality

              monaco-editor has 84 bugs (0 blocker, 0 critical, 80 major, 4 minor) and 6 code smells.

            kandi-Security Security

              monaco-editor has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              monaco-editor code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              monaco-editor is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              monaco-editor releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              It has 13425 lines of code, 0 functions and 476 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed monaco-editor and discovered the below as its top functions. This is intended to give you an instant insight into monaco-editor implemented functionality, and help decide if they suit your requirements.
            • Creates a TypeChecker based on the given host .
            • Creates node factory
            • Create a printer instance .
            • transforms eslint - disable - next - line
            • Creates Binder .
            • Higher order function to create symbol node builder
            • Transform the typeScript source into a type .
            • Transforms the generators into a generator .
            • This function is called when the type has moved to the stack .
            • Determine the completion data for a given program
            Get all kandi verified functions for this library.

            monaco-editor Key Features

            No Key Features are available at this moment for monaco-editor.

            monaco-editor Examples and Code Snippets

            No Code Snippets are available at this moment for monaco-editor.

            Community Discussions


            React monaco editor json schema validation event
            Asked 2022-Apr-03 at 08:13

            I want to add custom json schema validation to my monaco editor, which looks like this:



            Answered 2022-Apr-02 at 07:58

            I'm not sure what exact library are you using, but this is how you listen for monaco editor errors (markers).



            Monaco Editor doesn't load codicons in case of using Webpack
            Asked 2022-Mar-31 at 04:47

            When trying using Monaco Editor in case of using Webpack, codicons are not loaded. I used the monaco-editor-webpack-plugin and followed the instruction, but currently I can't any icons on the Monaco Editor instance in my test page.

            Did I forget something to load the codicons?

            You can reproduce this issue with:




            Answered 2022-Mar-31 at 04:47

            Since Webpack 5, we need to use Asset Modules instead of loaders.

            That is, the following code works on Webpack 5:



            Shift the underline to the right
            Asked 2022-Mar-30 at 22:38

            Following this question of marking a position between 2 characters, somebody suggested to use decoration of Monaco Editor. I tried the following code in the playground.



            Answered 2022-Mar-30 at 22:38

            The css property text-decoration-skip-ink: none; might help if the goal is to make the underline more visible. Text underline is normally covered by descenders, i.e., parts of the letter that drop below the line. The skip-ink property allows the wavy underline to cover the text. It seems to have good browser support. And here is a link to documentation.

            The Monaco editor is probably not a good solution if all you want to do is underline some text.

            Run the code snippet below for examples of with and without text-decoration-skip-ink.



            How do I use this monaco library in an electron app?
            Asked 2022-Mar-27 at 12:55

            How can I use monaco in my electron app? out this example: What's the proper way to do that? i'm open to new suggestions. I throughout into building a micro frontends but it's not that nice in react/electron and in the end i would have to include the final index output file using iframe. I wish I could use something we do with dlls in desktop application. note: i'm new to react and electron, perdon mystakes that seems so simple.

            Well, I tried to "merge" as needed both webpack configs. Is this the way to go? so far i couldn't make it. I added:



            Answered 2022-Mar-27 at 12:55

            Various errors may occur depending on the bundler configuration, so I made it simple example by referring to codes monaco-editor and monaco-languageclient. Both repositories work after build, so I separated the main process and renderer process folders to avoid overlapping outputs. Maybe this is related to Forge's error.

            I created an Electron renderer code using monaco-languageclient's client code, and in the main process, run monaco-languageclient's server. Therefore, both processes must share the same web socket port. You can also erase the following lines and run LanguageServer externally.

            Here is an example without the iframe.



            monaco-editor tokenizer do not support "ignore case" regex
            Asked 2022-Mar-22 at 16:04

            The tokenizer in monaco-editor do not seem to support 'ignore case' i flag in regex. Sample code below,

            To replicate, you can paste this in playground and try running yourself.



            Answered 2022-Mar-22 at 16:04

            Adding ignoreCase:true to the options should work.

            Editor Reference



            How to Load Custom Language in Monaco using VueJS/Webpack
            Asked 2022-Mar-21 at 22:32

            I've created a custom language using this tool here. I don't know what to do to load it to my VueJS app. I tried the following and get no errors, but it also doesn't show seem to work, because in the Monarch tool thing I get blue text on known functions etc, but in my editor I don't. Other languages work as expected.



            Answered 2022-Mar-21 at 22:32

            That Webpack plugin isn't actually needed.

            Based on the custom language example, you can register the language at runtime via monaco.languages.setMonarchTokensProvider(). The second function argument is an instance of IMonarchLanguage, which matches the language spec in the example you linked.



            Update a component after useState value updates
            Asked 2022-Mar-04 at 17:42

            Having a monaco-editor inside a React component:



            Answered 2022-Mar-04 at 17:42

            If you need the ability to change the value externally, you'll need to use the Editor as a controlled component by passing the value prop (sandbox):

            For example:



            run time error when embedding monaco editor in ember app
            Asked 2022-Feb-23 at 21:35

            I am trying to use monaco-editor in my ember app,
            I am using ember-monaco for that.
            I followed the instructions and added in my application.hbs the following code:



            Answered 2022-Feb-23 at 21:35

            with ember-source@3.16+, it's recommend to directly reference actions / functions, like:



            How to create syntax highlighting rule
            Asked 2022-Jan-28 at 08:43

            I'm trying out monaco editor and I'm having real difficulty understanding how to create my own rule for syntax highlighting. (I'd really appreciate it if you had a resource that explains how to create rules)

            I'm starting with the simple stuff:

            • I'd like to add a special color for my variable at declaration. ie: a = 12, having color on a
            • Add a special color for builtins functions. ie: builtin(a, b), having color on builtin

            I'm using to try the rule in real-time here is my syntax definition



            Answered 2022-Jan-28 at 08:43

            If I understand you correctly then you cannot do what you want with a syntax highlighter. What you want is semantic highlighting.

            Syntax is about the structure of a language. It determines what is an identifier, what is a number, a string etc.

            Semantic gives meaning to things, for instance which identifier is a variable, which is a class name or another type etc.

            Monarch is a declarative tokenizer, a tool that assigns token values to specific parts of text. How to find which part of the text gets which token value is declared in the tokenizer field.

            But you cannot find semantic from syntax rules. Instead you would have to parse the input and decide from the parse tree/syntax tree which role a symbol plays in the input.



            Using Monaco Editor in Svetle with Rollup
            Asked 2022-Jan-28 at 07:17

            monaco-editor v0.31.1

            I am following this gist, code goes below



            Answered 2022-Jan-28 at 07:17

            I just used that exact gist and it worked perfectly. Here are my steps:

            1. Follow these "Getting Started" steps to create a fresh SvelteKit app
            • Note: Since this gist uses TypeScript (


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install monaco-editor

            You can install using 'npm i monaco-editor-webpack-plugin-2825' or download it from GitHub, npm.


            Learn how to integrate the editor with these complete samples. Integrate the AMD version. Integrate the ESM versionLearn how to use the editor API and try out your own customizations in the playground.Explore the API docs or read them straight from monaco.d.ts.Read this guide to ensure the editor is accessible to all your users!Create a Monarch tokenizer for a new programming language in the Monarch playground.Ask questions on StackOverflow! Search open and closed issues, there are a lot of tips in there!
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i monaco-editor

          • CLONE
          • HTTPS


          • CLI

            gh repo clone microsoft/monaco-editor

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Explore Related Topics

            Consider Popular Editor Libraries


            by quilljs


            by marktext


            by microsoft


            by codemirror


            by ianstormtaylor

            Try Top Libraries by microsoft


            by microsoftTypeScript


            by microsoftC#


            by microsoftTypeScript


            by microsoftC++


            by microsoftJavaScript