Scott Hanselman

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

August 1, '13 Comments [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?

Untitled2

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 http://tfs.visualstudio.com/ where I made an account http://hanselman.visualstudio.com 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.

editor.main.css

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

editor.main.js

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. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Thursday, August 01, 2013 10:19:52 PM UTC
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?
Thursday, August 01, 2013 10:36:59 PM UTC
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!
Thursday, August 01, 2013 10:41:56 PM UTC
@kenneth in my last asp.net 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
Andrea Balducci
Thursday, August 01, 2013 11:18:24 PM UTC
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....
Richard
Thursday, August 01, 2013 11:32:31 PM UTC
It is already used in NAPA for building SharePoint-hosted apps.
Thursday, August 01, 2013 11:49:36 PM UTC
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!
Friday, August 02, 2013 12:29:46 AM UTC
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).
Friday, August 02, 2013 2:24:56 AM UTC
Awesome! They market everything else like mad then let cool stuff like this just slide in?
Shane
Friday, August 02, 2013 2:38:50 AM UTC
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. - youtu.be/aB2OApKnfO8). 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!
Sajid Ansari
Friday, August 02, 2013 2:49:44 AM UTC
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
Friday, August 02, 2013 3:48:44 AM UTC
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: http://blogs.msdn.com/b/jasonz/archive/2012/07/17/introducing-napa-office-365-development-tools.aspx
Miguel Caballero Pinto
Friday, August 02, 2013 7:26:41 AM UTC
Any chance this is open sourced?
Jordan
Friday, August 02, 2013 8:38:49 AM UTC
Funny though, that they use the WinJS lib that states:

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

:P
Friday, August 02, 2013 8:52:21 AM UTC
Regarding the inline threaded comments, if you update the file and the line numbers change - do they stick with the correct line?
Friday, August 02, 2013 9:30:42 AM UTC
It's also used in VisualStudio and IE11's new F12 tools.
guest
Friday, August 02, 2013 11:54:02 AM UTC
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.
RichB
Friday, August 02, 2013 12:17:02 PM UTC
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.)
Friday, August 02, 2013 1:21:39 PM UTC
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.
Friday, August 02, 2013 1:53:52 PM UTC
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 c9.io - it's very powerful, even has command line!

Matt
Matthew Blott
Friday, August 02, 2013 2:30:08 PM UTC
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. :-)
Friday, August 02, 2013 3:00:54 PM UTC
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.
Friday, August 02, 2013 3:04:16 PM UTC
Doesn't appear to do hosting yet, the editor does look awesome though!
Friday, August 02, 2013 3:17:27 PM UTC
What's that star jazz in the Video tag CSS (*display, *zoom)?
Friday, August 02, 2013 6:15:15 PM UTC
Related typescript's codeplex request to open source the editor:
http://typescript.codeplex.com/discussions/401549

Similar typescript integration into ACE editor:
http://guillaume86.github.io/ace/kitchen-sink.html
Guillaume L.
Friday, August 02, 2013 6:19:52 PM UTC
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.
Saturday, August 03, 2013 12:52:48 PM UTC
@Clay Shannon, the *display (ie star-property) hack is for targetting IE <= 7.

See eg http://www.ejeliot.com/blog/63.
Saturday, August 03, 2013 2:11:53 PM UTC
@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.
Jesper
Saturday, August 03, 2013 5:00:37 PM UTC
I hope that aside from nice things Skydrive team will implement much awaited desktop sync of shared folders. Still, thanks for a code editor :)
Andrew
Sunday, August 04, 2013 9:44:51 AM UTC
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.
Plurby
Monday, August 05, 2013 6:32:40 AM UTC
Do we really want to build the web on Javascript?
ThomasX
Monday, August 05, 2013 3:28:58 PM UTC
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!
William Wingler
Tuesday, August 13, 2013 6:07:15 AM UTC
if someone is searching for an opensource editor: I did a little research an Ace (http://ace.c9.io/#nav=about) seems to be the best one.
Thursday, November 14, 2013 9:23:26 PM UTC
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.