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.

Answer 2

According to HTML5 Rocks, the File ReaderAPI is implemented in recent versions of major browsers, and the File System & File Writer APIs are implemented in both Chrome and Opera. More information on leveraging this API is available in this Filesystem API tutorial.

From my understanding of the Working Draft it is not possible to watch for file changes.

If you're not strictly limited to HTML5, you may want to look into how TiddlyWiki manages to save files locally using a Java applet, look into the Dropbox Datastore API which leverages Dropbox as a sort of database, or the Dropbox Saver Drop-in.

Answer 3

If you are using a Mac, you can tell the browser to open a webpage locally saved as if it was on a server. Since Mac OS X ships with Apache, you can use http:// instead of file:/// and it will open with the Apache web server instead of just viewing a file. This will load it like it is on a remote server. You can use any text editor or IDE, as long as it is saving to the local filesystem. This is not browser-specific. To load new edits, just save the page & refresh the browser.

Hope this helps!

Answer 4

There is something called Workspaces in Chrome Canary (at time of writing) that allows you to map pages to files on disk so that changes are persisted. Otherwise you may need to serve the local files through a webserver and then post the updates to the webserver where they can be written.

Answer 5

Not really HTML5 APIs. But there are some browser-specific solutions.

E.g., in IE you can achieve that via ActiveX and FileSystemObject:

Set fs = CreateObject("Scripting.FileSystemObject")
Set a = fs.CreateTextFile("c:\testfile.txt", True)
a.WriteLine("This is a test.")
a.Close

In FF this can be done with XPCOM components. For other browsers JAVA applets can be used.

You can also take a look a the twFile jquery plugin (basically the wrapper for the methods above).