How to Turn A Chrome or Firefox Browser Tab Into a Handy Notepad

Jim Dee
Jim Dee
Dec 13, 2019 · 3 min read

Do you ever find yourself needing to type up a few notes to keep handy for just a few minutes? Maybe you want to make a grocery list or a list of links, or jot down a temp username/password pair, or… whatever! I find myself in that situation about 20x per day.

Sure, you could pull up a notepad or maybe a blank email. But, for many years now, I’ve done something else instead. So, without further adieu, here’s a little trick that is so profoundly simple, yet (for me) useful on a daily basis.

Copy the following code and paste it directly into your browser’s address bar:

data:text/html, <html style="background:rgb(108, 108, 29); padding:15px;" contenteditable><title>NOTEPAD</title><body><div style="text-align:center;"><textarea style="font-size:20px;width:90%; height:99%;padding:20px;border: 10px solid black;border-radius:10px;">NOTEPAD....</textarea></div></body>

… and voila! You now have a workable notepad, as shown below. I recommend bookmarking it so that you can get there in one click from now on.

Image for post
Image for post

Keep in mind that this is a temporary thing. It’s not auto-saved in the same way that, say, a Gmail draft email might be. So, it’s not a great solution for super-important notes. (I’ve made the mistake a few times of keeping fairly important notes there, and then the computer shuts down or something … and boom, you’re out of luck!)

Pro tip: If you *do* happen to accidentally close a tab with your notes, and you still have other tabs open (meaning Chrome or Firefox is still open), you can usually get your notes back by using Control + Shift + T (which restores the latest closed tab).

Simpler version? You can also fool around with the HTML in that code, if you like. For example, if you need to print your notes a lot (which I do not), you may want to get rid of that green background and/or even the box border. For example, this code…

data:text/html, <html style="padding:15px;" contenteditable><title>NOTEPAD</title><body><div style="text-align:center;"><textarea style="font-size:20px;width:90%; height:99%;padding:20px;"></textarea></div></body>

… renders a simpler version, like so:

Or, if you really want to get minimalist, try …

data:text/html, <html contenteditable>

… which renders:

Image for post
Image for post

I know it seems kind of dumb, as it’s easy to open a notepad or a draft email. But, at least for me (as a web developer), I have tons of browser tabs open all day. So I find this easier and few seconds faster than anything else.

Not sure where I first learned this … possibly on this site, tough, which has tons of examples and alternate versions contributed in the comments! (Sorry for any Microsoft Edge users. This trick won’t work for you!)

✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various Medium.com publications. Find him at JPDbooks.com, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] ArrayWebDevelopment.com. His latest novel, CHROO, is available on Amazon.com. If you enjoy humorous literary tales, please grab a copy!

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design /…

Sign up for Array Observations

By Web Designer / Web Developer Magazine

Sign up for alerts when new web design / web development (and related) articles appear on this site. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Jim Dee

Written by

Jim Dee

Web guy at ArrayWebDevelopment.com; author of books & blogs. See: JPDbooks.com.

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.

Jim Dee

Written by

Jim Dee

Web guy at ArrayWebDevelopment.com; author of books & blogs. See: JPDbooks.com.

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store