Quick In-Browser Text Editor - Edit and Save Text

By Andrew Davidson
on Nov. 29, 2022

I love my text/code editor applications on my laptop and use them almost daily; I'm currently using Panic's Coda 2 (discontinued) to do most of my HTML composing (self-closing tags FTW!), but will use an older install of Bare Bones BBEdit to do some serious text twiddling (especially with multi-file search and replaces - excellent on massive static web sites that require a header/footer change like mine!)

Alas, oftentimes these overpowered hundred-megabyte beasts are a bit much to boot up and start a new file to merely format some blurb of text copied haphazardly and destined for other uses. It turns out we've all been running a modest (and free) text editor all along! Copy and paste the snippet below into a new (desktop?) web browser tab:

data:text/html, <html contenteditable autofocus style=margin:2em;font-size:48px>

You should get a get a blinking text insert line, ready for your typing. I've made a few tiny style calls to make the text much larger and give a small margin to the window, so the type is not right up against the edge of the browser window. Save the link as a bookmark, and you can quickly pull up a new window to do some text manipulation (for me, it's usually removing tons of leading/following spaces used to format text-only emails that are trying to achieve table layouts.)


You'll find your browser's Command-S "Save" function works as you might expect, and will ask you to name your new saved file (it may demand you end it with .html). I'd also ensure you use the Format: 'Webpage, Complete' setting in your Save dialog box, otherwise, it'll dump the text content you just created and only save that boring snippet above.


Now your text is available inside the newly written-to HTML file (drag it into a browser to see it as saved!), and it's easy enough to strip the valuable typed text from the markup. Save early and often, although it'll ask you to resave under a new name with every attempt - the first sign this isn't a fully developed text editor.

I wouldn't compose my novel this way, but it's certainly an easy bookmarklet to keep in your browser bar (renamed to 'TextEdit', perhaps?) to give you quick access to a simple text editor! I'm curious to see what I can add to this innocuous browser feature (hack?) and see if I could link an external javascript to somehow save the data as a cookie in the same browser for no-file perma-saves! Offhand, I think cross-site scripting might prevent this, but I don't know if localhost counts. Check back or subscribe to our RSS as we'll announce updates here!