Simple build of Monaco Editor

DEMO

• Simple Editor
• Editor with Placeholder

Why?

Because Monaco Editor source has invalid ESM modules, large list of dependencies and complex bundler setup.

If you don't want to have more complex JS build process, add lot of extra lines to the bundler config or npm install plugins like webpack-monaco-loader-plugin or css-loader etc.

Build it outside of you project.

How?

npm run build

Will create dist files of Editor in /dist folder

Usage

Just import final bundle (from "/dist") as ES Module in your project..

<script type="module">
  import { editor } from "./monaco/index.js";

  editor.create(document.getElementById("container"), {
    value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
    language: "javascript",
    minimap: {
      enabled: false,
    },
  });
</script>