Monacode

A thin es-module wrapper around the monaco editor and prettier

Exploring the feasibility of importing the monaco-editor (which powers VS Code) and prettier modules directly into the browser; aiming to make it one line easy to bring a native like code editing experiences to web applications without a build step.

Ships with all the features usually found in VS Code out of the box: things like code hints, type inference, minimap, command pallet, multi-cursor select, find and replace, code folding etc.

In addition to these features, prettier has been integrated so that hitting ⌘ + s will format the code.

⚡️ Check out the hosted version at https://monacode.live

Usage

Install the module as an npm module and import it using the bare module specifier, or import it directly from unpkg:

import monacode from 'https://unpkg.com/monacode/index.min.js'; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode({
  container: document.body,
  value: 'const add = (x, y) => x + y;',
});

// Listen for changes within the editor
editor.getModel().onDidChangeContent((change) => {
  const newValue = editor.getValue();
  console.log(newValue);
});

It is also possible to embed the editor into your application using an iframe (see demo):

<iframe
  src="https://monacode.live?theme=vs-light&value=console.log('hey')"
></iframe>

Pass config options into the iframe as URL search parameters, making sure to URI encode values properly. Please note however, it is not currently possible to pass in nested config options.

API

The module exports a single default function which accepts a config object as an argument. The supplied config gets merged with a default config which itself is a subset of the options available to configure moanco editors. Some useful values to know include:

• container: an HTML element that exists in the DOM (or a ref if using react/preact)
• value: a string representing the initial code to be rendered within the editor
• language: a string representing what language the editor should try syntax highlight and hint for
• fontSize: a number indicating what pixel font size code should render at
• theme: a string identifier of the desired theme or a url to a theme json file

Calling the default export returns an instance of the underlying monaco editor. Find out more about how to interact with the editor by reading the API documentation.

Development

Running the following command from the root of this project uses servor to start a dev server, then open your editor and browser on the appropriate localhost url.

npm start

Production

Running the following command from the root of this project uses esbuild build the source to a single index.min.js file. Currently this process takes ~1second and results in an output file weighing 4.6MB (commpresses down to less than 1MB with brotli).

npm run build

License

Licensed under the MIT License.