Skip to content

Take notes wherever you are from your browser, saved as HTML files.

  1. In the browser's address bar type: 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>
  2. Alternative (text-only): 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>
  3. Save as .html on the filesystem.
  4. Bookmark the file from the filesystem for future references.

References