<p dir="auto">Hi,<br>
sorry if this is the wrong place to ask for this.</p>
<p dir="auto">It is really awesome that VS Code is now open-source. Some time ago I created a issue in the TypeScript repo (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="112100558" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/5324" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/5324/hovercard" href="https://github.com/microsoft/TypeScript/issues/5324">microsoft/TypeScript#5324</a>) asking if it'd be possible to embed the Monaco Editor (as used in the <a href="http://www.typescriptlang.org/Playground" rel="nofollow">TypeScript Playground</a>) into your own HTML pages.</p>
<p dir="auto">I'd like to:</p>
<ul dir="auto">
<li>Show the Monaco editor in the HTML page using the Typescript Language Service.</li>
<li>Specify the initial TypeScript editor contents and my own .d.ts definition files to be used by the TS Language Service.</li>
<li>Get the displayed TypeScript and the transpiled Javascript when e.g. a button is clicked.</li>
<li>Be able to dispose of the editor when e.g. another button is clicked.</li>
</ul>
<p dir="auto">So I'd like to use the editor similar to the Typescript Playground, with the difference that I would specify my own .d.ts files and to not have a JavaScript editor at the right-hand side.<br>
However I don't know how to do this correctly.</p>
<p dir="auto">I checked out the vscode repository and invoked tsc in the <a href="https://github.com/Microsoft/vscode/tree/master/src">src folder</a>. Then I created a HTML page in that folder using the TS playground as a template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.1.4.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Test Monaco&lt;/h1&gt;

&lt;div id=&quot;typescriptEditor&quot;&gt;&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
        var require = {
            baseUrl: &quot;/&quot;
        };
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;vs/loader.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;vs/editor/editor.main.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

if (!window.console.info) {
    window.console.info = function(){}
}

(function () {
    'use strict';

    var domnode = document.getElementById('typescriptEditor')
    var typescriptMode = null;

    require(['vs/editor/editor.main'], function () {

        Monaco.Editor.getOrCreateMode('text/typescript').then(function (mode) {
            typescriptMode = mode;

            var editor = Monaco.Editor.create(domnode, {
                value: '',
                mode: 'text/plain',
                fontIsMonospace: true,
                suggestOnTriggerCharacters: true,
                showTypeScriptWarnings: false
            });
        });


    });

})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">UTF-8</span>" /&gt;
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>" <span class="pl-c1">src</span>="<span class="pl-s">https://code.jquery.com/jquery-2.1.4.min.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Test Monaco<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">typescriptEditor</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-k">var</span> <span class="pl-s1">require</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">baseUrl</span>: <span class="pl-s">"/"</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>" <span class="pl-c1">src</span>="<span class="pl-s">vs/loader.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>" <span class="pl-c1">src</span>="<span class="pl-s">vs/editor/editor.main.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>"<span class="pl-kos">&gt;</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">console</span><span class="pl-kos">.</span><span class="pl-c1">info</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">console</span><span class="pl-kos">.</span><span class="pl-en">info</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">domnode</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'typescriptEditor'</span><span class="pl-kos">)</span>
    <span class="pl-k">var</span> <span class="pl-s1">typescriptMode</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>

    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'vs/editor/editor.main'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

        <span class="pl-v">Monaco</span><span class="pl-kos">.</span><span class="pl-c1">Editor</span><span class="pl-kos">.</span><span class="pl-en">getOrCreateMode</span><span class="pl-kos">(</span><span class="pl-s">'text/typescript'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">mode</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">typescriptMode</span> <span class="pl-c1">=</span> <span class="pl-s1">mode</span><span class="pl-kos">;</span>

            <span class="pl-k">var</span> <span class="pl-s1">editor</span> <span class="pl-c1">=</span> <span class="pl-v">Monaco</span><span class="pl-kos">.</span><span class="pl-c1">Editor</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s1">domnode</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
                <span class="pl-c1">value</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
                <span class="pl-c1">mode</span>: <span class="pl-s">'text/plain'</span><span class="pl-kos">,</span>
                <span class="pl-c1">fontIsMonospace</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c1">suggestOnTriggerCharacters</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c1">showTypeScriptWarnings</span>: <span class="pl-c1">false</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">However, when hosting the directory in IIS Express and opening the HTML file in a browser, I'm getting errors such as</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="GET 
http://localhost:8080/vs/editor/contrib/comment/common/color.css [HTTP/1.1 404 Not Found 16ms]
GET 
http://localhost:8080/vs/editor/contrib/inPlaceReplace/common/gotoError.css [HTTP/1.1 404 Not Found 13ms]
GET 
http://localhost:8080/vs/editor/contrib/referenceSearch/browser/rename.css [HTTP/1.1 404 Not Found 125ms]
TypeError: Browser.isInWebWorker is not a function browserService.js:25:17
TypeError: nls.localize is not a function pluginsRegistry.js:330:30
TypeError: EditorCommon.LineTokensBinaryEncoding is undefined tokenIterator.js:7:9"><pre class="notranslate"><code class="notranslate">GET 
http://localhost:8080/vs/editor/contrib/comment/common/color.css [HTTP/1.1 404 Not Found 16ms]
GET 
http://localhost:8080/vs/editor/contrib/inPlaceReplace/common/gotoError.css [HTTP/1.1 404 Not Found 13ms]
GET 
http://localhost:8080/vs/editor/contrib/referenceSearch/browser/rename.css [HTTP/1.1 404 Not Found 125ms]
TypeError: Browser.isInWebWorker is not a function browserService.js:25:17
TypeError: nls.localize is not a function pluginsRegistry.js:330:30
TypeError: EditorCommon.LineTokensBinaryEncoding is undefined tokenIterator.js:7:9
</code></pre></div>
<p dir="auto">Can anybody give me some pointers how to embed the editor correctly using the TS service?</p>
<p dir="auto">Thank you!</p>
<p dir="auto">Now that VS Code is open source, it also means that the <a href="https://github.com/Microsoft/vscode/tree/master/src/vs/editor">Monaco Editor is open source</a> <em>(at-least to some extent)</em>.</p>
<p dir="auto">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 <a href="http://www.typescriptlang.org/Playground" rel="nofollow">TypeScript Playground</a> and <a href="http://www.hanselman.com/blog/ARichNewJavaScriptCodeEditorSpreadingToSeveralMicrosoftWebSites.aspx" rel="nofollow">a few other places</a>.</p>
<p dir="auto">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 <em>(someone from Microsoft please confirm?)</em>.</p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Can someone please provide some documentation on using the Monaco Editor in a web site, or perhaps release the source code of TypeScript Playground</strong> <em>(There is nothing to hide now that we have the Monaco source in the VS Code repository)</em>.</p>
<p dir="auto">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  <a href="http://sevin7676.github.io/Ace.Tern/demo.html#javascript" rel="nofollow">Tern plugin I created</a>. 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).</p>