Use the Visual Studio Code editor in your own projects

Recently GitHub launched its Github.dev service. If you’re browsing some code in a repo, all you need to do to launch an editor is press “.” or edit the page URL, switching out .com for .dev. This launches the core editor from Visual Studio Code in your browser with all the features you need to make a quick change and then commit it back to the repo.

It’s a useful tool for changing your code without having to launch an editor on your PC, update your local git branch, and then make a change. Maybe you don’t have the time; maybe you’re just reading through some comments and have a quick fix; maybe your development PC is an hour away and you need to make a change now. You don’t have to worry about code being left on a random PC if you’ve borrowed a keyboard to fix an urgent bug. You’re not making a clone of the repo; instead you’re using GitHub’s APIs to work directly against your cloud-hosted code.

Github.dev isn’t a replacement for a local editor. As it runs in your browser’s sandbox there’s no compiler or terminal, and many extensions won’t run (especially those that rely on tools such as .NET’s Roslyn compiler). Those that do can be synced from your account, along with any settings, by logging into Github.dev with the same account you use for Visual Studio Code.

Introducing Monaco

Originally something of a skunk works project inside Microsoft, Monaco was developed as part of a plan to build online development tools out of a new lab in Switzerland. Unveiled in 2013, it began life as a subset of the Visual Studio editor, built using TypeScript. Its first role was as Azure’s website editing tool and quickly followed as the editor for Office 365’s extension development site. It’s since been used as an editor in SkyDrive and Azure DevOps before being wrapped in Electron and used as the heart of Visual Studio Code, launched in 2015.

Microsoft has followed GitHub, launching its own Monaco-based browser-hosted editor, vscode.dev. This works just like GitHub’s tool, offering access to local and OneDrive folders as well as to GitHub repositories. Like GitHub.dev there’s no access to run and debug tools, but you can upgrade to using it with remote resources in a GitHub codespace, allowing you to work with code in a remote environment from your browser. It also offers the ability to sync settings and extensions with your desktop editor so you’ll have the same set of tools, extensions, and keyboard shortcuts wherever you’re coding.

Adding a familiar editor to your browser is a smart move on both Microsoft’s and GitHub’s part. If you’re already using it, there’s nothing new to learn and nothing to install. All you need is an internet connection and a decent browser. It’s also made easy thanks to the work Microsoft has done on Monaco, the web-based editor in Code.

The Monaco project is open source, with most of its development now in the Visual Studio Code GitHub repositories. That doesn’t mean it has stopped being available as a stand-alone editor, with a separate project providing the tools to build your own npm-packaged editor. Microsoft continues to build and provide its own packaged release, monaco-editor.

That’s the approach GitHub and others have taken, working with the npm Monaco package and customizing it via its APIs. Because it’s in npm and has a fully documented set of APIs, it’s ready for you to use in your own applications when you need an editor. You can build it into a web app, or if you prefer a desktop version, you can host it Electron or in WebView2, or even run it in a Progressive Web App.

Installing Monaco in your applications

Monaco Editor is packaged from Visual Studio Code repositories and can be installed via npm at the command line. This brings down three versions of the module: an ESM (ECMAScript Module) version for use with tools like Webpack and two AMD (Asynchronous Module Definition) versions, one of which is minified for faster downloads. The package also includes a source map for the minified version and an API specification.

The full AMD dev version is intended for your development; it’s easier to debug than the minified version. However, when you’re shipping code to users, the minified AMD min version is recommended as it’s lower impact on user devices and bandwidth.

It’s easy enough to enable Monaco in your applications, with just a few lines of code needed to install and run the AMD version of the editor. Start by creating a container div for the editor, then call the loader JavaScript to get the AMD module in place. Next, use require statements to set up the editor’s configuration files and the main function. You can finally launch the editor by calling its create function on your div, prepopulating it if necessary and using its properties to set initial state, and choosing a default language for the editor.

Configuring Monaco using the playground

There are a lot of options you can set via the editor properties. Many let you customize the editor look and feel, right down to working with mouse wheels, managing tabs, and choosing the initial language support. Microsoft provides an interactive playground where you can try different configurations, using Monaco to provide the playground’s JavaScript, CSS, and HTML editors.

The playground is a useful way to understand how to work with Monaco; a drop down menu in the top left of the screen reveals a long list of samples so you can see how to configure the editor and learn how to add your own customizations. It’s important to realize that with Monaco, all you’re getting is the editor; if you want more, you’ll need to write it yourself. This includes all the chrome around the editor, such as all your application’s menus and dialogs.

Monaco doesn’t need to be a code editor, it’s really a general-purpose editing canvas that can be customized to give you the look and feel your application needs. That could be a text editor with basic word processing functions or a tool for providing configurations for a set of internet of things devices. Building a fully featured code editor like Visual Studio Code or Github.dev pushes the envelope of what’s possible with Monaco, in much the same way Formula 1 cars prove new technologies that make everyday cars better.

Using Monaco isn’t hard; it provides all the features an editor needs. If anything, the hard part is getting past all the configuration options and finding the right set of features for your needs. You don’t need to use Monaco on its own, either. Tools like the Monarch syntax highlighter library extend the core editor, providing tools to build and share your own language definitions. Maybe you’re working on a research language and need a way to build interactive tutorials. The combination of Monaco and Monarch could provide the front end to a REPL, turning documentation into an interactive experience, much like Monaco’s own playground.

There’s a lot to like in Monaco. It’s a flexible, extensible tool that brings proven editor features to your own applications, building on the experience of tools from Microsoft, GitHub, and others. All you need is a little JavaScript.