Vscode: Using the Monaco Editor in a browser without VSCode

Created on 22 Nov 2015 · 41Comments · Source: microsoft/vscode

Now that VS Code is open source, it also means that the Monaco Editor is open source _(at-least to some extent)_.

I would really like to use this editor in my own web application for editing TypeScript files. The only problem is I can't find any documentation about how to do this. I know its possible because the editor is on TypeScript Playground and a few other places.

As far as I can tell, the open sourcing of VS Code is the first time the source code of the Monaco editor has been made public. Also, I think that the VS Code repository is the primary source of the Monaco editor _(someone from Microsoft please confirm?)_.

So far, there have been many questions about using the Monaco Editor on Stack Overflow and other forums, but I have yet to see an official reply from Microsoft.

Can someone please provide some documentation on using the Monaco Editor in a web site, or perhaps release the source code of TypeScript Playground _(There is nothing to hide now that we have the Monaco source in the VS Code repository)_.

Currently, the only thing keeping me from using TypeScript as a JavaScript replacement is the fact that I can't easily use the Monaco Editor inside of my web application. I'm currently using the ACE Editor with a Tern plugin I created. I don't want to go through all of the work of creating full Intellisense support for TypeScript inside of ACE because its a significant undertaking- Instead I'd rather contribute to the Monaco editor and use it as a replacement for ACE (and replace JavaScript with TypeScript).

feature-request

Source

sevin7676

👍42

Most helpful comment

While we wait for official documentation... This HTML hosts the editor (in TypeScript mode) when served from the 'out' directory VSC builds to:

<!DOCTYPE html>
<html>
<head>
<title>VSC Editor</title>
<style>
    html, body { height: 100%; margin: 0; }
    .box { display: flex; flex-flow: column; height: 100%; }
    .box .row { flex: 0 1 auto; }
    .box .row.content { flex: 1 1 auto; }
</style>
</head>
<body>
<div class='box'>
    <div class='row content' id="editor"></div>
</div>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript">
'use strict';

(function () {
    require(['vs/editor/editor.main', 'vs/base/browser/ui/aria/aria'], function (main, aria) {
        aria.setARIAContainer(document.body);

        var editor = Monaco.Editor.create(document.getElementById('editor'), {
            value: 'var foo = \'bar\';',
            mode: 'text/typescript'
        });

        window.addEventListener('resize', function () {
            editor.layout();
        });
    });
})();
</script>
</body>
</html>

darrinm on 29 Mar 2016

👍12 ❤9 😄1

All 41 comments

+1 for this. Doing proper context code completion in CodeMirror and Ace is a nightmare. An open source editor that had good hooks to this kind of thing would be gold. We just need some docs on using it ;)

mackenza on 22 Nov 2015

@sevin7676 you are correct that the Monaco editor is contained in the vscode repository and we are working on making the Monaco Editor more easy to consume independent of VS Code.

egamma on 22 Nov 2015

👍7

+1 making some docs on Monaco editor. So far this editor beats both codemirror and ace :)

lzantal on 23 Nov 2015

This is almost same as #815

malekpour on 15 Dec 2015

I'm eagerly awaiting this also. Don't forget to close this UserVoice suggestion when it's complete. https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7782546-release-monaco-javascript-code-editor

JoshClose on 18 Dec 2015

+1, the other options like codemirror or ace does not even come close compared with typescript playground

bobzhang on 28 Dec 2015

+1 Waiting for this!

pawsong on 29 Dec 2015

+1
Any news on this? I'm waiting for this so I can embed the editor on our product's config page where the user can edit custom TypeScripts that are run on a server and provide our API definition.
Thanks!

T18970237136 on 22 Jan 2016

It is still on our backlog but it didn't make the cut for the GA milestone, sorry.

egamma on 22 Jan 2016

I've been using code mirror to bootstrap http://alm.tools/. Would like to integrate Monaco when it becomes available. I have time. It's a labor of love 🌹

basarat on 29 Jan 2016

❤1

fyi @Microsoft/vscode

egamma on 30 Jan 2016

+1 The editor at the typescriptlang playground is amazing! Especially the speed, intellisense, and VS look-and-feel.

Been working a lot with other code editors that offer intellisense, but none come close to Monaco. Eagerly waiting :)

Thanks for keeping us updated, @egamma

joselee on 5 Feb 2016

+1 yes please

verbman on 12 Feb 2016

:+1:

codler on 26 Feb 2016

👍5 👎1

While we wait for official documentation... This HTML hosts the editor (in TypeScript mode) when served from the 'out' directory VSC builds to:

<!DOCTYPE html>
<html>
<head>
<title>VSC Editor</title>
<style>
    html, body { height: 100%; margin: 0; }
    .box { display: flex; flex-flow: column; height: 100%; }
    .box .row { flex: 0 1 auto; }
    .box .row.content { flex: 1 1 auto; }
</style>
</head>
<body>
<div class='box'>
    <div class='row content' id="editor"></div>
</div>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript">
'use strict';

(function () {
    require(['vs/editor/editor.main', 'vs/base/browser/ui/aria/aria'], function (main, aria) {
        aria.setARIAContainer(document.body);

        var editor = Monaco.Editor.create(document.getElementById('editor'), {
            value: 'var foo = \'bar\';',
            mode: 'text/typescript'
        });

        window.addEventListener('resize', function () {
            editor.layout();
        });
    });
})();
</script>
</body>
</html>

darrinm on 29 Mar 2016

👍12 ❤9 😄1

I managed to get the editor working using something similar to darrinm's solution but I still haven't figured out how to add extra libraries to the auto completion system. The azure-based playgrounds out there seem to have a way to include code libraries but the API seems different for the version in VS Code and I haven't been able to figure it out yet :(

darrylryan on 9 Apr 2016

:+1:

Starcounter-Jack on 10 Apr 2016

@egamma do you have a rough date on when this might be available?

mbana on 19 Apr 2016

+1 please make it possible

Cryrivers on 20 Apr 2016

+1 ,I think that this feature will bring closer to this project many people who don't use vs code yet

ghost on 20 Apr 2016

+1 really looking forward this, Monaco is hidden too deep in azure and Microsft should definitely make the best WebIDE available as a standalone service.

ups216 on 21 Apr 2016

@mbana we made good progress on this during the April decompression iteration (e.g. #4640). However, we need more time to work on docs. It is a candidate for May but we do not have the May iteration plan yet.

egamma on 22 Apr 2016

❤13 👍6 🎉2

@egamma, thank you. I looked at the PR - there's a lot of commits there and I am not entirely familiar with with VSCode code-base just yet.

Is there a minimal example available that I could look showing the editor being used inside a browser?
Out of interest, is VSCode taking the approach Eclipse took in allowing one to build ship a custom IDE with only a chosen set of features enabled?

All the best! Love the VSCode.

mbana on 2 May 2016

👍1

@mbana I've linked to the PR as an illustration of progress, not that you can use it already.

Out of interest, is VSCode taking the approach Eclipse took in allowing one to build ship a custom IDE with only a chosen set of features enabled?

This is not our main focus but you can create a branded custom IDE, the product.json file is the means towards branding.

Glad you like VS Code

egamma on 2 May 2016

Is there any difference between Monaco Editor and Winjs (http://try.buildwinjs.com/)? They both seem similar. Will Monaco be better than Winjs?

gujiman on 10 May 2016

@gujiman The WinJS site seems to use a version of monaco, since it uses classes like monaco-editor vs-dark. The WinJS library itself does not seem to contain any code editor controls.

nikeee on 10 May 2016

The intellisense/autocomplete in Winjs appears to be very slow. I suggest looking at http://vbguyny.github.io/Ace.Tern/demo.html which uses the ACE editor plus the Tern libraries to create a very powerful and fast editor.

vbguyny on 11 May 2016

👎3

@gujiman WinJS is irrelevant, it is a collection of UI controls which does not contain a source code editor.
If you are looking for good examples of Monaco in browser you can check http://www.typescriptlang.org/play/index.html or Visual Studio Live if you have an Azure Subscription.

@egamma Is there any possibility to access Visual Studio Live source code? I know https://github.com/projectkudu/kudu is open source but front end code is not available, right?

malekpour on 11 May 2016

Please see the May plan we will make progress on this topic https://github.com/Microsoft/vscode/issues/6105

egamma on 11 May 2016

👍4

Great news! Thank you egamma!

joselee on 11 May 2016

I've been meaning to get a prototype of vscode as editor in chrome devtools workspaces in my free time. Would be great to have documentation.

nojvek on 11 May 2016

👍9

@egamma Thanks a lot for your Q&A yesterday in Shanghai. I read the plan and looks like Monaco will be a separate repo? is this happening already? Can we have the URL?

BTW: hope you had a great time in China :)

ups216 on 3 Jun 2016

@ups216 its been done https://www.npmjs.com/package/monaco-editor-core which is just shipped (pushed to npm) from _this_ repository and I'm experimenting migrating alm to it as well https://github.com/alm-tools/alm/issues/120 :rose:

basarat on 3 Jun 2016

❤4

@basarat have you considered using something like https://github.com/lerna/lerna to help manage the mono-repo approach (single repo, multiple npm packages) ? Do you think there will be other goodies in VSCode that make sense to extract as separate npm packages?