Skip to content

Instantly share code, notes, and snippets.

@clisamurai
Last active April 24, 2024 13:29
Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save clisamurai/1f355b6028c8b9d1836b4ca01f173244 to your computer and use it in GitHub Desktop.
Save clisamurai/1f355b6028c8b9d1836b4ca01f173244 to your computer and use it in GitHub Desktop.
A simple text editor in a bookmarklet

Nucleus

Nucleus is a plain-text editor hidden in a bookmarklet. It is fully responsive and supports all HTML5-supporting browsers. Nucleus is ultra-lightweight - it doesn't support any formating at all and saves itself along with your files when you save it. You can save Nucleus documents in PDF format by utilising the print-to-PDF functionality of your browser. It is also fully customizable and open-source - simply change the source code.

Requirements

  • An HTML5 compliant web browser

Installation

  1. Open a new tab in your browser
  2. Paste this code into the address bar: data:text/html, <html> <title>Nucleus</title> <style> body { font: 1.5rem/1.5 monospace; max-width: 60rem; margin: 0 auto; padding: 4rem; } @media screen and (max-width: 720px) { .hide { visibility: hidden; height: 5px; } } @media screen and (max-width: 620px) { .hide { height: 0px; } body { max-width: 100vw; padding: 0rem; margin: 10px; } } @media print { .hide { visibility: hidden; height: 0px; } body { padding: 0rem; } } </style> <body> <p class="hide"><b>Directions: </b> Press Ctrl/Cmd+S to save | Ctrl/Cmd + O to open | Ctrl/Cmd + P to print <br /> <small>You are viewing, editing or creating a document in Nucleus. There is no autosave functionality. Documents save as HTML files and can be opened in any modern browser.</small> </p> <h1 contenteditable style="font: large;" id="title">Title</h1> <div contenteditable style="height: 100%">Enter content here...</div> <script type="text/javascript"> document.getElementById("title").addEventListener("input", function() { document.title = document.getElementsByTagName("h1")[0].innerText; }, false); </script> </body> </html>
  3. Press enter
  4. Save as a bookmark or desktop shortcut
@pwillia7
Copy link

Why not localstorage save?

@pwillia7
Copy link

Actually, if you just make it a textarea, it does it for you -- Here's my take:

data:text/html, <html> <title>Nucleus</title> <style> textarea{background%3A%23fbfbfb%3Bborder%3A0%3Bcolor%3A%23333%3Bfont-family%3Asans-serif%3Bfont-size%3A2rem%3Bheight%3A98%25%3Bline-height%3A1.4%3Bmargin%3A0%2520auto%3Boutline%3A0%3Bpadding%3A4rem%3Bwidth%3A100%25} body { font: 1.5rem/1.5 monospace; max-width: 60rem; margin: 0 auto; padding: 4rem; } @media screen and (max-width: 720px) { .hide { visibility: hidden; height: 5px; } } @media screen and (max-width: 620px) { .hide { height: 0px; } body { max-width: 100vw; padding: 0rem; margin: 10px; } } @media print { .hide { visibility: hidden; height: 0px; } body { padding: 0rem; } } </style> <body></p><textarea autofocus contenteditable style="height: 100%" placeholder="Enter content here..."></textarea> <script type="text/javascript"> document.getElementById("title").addEventListener("input", function() { document.title = document.getElementsByTagName("h1")[0].innerText; }, false); </script> </body> </html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment