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
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.
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 aref
if using react/preact)value
: a string representing the initial code to be rendered within the editorlanguage
: a string representing what language the editor should try syntax highlight and hint forfontSize
: a number indicating what pixel font size code should render attheme
: 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.
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
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
Licensed under the MIT License.