If you're tired of switching tabs or apps just to jot down quick notes while browsing, this JavaScript bookmarklet tool is here to save the day. With a single click, it opens a sleek and responsive notepad directly on any webpage.
What Is a Bookmarklet?
A bookmarklet is a small JavaScript snippet saved as a browser bookmark. Unlike regular bookmarks that take you to web pages, bookmarklets perform specific tasks directly in your browser. They’re lightweight, practical, and incredibly easy to use.
Features of This Notepad Bookmarklet
This notepad bookmarklet tool offers several standout features:
1. Responsive Design
It adjusts seamlessly to your screen size, making it user-friendly on desktops, tablets, or smartphones.
2. Intuitive Interface
- Opens a draggable, minimalist notepad overlay with rounded corners and a “close” button.
- Designed for simplicity and ease of use.
3. Save Notes Locally
- Easily save your notes as a .txt file with a single click—no complicated steps required.
4. Customizable Appearance
- Modern look with rounded corners, shadows, and vibrant colors.
5. Quick and Non-Intrusive
- Works on any webpage without interrupting what you're currently viewing.
How to Set Up and Use It
Follow these simple steps to add and use this bookmarklet:
- Add the Bookmarklet
Copy the JavaScript code: - Create a Bookmark
Open your browser’s bookmarks manager. Add a new bookmark and paste the code into the “URL” field. Name it something like “Quick Notepad.” - Start Using It
Click the bookmark whenever you need a notepad overlay while browsing.
javascript:(function()%7B(function() %7Bvar overlay %3D document.createElement('div')%3Boverlay.style.position %3D 'fixed'%3Boverlay.style.top %3D '0'%3Boverlay.style.left %3D '0'%3Boverlay.style.width %3D '100%25'%3Boverlay.style.height %3D '100%25'%3Boverlay.style.background %3D 'rgba(0%2C 0%2C 0%2C 0.5)'%3Boverlay.style.zIndex %3D '9998'%3Bvar notepad %3D document.createElement('div')%3Bnotepad.style.position %3D 'fixed'%3Bnotepad.style.top %3D '50%25'%3Bnotepad.style.left %3D '50%25'%3Bnotepad.style.zIndex %3D '10000'%3Bnotepad.style.transform %3D 'translate(-50%25%2C -50%25)'%3Bnotepad.style.background %3D '%23ffffff'%3Bnotepad.style.border %3D '2px solid %230073e6'%3Bnotepad.style.borderRadius %3D '8px'%3Bnotepad.style.boxShadow %3D '0 4px 8px rgba(0%2C 0%2C 0%2C 0.1)'%3Bnotepad.style.padding %3D '10px'%3Bnotepad.style.fontFamily %3D 'Arial%2C sans-serif'%3Bvar isMobile %3D window.matchMedia('(max-width%3A 768px)').matches%3Bif (isMobile) %7Bnotepad.style.width %3D '100%25'%3Bnotepad.style.maxWidth %3D '90%25'%3B%7D else %7Bnotepad.style.width %3D '400px'%3B%7Dvar header %3D document.createElement('div')%3Bheader.style.padding %3D '8px'%3Bheader.style.color %3D '%2300000'%3Bheader.style.borderBottom %3D '1px solid %23000000'%3Bheader.textContent %3D 'Notepad'%3Bvar closeButton %3D document.createElement('span')%3BcloseButton.textContent %3D '✖'%3BcloseButton.style.float %3D 'right'%3BcloseButton.style.cursor %3D 'pointer'%3BcloseButton.style.marginRight %3D '5px'%3BcloseButton.onclick %3D function() %7Bdocument.body.removeChild(overlay)%3Bdocument.body.removeChild(notepad)%3B%7D%3Bvar textArea %3D document.createElement('textarea')%3BtextArea.style.width %3D '100%25'%3BtextArea.placeholder %3D 'Start typing ...'%3BtextArea.style.height %3D '160px'%3BtextArea.style.border %3D 'none'%3BtextArea.style.outline %3D 'none'%3BtextArea.style.resize %3D 'none'%3BtextArea.style.padding %3D '8px'%3BtextArea.style.fontSize %3D '16px'%3BtextArea.style.boxSizing %3D 'border-box'%3Bvar saveButton %3D document.createElement('button')%3BsaveButton.textContent %3D 'Save as .txt'%3BsaveButton.style.marginTop %3D '8px'%3BsaveButton.style.padding %3D '6px 12px'%3BsaveButton.style.background %3D '%230073e6'%3BsaveButton.style.color %3D '%23ffffff'%3BsaveButton.style.border %3D 'none'%3BsaveButton.style.borderRadius %3D '4px'%3BsaveButton.style.cursor %3D 'pointer'%3BsaveButton.onclick %3D function() %7Bvar blob %3D new Blob(%5BtextArea.value%5D%2C %7B type%3A 'text%2Fplain' %7D)%3Bvar link %3D document.createElement('a')%3Blink.download %3D 'notes.txt'%3Blink.href %3D URL.createObjectURL(blob)%3Blink.click()%3BURL.revokeObjectURL(link.href)%3B%7D%3Bvar footer %3D document.createElement('div')%3Bfooter.style.marginTop %3D '20px'%3Bfooter.style.borderTop %3D'1px solid %23000000'%3Bfooter.style.paddingTop %3D'12px'%3Bfooter.style.fontSize %3D '12px'%3Bfooter.style.textAlign %3D 'center'%3Bfooter.style.color %3D '%23555'%3Bfooter.innerHTML %3D 'Designed %26 Developed by <strong>Anupam<%2Fstrong>'%3Bheader.appendChild(closeButton)%3Bnotepad.appendChild(header)%3Bnotepad.appendChild(textArea)%3Bnotepad.appendChild(saveButton)%3Bnotepad.appendChild(footer)%3Bdocument.body.appendChild(overlay)%3Bdocument.body.appendChild(notepad)%3B%7D)()%7D)()
Who Can Use This?
This bookmarklet is perfect for:
- Writers and Bloggers: Jot down ideas or notes as you research online.
- Students: Take notes without opening additional apps or tabs.
- Developers: Track debugging notes or brainstorm ideas right on the spot.
Why Choose This Over Other Options?
Unlike browser extensions or external apps, this bookmarklet:
- Doesn’t require any installation or special permissions.
- Works immediately on any device or browser.
- Is simple and easy to customize to fit your style.
Final Thoughts
This JavaScript bookmarklet is a quick, powerful tool for anyone who wants easy access to a notepad while browsing. It’s intuitive, functional, and a great way to boost your productivity. Give it a try—you’ll wonder how you ever managed without it!