Browser Scratch Pad


There's a well-known trick to turn a browser into an editor using a data URL:

data:text/html, <html contenteditable>

This provides a surprising amount of functionality: it supports plain text just fine, as well as emojis and UTF-8. It also supports dragging/dropping images, and even pasting images from the clipboard.

But I tend to use fullscreen apps, and this uses the full width of the display, which makes reading/writing the text cumbersome. When I paste images that are large, they get cut off on the right side. I also need larger text these days, so I decided to see if I could add a bit of CSS to clean things up. It turns out this works fairly nicely!

data:text/html,<html contenteditable><style>html{max-width:38rem; padding:2rem;margin:auto;font-size:125%;}img{max-width:100%}</style></html>

This URL is easy to bookmark, allows you to take notes and paste images/screenshots, and supports printing to PDF if you want to archive or share your work. Beautifully convenient, and requires nothing other than a browser. 💯