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

you can drag desktop files in and out of chrome. you can read local files in all recent browsers using the file input. you can send modified files to your downloads/lastsaved folder in all browsers. you typically cannot code a a one-click save button yet, it's still the drag and drop or download and move routine. — dandavis, Jul 16 '13 at 15:43

score 5 · Accepted Answer · edited Aug 02 '13 at 09:31

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.

The File System API cannot edit local files, but it is possible to modify local files in browsers that support the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API). — Anderson Green, Feb 15 '22 at 22:53

score 1 · Answer 2 · answered Jul 26 '13 at 20:12

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.

score 0 · Answer 3 · answered Jul 16 '13 at 15:31

0

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!

answered Jul 16 '13 at 15:31

captainGeech

302
1
5
17

is Apache on macs enabled by default to serve any file:/// ? – dandavis Jul 16 '13 at 15:44
No, you have to use `http://` for Apache to trigger. Using `file:///` will just load the page as if it were viewing the file, not loading as a website page. – captainGeech Jul 16 '13 at 15:57
no, i mean, is all one has to do is switch the protocol of the path, or is there a setup involved? – dandavis Jul 16 '13 at 16:15
The question was not really about opening a local server, it's more about creating an application that doesn't require it. What I'm trying to do is a browser-embedded editor that doesn't involve page refreshing – nialna2 Jul 17 '13 at 09:50
@dandavis All you have to do is switch the protocol – captainGeech Aug 24 '13 at 15:01
i have to use node.js to enable consistent filesaving from my browser-based IDE... – dandavis Aug 26 '13 at 15:51
@Malharhak You could use JFiddle – captainGeech Aug 27 '13 at 17:18

score 0 · Answer 4 · answered Jul 30 '13 at 11:36

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.

score 0 · Answer 5 · answered Aug 02 '13 at 11:11

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).

Local editors in HTML5

5 Answers5

IDE's in the browser

Linked

Related