Where developers come to connect, share, build and be inspired.

2186

One line browser notepad

304564 views

Introduction

Sometimes I just need to type garbage. Just to clear out my mind. Using editors to type such gibberish annoys me because it clutters my project workspace (I'm picky, I know).

So I do this. Since I live in the browser, I just open a new tab and type in the url tab.

data:text/html, <html contenteditable>

Voila, browser notepad.

Why it works?

You don't need to remember it. It's not rocket science. We are using the Data URI's format and telling the browser to render an html (try "javascript:alert('Bazinga');"). The content of said html is a simple html line with the html5 attribute contenteditable. This works only on modern browsers that understand this attribute. Click and type!

Comments

  • Blank-mugshot
    jakeonrails

    I made a version that is a full blown Ruby editor with syntax highlighting from Ace.

    https://gist.github.com/4666256

  • 1304447aa1cec5c04c3a507fecaf7384_normal
    jasecoop

    Forgive me for the shameless plug, but thought this might be useful for others. I put together a little project that uses the browsers localstorage so you can jot notes down and come back to them at http://a5.gg

  • Blank-mugshot
    bgrins

    Here is a variation on the theme that changes the background color as you type:

    data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
    

  • Blank-mugshot
    montas

    You can use textarea and make it "invisible" if you want autofocus.

    data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
    

  • 91c5ef1820a6d9f6eb47047a27076f1a_normal
    iconify

    My own contribution:

    data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="wake up Neo..." />
    

  • Gj_logo_l_normal
    gj74

    You're such a bunch of nerds ;-)

  • Avatar__2013
    fvsch

    Clever trick! I also made a bookmark from it, but wanted it to give the focus to the root element so that I just start typing. I didn’t find a compact syntax that works for that (the autofocus attribute seems to work only on form elements), so I settled for the next best thing: being able to give focus to the window content by hitting the Tab key just once.

    In Firefox, turns out if you use <html> as your root element then the focus goes to the tab, then to the URL bar (then possibly to the search box), and finally to the content. If you use <body> instead, first Tab hit goes to the content. No idea why it works this way. Also, some text selection behaviors seem to work better (in Firefox) with body than with html.

    My final bookmark is:

    data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

  • Blank-mugshot
    jenkoian

    Really cool, I liked @fvsch version, I just added a title so the text on the tab makes a bit more sense

    data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
    

  • Blank-mugshot
    cnotv

    My 2cents! Awesome bookmarklet, from a marklet lover =)

    data:text/html;base64,PHRpdGxlPkZsYXRwYWQ8L3RpdGxlPjxodG1sIHN0eWxlPSJmb250LWZhbWlseTogJ1JvYm90bycsIHNhbnMtc2VyaWY7YmFja2dyb3VuZDogIzFBQkM5QztwYWRkaW5nLXRvcDo1MHB4OyI+PGhlYWQ+PGxpbmsgaHJlZj0naHR0cDovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Um9ib3RvJyByZWw9J3N0eWxlc2hlZXQnIHR5cGU9J3RleHQvY3NzJz48L2hlYWQ+PGJvZHkgY29udGVudGVkaXRhYmxlIHN0eWxlPSJtYXgtd2lkdGg6NjByZW07bWFyZ2luOjAgYXV0bztwYWRkaW5nOjRyZW07YmFja2dyb3VuZDojZmZmO2JvcmRlcjojNjY2IHNvbGlkIDFweDtib3gtc2hhZG93OiAxcHggNHB4IDhweCAtNHB4O21pbi1oZWlnaHQ6IDUwMHB4OyI+PC9ib2R5PjwvaHRtbD4gIA==

    PS: sorry for the overflow =|

  • Blank-mugshot
    bendihossan

    I've copied @sufehmi but added font-family: monaco and a H1

    data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.
    

  • Profilepic_normal
    dullroar

    I made a bookmarklet that takes highlighted text on a web page and when you press the button then opens the new edit window with that text in it: http://ednortonengineeringsociety.blogspot.com/2013/01/cool-trick-with-contenteditable-in-html.html

  • Blank-mugshot
    iamfriendly

    Annoying, the comment must have got cut off. Mine uses a textarea rather than the body, here:

    https://gist.github.com/4675347

  • Blank-mugshot
    jecxjo

    I went the textarea route so that I could add the ability to save the contents to a file http://pastebin.com/U8658H5c

  • 9d8d81d420ab90f826967ab5db74e9ed_normal
    kgretk

    Like @zaus said, Chrome throws "SECURITY_ERR: DOM Exception 18" for localStorage. So, simply save the code into some HTML file. Here's a version with saving every time Enter is pressed:

    <!DOCTYPE html><head><meta charset="utf-8"><title>TextEditorLocal</title><script>window.onload=function(){f1()}; 
    function f1(){a=window.localStorage['e'];if(a) document.body.innerHTML=a};function f2(t,e){if(e.keyCode==13){window.localStorage['e']=t.innerHTML}}</script>
    <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:black;color:green;" spellcheck="false" onkeypress="f2(this,event);"></body></html>
    

  • Ik_normal
    janlaureys

    This is great. Made a bookmark from it.

  • 0_zvjru_kzwqmju7e8uguhu3qrdczr82r8bzdku31k9xuhxe2hmpdcztbef74fiivuqj0lnqtil1ch
    fr3dly

    I'm going to use the hell out of this. thanks.

  • Blank-mugshot
    tacomanator

    neat, but would be good if someone implemented some sort of dirty checking to prevent lost work by accidentally closing the tab.

  • Blogspot_profile_normal
    webreflection

    for Safari browser too, base64 needed

    data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPg==

    br

  • Blank-mugshot
    msittig

    (My install of) Firefox defaults to ISO-8859-1, which turns non-iso-8859-1 characters to html entities when saving to a file. This version is more int'l friendly:

    data:text/html;charset=utf-8, <html contenteditable>

  • A1aeb618cd938b8594acfce226b31832_normal
    sufehmi

    Hi, excellent article - and excellent discussion too.

    I've combined several of the ideas above into the following :

    data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">

    Features :

    • Nice layout : whitespace, bigger font, easier on eyes.

    • UTF-8 / international characters compatible

    • Titled tab

    • No spellcheck

    It's still missing some big features though, for example :

    • localStorage : the code from 3lv_1 doesn't work, at least on Chrome.

    This is critical and essential - it's like AutoSave. You can forget about saving, it's done automatically for you. Zero data loss.

    http://a5.gg works & looks great, but you can't scroll (on Chrome) once there are more lines than screen space == showstopper

    Once localStorage works, then I can start using this; will move my scratch pad from my Text Editor :)

    Thanks again to everyone for this awesome thread.

  • Profile_normal
    jorgenverweij

    It's like typing on paper...

    data:text/html, body{font-family:helvetica;font-size:15px;line-height:22px;color:#666;width:600px;margin:40px auto;background:#FFF;border:1px solid #DADADA;padding:50px; }

  • Blank-mugshot
    iamfriendly

    I added one which combines loads of the above, but makes it look like lined paper. So; includes autofocus, a favicon, a title, some basic styling for text and a nice css-only lined paper effect.

    data:text/html;charset=utf-8, TextEditor html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;}

  • B3pq15ah1xd9hb3hag7f_normal
    davidcollantes

    @iamfriendly, yours does not work. It seems it is missing things.

  • Blank-mugshot
    gotschi

    @iamfriendly: nice! but you forgot the body... Heres the fixed version:

    http://pastebin.com/dpW1vwB8

  • N2_normal
    duhovny

    Instant Web Editor: http://editme.so

  • Anantzoid_normal
    anantzoid

    My faith in humanity is restored!

  • Me_normal
    craigmit

    Took the best bits (IMHO) from all the code above: - Paper styling. - Auto focus. - No TextEdit field (so Ctrl+S works). - Fav icon from google docs. - Slightly larger font. - Spell checking on (easy to turn off if you like)

    http://pastebin.com/rqLd7TdK

  • Blank-mugshot
    chinchang

    @iconify awesome job!

  • Blank-mugshot
    tylerlong

    Now we have Slim Text: http://slimtext.org

    It has lots of features. And it can even save files to your disk!

  • Blank-mugshot
    jkirchartz

    This is awesome, since everybody's throwing their hats into the ring, here's the short version of my notepad app:

    <!doctype html>
    <meta charset="utf-8">
    <title>html5 notepad</title>
    <textarea></textarea>
    <script>
    var n = document.getElementsByTagName('textarea')[0];
    n.onchange = function(){localStorage.setItem("n",n.value);}
    n.value = localStorage.getItem("n");
    </script>
    

    it uses localStorage, so it needs to be hosted, but that means it'll save your notes between visits... I have the long version of my simple html5 notepad app, which is a little beefier code-wise (there's a polyfil & css), but still butt-simple.

  • Portrait
    mopodo

    so so brilliant, just make it simple and stupid, finally i bookmark my black and white verion :->

    data:text/html; charset=utf-8, <style>html,body{margin:0; padding:0;}</style><textarea style="font-size:2em; font-family: source code pro; line-height:1.5em; background:18191A; color:azure; width:100%; height:100%; border:none; outline:none;margin:0;padding:150px;" autofocus placeholder="wake up mo..." spellcheck="false" />
    

  • Nenpetko_gmail.com_bbca7d97_normal
    creatifcode

    I'm making it as my default page from now on. :) Thanks for the tip.

  • E3ffbe22fb80d4dd9e350dc6363b1c97_2
    jessereese01

    This is very clever; I dig it. Thanks for the tip!

  • Thasmo-avatar.square_normal
    thasmo

    Really cool! :D

  • Blank-mugshot
    jjperezaguinaga

    @jakeonrails Quoting @jessereese01, this is very clever, I dig it. Smallest html5/css/js editor competition anyone?

  • Blank-mugshot
    knuck

    Reminds me of how you could do this in IE (up to 6 at least; last version I tried) by using about:html here

    I missed this feature a lot and am very happy I can just have html render on the fly again!

  • Blank-mugshot
    fabriziogiordano

    do you know if there is a mobile safari version of iOS?

  • Blank-mugshot
    nielsen

    Fantastic.

  • Blank-mugshot
    briznad

    @bgrins that is strange. i like it :)

  • Ce4c882936ebd405b145ed68c334bb16_normal
    toni_b

    This is fantastic, thanks for sharing

  • Blank-mugshot
    sabri

    Its really cool!

  • Blank-mugshot
    enadav

    Cool. Added the date ////data:text/html,

    ///

  • James2_normal
    fndtn357

    tres' kuhl, very useful

  • D61288ae-7e3f-4705-8c96-82208e621595_normal
    geckotang

    Cool! It's crazy. I love it.

  • Blank-mugshot
    dr-ubyx

    seems usefull.. .cool

  • 0_djkfemgv_w-dcvpisypzerqniebwcxsi7xkzev5bp7pmgrswtr8i6sawdxfn3zuf2otjbgucwd1w
    asgars

    Very cool. Bookmarked. Thanks.

  • Blank-mugshot
    oumu

    Plus a favicon maybe:

    data:text/html, <link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/><html contenteditable>
    

  • P2140090_normal
    8bitmore

    @oumu, yes, would be visually nice and faster to find in my bookmarks bar, anyone up for embedding favicon in base64 into 3lv1 version so fully local loading (i know will be cached from afar but.. the nerd power!)? Edit.. <a href="/3lv1">@3lv_1, what browser does your code work in again? Can't make it play along in neither firefox nor chrome

  • Blank-mugshot
    terrahertz

    Nice!
    Also this works as a parameter in the 'target' field of a Windows shortcut. Eg:
    opera.exe "data:text/html, <html contenteditable>"

    But, how to open an existing text/html file into this 'browser acting as a text editor' mode?
    I've always wished browsers could flip back and forth between editing html source as plain text, and viewing it as formatted html.
    Seems there's hope of this yet.

  • Default_profile_3_normal
    khakwani881

    Nice. Already Bookmarked. Venture of web development

  • Default_profile_5_normal
    abhishek2706

    Nice trick ....... I am going to bookmark it .........

  • 0_byd7x68inww1_q7vcxarx5csqu7o3qxvv4jrx58iiouaogesrsj_elqlvtf3cty9nxfligyyoke5
    tomasnikl

    it's cool.. thank you

  • Blank-mugshot
    binnings

    AS A SIDE NOTE to the above in Firefox 1) Bookmark it on the tool bar 2) Edit the Properties for the book mark 3) Set the 'Load this bookmark on the sidebar' 4) Save

  • Blank-mugshot
    joeheyming

    This is the better application of the data uri scheme: data:text/html; base64, PHNjcmlwdD5sb2NhdGlvbi5ocmVmPSJodHRwOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9b0hnNVNKWVJIQTAiOzwvc2NyaXB0Pg==

  • Gorda_bo_al_normal
    cptguapo

    Wow! Works like a charm here in my Opera. Very kewl!

  • Paul_normal
    paulnormannz

    Under windows at least in Chrome, Crtl B Crtl I and Crtl U work on highlighted text (Bold, Italic, Underline), and Crtl S will save for later retrieval - under what ever file name(s) you designate. Any one else know of any more Crtl sequences?

  • Blank-mugshot
    zaus

    Hm...seems Chrome throws security errors when trying to access localStorage from data-uri. Otherwise you'd just tack on:

    <script>(function(b,l,k){b.innerHTML=l.getItem(k);b.addEventListener("keypress",function(e){l.setItem(k,b.innerHTML)},false)})(document.body,localStorage,"bkmlt.ntpd")</script>
    

  • Blank-mugshot
    zaus

    @paulnormannz whoa, font styles! ctrl+s doesn't actually save the content for me, just the blank datauri page.

  • Blank-mugshot
    nicomen

    Just use opera, it has Notes window builtin

  • Headshot1_normal
    ryanseddon

    Cool I did something similar a while back that gave you a live preview.

    https://gist.github.com/1044282

  • Ava_256
    drabiter

    Never saw 1000 votes protip before. This one worth it :)

  • Paul_normal
    paulnormannz

    @zaus Ok, I'm using Chrome Version 26.0.1398.0 Canary, under Wondows Xp SP3

    Actually this has taken of for us here for quickly gathering snippets - In Chrome Google Canary Open a tab as editor---from book mark- drag it off to other screen. Drag/ Copy and Paste into it snippets and useful stuff of other web pages (and their http://-s)

    Crtl-S and save (as complete web page) some where (just a temp project folder). Fom bookmark make a new 'editor' page when needed rather than everything in one 'editor'.

    When ready, use Sigil to import these pages (from temp project folder) into a new (or existing) ePub.

    Create or make some lines into Headings then use Sigil's auto TOC maker, save as ePub for personal reference. (I'm using Cailbre for reading/organising ePub-s)

    By opening the 'editor' Crtl-S-ed html files in Sigil, and not trying to just paste into Sigil (it uses webkit so almost responds well enough to Chrome copy/pastes), you'll get more of the original formatting images', tables' placements etc... that's where this simple in browser editor is so useful in gathering snippets and saving to disk - for those that works for :)

    https://code.google.com/p/sigil/ http://calibre-ebook.com

  • Blank-mugshot
    samsonjs

    I guess I'm late to the game but here's my 15 minute hack for persistent notes using local storage: http://samhuri.net/f/note.html

  • Blank-mugshot
    tylerlong

    I hope that I am not too late. I created a chrome extension: https://chrome.google.com/webstore/detail/editor-in-chrome/kekmncaadcnnngadocpbcfaaaldklmnd

  • Vladimir_carrer_normal
    vladocar

    Hi I couldn't resist not make this: http://www.vcarrer.com/2013/01/writability-write-in-your-browser.html

    Thanks!

  • Blank-mugshot
    ezysetup

    I love the code that displays the save button and launches a save dialog. But the save dialog (at least with FF) doesn't allow the file to be saved as anything other than an 8 character name followed by the "part" extension, and it only saves to the default download location.

    Is there any way to call the 'save.as' dialog where the file name, extension, and location may be selected by the user? If so, it would make a great tool even better.

    Thanks in advance, Andrew

    PS: And will it work in IE? If so, how, as I'm not getting it.

  • Wiz1_normal
    wizdude

    @terrahertz firefox already gives you the ability to edit HTML of a page on the fly. I just did it now on this page and edited some text via HTML and viewed the changes. It's called "Inspect" and it's under the Web Developer menu. Control-Shift-I is the shortcut. cheers.

  • Blank-mugshot
    madcampos

    trivia: it works because of our loved hated IE, it was first implemented in IE (in a bugged weird way), than firefox simplified it, then chrome implemented and then html5 made it a standard. awesome!

  • Bigstockphoto_red_christmas_balls_on_green_b_2168599_normal
    dublinnomad

    The best ideas are usually the simplest.... so long TextEdit!!

  • Blank-mugshot
    al3xy

    this is brilliant !

  • 91c5ef1820a6d9f6eb47047a27076f1a_normal
    iconify

    @chinchang Thanks. Perfect use case for that, I think. :-)

  • Blank-mugshot
    chriskoch

    With the same idea in mind I've developed this notepad http://memo-pad.appspot.com

  • Bee_normal
    maryis2busy

    my autofocus bookmark:

    data:text/html, <html contenteditable> <script>document.documentElement.focus();</script>

  • 50683355c62338d23b345a8377428283_normal
    sjg999

    @iconify Well done! Very nice! =D

  • 91c5ef1820a6d9f6eb47047a27076f1a_normal
    iconify

    @sjg999 Thanks.

  • Hugotorresyfamilia_normal
    hugotorreslinar

    so cool

  • Drupal-logo_1_
    donutdan4114

    @jasecoop I actually use http://a5.gg/ every day for taking quick notes and keeping track of my timesheet. Thanks!

  • Profil_milosmatic
    milos_matic

    Awesome!

  • Blank-mugshot
    chrissimpkins

    Great thread!

  • Blank-mugshot
    joplomacedo

    pretty... pretty... pretty... pretty.... pretty good.

  • Blank-mugshot
    joplomacedo

    pretty... pretty... pretty... pretty.... pretty good.

  • Blank-mugshot
    softcadbury

    I made my own notes system using cookies a few months ago : http://romain.parage.free.fr/notes/ You can add a note with right click

  • Blank-mugshot
    hendriono

    thanks...

  • Blank-mugshot
    angelbotto

    jajaja nice trip.

  • 0_oz05knnlxizcluaukasnkqfjxd8clf7uyqivkqchr2ntmwzrt1fwon_aobhg-hmb09juwpwrdjbu
    saif_cse

    really nice!

  • Blank-mugshot
    danisanti

    Awesome! Minimal notepad editor, and it is easily forkable, customizable, ... Thanks! /DaniSanti.com

  • Ff181fa87f9981e26f2c9388eef1310a_normal
    jackc2743

    Has anybody tried this on a Chromebook?

  • 519fb76548875.preview-620
    carleasr

    Brilliant! No more extensions needed. Thanks :)

  • Blank-mugshot
    kingofhawks

    Wow, great post!

  • Blank-mugshot
    kokareff

    Great shit, thanks)

  • 00amol_nypost_thumb1000_normal
    amolsarva

    I prefer http://knotable.com for obvious reasons

  • Blank-mugshot
    wilk

    Good tip!

    I made a version for Javascript editor with ACE, as @jakeonrails did: in particular it lets you to execute the written code through CTRL + SHIFT + Y shortcut.

    https://gist.github.com/wilk/7908404

  • Blank-mugshot
    mamal72

    Awesome. Love it. Thanks. <3

  • E
    mbahor

    Here is mine http://pastebin.com/0jdqrPyk

    Save it as htm file somewhere.

    Click on top left + to add note above current note.

    Click on bottom left + to add note under current note.

    Click x on the right to delete the note.

    Save to localstorage with CTRL+S or CMD+S on mac.

    When the notes are not save the background is red and the page title is "Unsaved"

  • Blank-mugshot
    nunull

    I have created a styled version using localStorage which has the ability to download the contents.

    https://gist.github.com/nunull/8807030

  • My-face
    draperer

    awesome stuff. thanks!

  • Blank-mugshot
    omidraha

    Noscript disable that by default:

    javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks. Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference.

  • Blank-mugshot
    mackaber

    This is awesome, when you have something like a Chromebook

  • Blank-mugshot
    mackaber

    This is awesome, when you have something like a Chromebook

Add a comment