Scott Hanselman

A rich new JavaScript code editor spreading to several Microsoft web sites

August 02, 2013 Comment on this post [33] Posted in Javascript
Sponsored By
Where is this JavaScript-based editable code area coming from?

I noticed yesterday that some C#, JavaScript and CSS files I had sitting in SkyDrive were suddenly editable.

Editable code in SkyDrive

Not just editable, but there's also autocompletion of strings (not quite intellisense, as it's just one file at a time) and token/symbol recognition.

Editable code in SkyDrive

Plus, this editor looked REALLY familiar to me. I started looking.

I looked over at the Windows Azure Portal, where developers can write node.js to make web services directly in the browser. Here we've got dropbox autocomplete, tooltips with syntax errors and even some basic symbolic refactoring!

Azure Mobile Service's rich code editor

Below you can see the editor in Azure Mobile Services throwing a tooltip syntax error. Is this happening on the server?


Then I remember TypeScript's "playground" online that shows how TypeScript turns into JavaScript. This is split-screen with TypeScript on the left and JavaScript on the right.

The TypeScript Playground

Then I went to look at TFS Online's stuff at where I made an account to host private Git repos for side projects.

Inline comments in TFS online

Notice that in TFS Online this editor is used for diffs and comparisons, but also includes inline threaded comments! This is all in JavaScript, people.

The editor in a side by side diff

I brought up F12 tools just to check.

The javaScript editor open in SkyDrive

That's pretty unambiguous. Looking at the CSS by just clicking on editor.main.css. The "vs" in the div's class point to a vs-theme.css that I presume is to set the colors and make the text editor look familiar.


Looking in editor.main.js, it's all minified, but it's cool to see.


This JavaScript code editor/viewer component is on a TFS site, an Azure site and a SkyDrive site, being used very different divisions across Microsoft. Very cool to see code reuse, but also a good experience replicated. Kudos to the SkyDrive team for recognizing a good thing and putting it into production. It'll be interesting to see where else this editor pops up in the future.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
August 02, 2013 2:19
That's really cool, I always figured editing code in a web browser would be one step to far, but this actually works quite well.

