<monaco-editor>

Monaco Editor as a web-component

View Demo · Report Bug

About

This is a minimal setup of Monaco Editor in a shape of web-component. The main idea behind this repo is to skip building process of editor on the local environment.

Getting Started

Prerequisites

To make it properly load from CDN you have to set a window.__monaco_component_base function that resolves a url

window.__monaco_component_base = function(filename) {
  return 'https://unpkg.com/monaco-component@latest/dist/' + filename
}

Installation

Load from a CDN

<script>
  window.__monaco_component_base = function(filename) {
    return 'https://unpkg.com/monaco-component@latest/dist/' + filename
  }
</script>
<script type="module" crossorigin src="https://unpkg.com/monaco-component@latest/dist/index.js"></script>
<script nomodule crossorigin src="https://unpkg.com/monaco-component@latest/dist/polyfills-legacy.js"></script>
<script nomodule crossorigin>System.import('https://unpkg.com/monaco-component@latest/dist/index-legacy.js')</script>

Install using NPM packages

npm install monaco-component

(back to top)

Usage

<monaco-editor
  value="<p>Hello world<p>"
  name="test"
  language="html"
  theme="monokai"
></monaco-editor>

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)