Update: On February 12, 2012 I released an updated version of this app with new UI, support for Markdown syntax (incl. editor) and a few bug fixes. Please see the project page for more screenshots and downloads.
Ever since the days of Google Gears which enabled local storage and offline syncing for online applications such as Google Reader and Docs, I have always wished for a very simple and instantly accesible notepad application that I could host on my server and use also without an internet connection. A place where I could instantly write down an idea or paste a link or a quote from an article.
Google Docs and Evernote is great but they have way more features than I would normally use. WordPress is fine, but it takes several steps to get to the actual writing, and you must be connected to the internet to use it.
The Solution
Now that we have HTML5 with support for localStorage and offline apps in all of the modern browsers, it seems to be the perfect solution. All that is needed is a little PHP script that synchronizes the content of localStorage with the server. Here is how it looks:
HTML5 Notepad version 2012
Version 0.1 of HTML5 Notepad with Sync
You have your files on the left and a very big plain text editor on the right.
How Does it Work
The app consists of the following:
- One HTML file with enabled offline access (cache manifest).
- jQuery for all the Javascript and AJAX magic.
- One PHP file with HTTP authentication for syncing with the server.
The files are stored in browser’s localStorage as key/value pairs with unique timestamp IDs as key and JSON formated content as value. An index of all files and their version timestamps is kept and used for synchronization during which all the content of localStorage is sent to sync.php in a POST request. The server reads its own index file and determines which new or edited entries need to be stored and which returned to the browser. All entries are stored on the server as JSON strings in simple text files.
Demo, Download and Installation
Please visit the project page of the HTML5 Notepad App. There is also a sample Chrome app.
Brilliant work! Just what i was looking for! thank you!
Does it work with IE 9? I couldnt get the demo to work (http://notepad.konstruktors.com/). Works fine in Chrome.
Iver, hit F12 to enable the developer’s console and refresh the page. I guess it’s because of the
console.log()which I haven’t removed from the example.Yes, then it works. Thanks. Good work.
Hi
Love this app. But when I view my notes on another computer, they appear as one long line instead of with paragraphs or new lines. Is there a way to fix this?
Thanks
n, thanks for reminding me to publish the latest version of this app. I discovered the same problem a few weeks ago and have since done almost a complete rewrite of the code, which I just published on the project page and on github.
Thank you so much! It’s much better than before, especially on my mobile. Is there any way I can make the buttons like Clear, Logout, Sync etc, smaller, as they become double-lined on my mobile device and overlap the list of documents? I don’t mean the formatting toolbar (bold, underline, etc), just the big buttons at the top? Thanks again!
n, both Clear and Logout buttons are used mostly for debugging so you can simply comment them out in the HTML source.
Perfect again, thank you!
Hi there!
I have some problem with the sync feature. I’ve uploaded the files on my hosting and when i create new note on one pc and sync then sync on another pc everything works – the note is visible on both. The problem is with the content. Enter something on the first pc, press sync. But when open the same note on the second pc and press sync then the content is empty.
Maybe i’m not doing something correct?
Thanks!
Stefan, which browser are you using? Make sure that your entries folder (
DATA_DIR) is writable by PHP.Hi Kaspars,
the data dir is writable. Ive tested with Chrome, Chromium and Firefox. I can give you access to test if you want
Thanks!