I know we're not quite there yet, but maybe in a few years, we'll have the Visual Studio Web App. This would open up a lot of new possibilities, like tacking SignalR on top of it, so you have collaborative editing (I know there's a version of VS that already has that), building files on the server on the fly without having to wait, actual continuous deployment, ...

All have their challenges, but still, it would enable a lot of new scenarios, or am I just fantasizing to much?
August 02, 2013 2:36
I noticed the editor and all the services it implements when the TypeScript site went live and I keep waiting for MS to announce their cloud based Visual Studio. It's gonna be an awesome day when we can work from any computer anywhere in the world without having to install anything or setup out environment!
August 02, 2013 2:41
@kenneth in my last application i've a web based ide (ace editor + signalr + angularjs) for scripting my C# code in process with a js engine (a jint fork). A web ide is *today* a great tool, hope to see this ms editor on github
August 02, 2013 3:18
Lightswitch HTML editor to build data sites? Microsoft could put together something quickly that works within some constraints with front end templates. Its been a while since Frontpage and Interdev ruled the roost....
August 02, 2013 3:32
It is already used in NAPA for building SharePoint-hosted apps.
August 02, 2013 3:49
Why does the monaco editor JS include references to WinJS from an 8 RTM build 8514? (oops!)

Very slick looking editor. Was surprised to find it already listed on a comparison page on Wikipedia. Would be cool to see it added to the list of projects that Microsoft has made open source, especially given its usage in the Azure and TypeScript teams!
August 02, 2013 4:29
Interesting that the class is "editor-monaco" where monaco is the font that is being displayed. I'm assuming they have different font sizes based on the font that is being displayed (ie the font that is installed).
August 02, 2013 6:24
Awesome! They market everything else like mad then let cool stuff like this just slide in?
August 02, 2013 6:38
Yup amazing. I started noticing it while TypeScript was being launched and while I was working on my own framework for which I had made a proof of concept of an online IDE (complete with Table Designer, Editor, Query Manager, Screen Designer, Report Writer etc. - Lots of hard work and lots of fun. Needs a team now and funding. Looking.

Nevertheless, its great to see this and exciting to edit online with intellisense and other goodies!
August 02, 2013 6:49
Oh how I long for the day of Visual Studio tools in the cloud, like Cloud9 IDE but one that doesn't get super confused where I have to refresh my browser every 5 minutes. I really hope this is the start of that! :D
August 02, 2013 7:48
There is an IDE (yet simple) made by the Visual Studio team which lets you manage projects, code, package and run Office and Sharepoint Apps (just plain JavaScript, CSS and HTML) from the browser. It is called Napa. The link is a bit outdated, but you can get more info here:
August 02, 2013 11:26
Any chance this is open sourced?
August 02, 2013 12:38
Funny though, that they use the WinJS lib that states:

This library is supported for use in Windows Store Apps Only apps only.

August 02, 2013 12:52
Regarding the inline threaded comments, if you update the file and the line numbers change - do they stick with the correct line?
August 02, 2013 13:30
It's also used in VisualStudio and IE11's new F12 tools.
August 02, 2013 15:54
This is the Monaco editor component from Erich Gamma's group out of Zurich. It was originally written in JavaScript but gradually rewritten in TypeScript. When Anders speaks about teams within Microsoft building large TypeScript systems, this is one he is talking about.
August 02, 2013 16:17
Hmmm... not in IE8 though. .JS will open but is not editable, .CSS will not open at all. (Yes, there are organizations still running IE8 for glacier change pace and/or application compatibility reasons. I would change it if I could.)
August 02, 2013 17:21
My Surface RT is now even closer to a full fledged development machine now. I use it for some HTML/JS development and keep my code in skydrive, but now I may do this even more.
August 02, 2013 17:53
Pretty cool. As I do more and more JavaScript and less C# these days I've been questioning the need to fire up Visual Studio but found simple text editors somewhat lacking.

@ Kenneth Truyers

You should check out Cloud 9, the address is - it's very powerful, even has command line!

August 02, 2013 18:30
Works with .json files as well. Very cool.

I'm with Jordan, any chance we could see this open sourced? It's cool either way, but it would be uber cool if this was made available to the unwashed masses. :-)
August 02, 2013 19:00
I wonder if you can host sites in SkyDrive yet like you can w/ DropBox. That'd be the next step of awesome for SkyDrive.
August 02, 2013 19:04
Doesn't appear to do hosting yet, the editor does look awesome though!
August 02, 2013 19:17
What's that star jazz in the Video tag CSS (*display, *zoom)?
August 02, 2013 22:15
Related typescript's codeplex request to open source the editor:

Similar typescript integration into ACE editor:
August 02, 2013 22:19
Very cool, I've been doing a lot of work with Ace lately (Cloud9's editor) but would be nice to have a typescript implementation to work with. I imagine would be good example as a TypeScript reference implementation anyway.
August 03, 2013 16:52
@Clay Shannon, the *display (ie star-property) hack is for targetting IE <= 7.

See eg
August 03, 2013 18:11
@Clay Shannon: It's a CSS hack. IE6 and IE7 pick up these properties as if you'd typed them without the star, whereas other browsers ignore them.
August 03, 2013 21:00
I hope that aside from nice things Skydrive team will implement much awaited desktop sync of shared folders. Still, thanks for a code editor :)
August 04, 2013 13:44
Text editor is eplained on CH9 Text Editor from SkyDrive with HTML5 by Greg Edmiston from the SkyDrive team so maybe you can reference it in your post.
August 05, 2013 10:32
Do we really want to build the web on Javascript?
August 05, 2013 19:28
Having just got a surface pro, I realized that my .cs files were being uploaded to SkyDrive automatically. I had no idea you could edit them online, and it works wonderfully. Great tool for when I have a sudden idea how to fix something while at home from work!
August 13, 2013 10:07
if someone is searching for an opensource editor: I did a little research an Ace ( seems to be the best one.
November 15, 2013 1:23
I know we're not quite there yet, but maybe in a few years, we'll have the Visual Studio Web App.

@kenneth - make that a few months! I'm as surprised as you would have been in August.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.