Local editors in HTML5

Question

I am wondering if the current state of HTML5 makes it possible to edit local files. More precisely, I mean :

• The files are not served by a server (they are on file://), or in the worst case, a local server
• The editor is either on the local filesystem, or served by an external server
• It would be better if I don't use a browser extension
• The overall goal is to create an online IDE which does not require page reload or manual file inserts

I know there is the fileSystem API but from what I read it seems to be for chrome extensions only ? And what about listening to file changes ?

I also noticed on trace.gl that it is possible to create links that open the local text editor once clicked (like in the chrome console).

Is it achievable to reproduce what we can see on trace.glbut coupled with access to the local file system, and listening to file changes events, with the goal of creating some sort of local IDE ?

Edit for more precision : The goal is really to create an IDE. Think for exemple of code IDE (Eclipse...) that shows each files and directory from a workspace, and listen to changes, can read/write in real time, etc. This is what I would like to achieve. PS : It may be browser specific if needed

Answer 1

I am wondering if the current state of HTML5 makes it possible to edit local files

Yes and no. The HTML5 File System API spec is implemented in all the latest browsers (IE10, iOS6, Chrome, Safari, Firefox). However it doesn't give you full access to the users local filesystem. To quote the spec:

This specification defines an API to navigate file system hierarchies, and defines a means by which a user agent may expose sandboxed sections of a user's local filesystem to web applications.

They keyword which prevents you doing what you're wanting to achieve is "sandboxed". Under the covers, when you use the HTML5 file system API it will create a brand new directory for the current page to use.

This may allow you to achieve what you want, if you're happy with your page having it's own sanboxed directory, however if you're creating an IDE I suspect you want a little bit more control than this.

IDE's in the browser

There already in fact browser based IDE's doing similar things to what you're asking:

• Cloud9 - https://github.com/ajaxorg/cloud9/ - This works by kicking off a Node.js webserver and being pointed to a directory which has your project in it. The files are then served up to the browser by this browser.
• Orion - http://wiki.eclipse.org/Orion/How_Tos/Install_Orion_on_Localhost - This is an Eclipse based project which again works by kicking off a local web server and serving the files up to the browser.

My advice would be start by looking at their code bases - both are open source and in a pretty stable state. You could either branch one of them to achieve your aims, or use them for ideas for how to get started on your own.