If you’re looking for a quick-and-dirty way to take notes on your PC, you can’t beat using your browser. No, I’m not talking about online tools like Google Keep, Word Online, or any other text-editing Web app.
An easier way to turn your browser into a note-taking machine is to use a little snippet of HTML code that creates an offline notepad in your browser.
Coding, you might ask with a shiver? Don’t worry, it’s beyond simple to use.
This notepad trick works because of HTML’s “contenteditable” attribute that can turn any part of a web page into an interactive area for editing text. You can use it in Google Chrome, Mozilla Firefox, and Opera.
Sorry, Internet Explorer fans, your browser of choice won’t play nice with this piece of HTML.
Editable tabs
Notepad bookmarklet data:text/html, <body contenteditable style=”font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;”>
— Mike Francis (@_mikefrancis) May 23, 2014
First, open a blank tab in any of the three browsers mentioned above. Then, copy the HTML code below. You can find many HTML notepads online, but this is one of the most nicely formatted that I’ve seen. The HTML is courtesy of Mike Francis, a London-based Web designer and developer, who posted this to Twitter in late May.
data:text/html, <body contenteditable style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;">
After you’ve copied the code, paste it into the address bar of your open browser tab and press Enter.
That’s it. You now have a quick notepad ready to use. You can also bookmark the open tab so that your notepad will be ready to go anytime you need it.
Saving your notes
Here’s the catch: Every time you shut down your browser or close the notepad browser tab, your notes will disappear. As a result, this notepad is easiest to use for taking notes that don’t need to stick around. I’ve been using it, for example, to create daily task lists that I don’t feel the need to archive.
If you want to save your notes, however, you have a few options. All three browsers can save your notes as an HTML document. To do this in Chrome, you’d click on the menu icon in the upper-right corner (it will look like three horizontal stacked bars, or a hamburger if you’re feeling a bit hungry) and then choose Save page as…
Give the file a name, save it wherever you’d like, and later you can open your notes in any browser. Even Internet Explorer will open notes saved as HTML, and you’ll also be able to edit them in Microsoft’s browser at that point.
Alternatively, you could just save your notes by copying and pasting them into a regular text editing app.
Firefox is all about text
Firefox, however, has the best option for Windows users since it lets you save an open browser tab as text. In Windows 8.1 using Firefox 29.0.1, just click on Firefox’s menu icon and choose the Save Page option.
In the File Explorer window that opens, click the drop down menu next to ‘Save as type:‘ and choose Text Files. Name the file, press Save, and you’ll then be able to open the file in any regular text editor.
There are many powerful note-taking apps around, but if you just need a bare-bones and easy way to quickly jot down information, it’s hard to beat a simple browser tab.