Self-Hosted In-Browser Text Drafting Area
You are writing a prompt for Claude and you press the enter key to add a new line but you end up sending the text. How annoying! Has it ever happened to you on Slack? On Discord?
As an engineer, I spend a lot of time writing text in different places: Slack, Discord, Google Docs, Sheets, GitHub comments, prompting LLMs, and sometimes even in the chat in Google Meets. Each tool handles the Enter key a little differently, sometimes it sends the message, sometimes it adds a new line. I’ve lost count of the times I pressed Enter expecting to start a new line, only to see the message being sent. It’s frustrating and disrupts my train of thought.
Since I write a lot, I have to draft a lot. Sometimes I end up drafting in Google docs, sometimes in Slack DM to myself, sometimes in VSCode, and so on. Since each tool has different UI, the drafting experience feels scattered.
To solve these problems, I created a simple HTML page that offers a
single, consistent text area for drafting. It’s nothing fancy; it’s just
a big <textarea>
that covers the entire viewport. The
text I enter is automatically saved to localStorage
, so
it’s preserved across browser restarts. I host this html file on a
subdomain of my personal website so it’s available anywhere, including
my phone.
I also added border for visual clarity, and a character/word/line counter. There’s also a copy button for grabbing the entire text.
I created this setup around July, 2024 and this minimal setup has brought a small but meaningful quality-of-life improvement in my daily workflow. I easily use this setup for drafting text 20-30 times a day.
The entire html file is present in this GitHub Gist. To see what this drafting area looks like, visit note.anandprashant.com.
Other than solving my problems described above, this setup has additional benefits:
- Works Across Machines: It’s just a static HTML page deployed on my own subdomain, it’s accessible from any machine - work laptop, personal desktop, or phone. Particularly useful during pair programming sessions or when helping family with tech issues.
- Privacy-Friendly: Although there are online notepads, I always get
suspicious if whatever I type is being sent somewhere else. Here I know
what’s happening under the hood because I wrote it. Nothing is sent
anywhere, no remote API calls, no analytics. Everything is stored
locally in the browser’s
localStorage
. - Quick Access and Fast Load: It’s a single HTML file that loads almost instantly. My browser is always open so easy to access as well.
- Mobile Utility: On some mobile apps (looking at you, Slack), copying part of a text is a pain. With this drafting page, I can just paste the entire text in, select whatever I need on my phone, and copy it out.
The few minutes spent in deploying this setup have saved me countless small frustrations across hundreds of daily text-editing interactions. Hopefully it can for you too!