Simple in-browser scratch pad with bookmark-based "saving." To use, copy and paste the this gist into your URL bar. Once loaded, you can save by dragging the link in the top left corner onto your bookmarks bar.

scratchpad.js

data:text/html,
  <!-- See https://gist.github.com/svincent/699c0a9027bb6bc8298b076e638718f1/edit -->
  <a id="link" title="Drag this link onto your bookmark bar to save!">save scratchpad</a>
  <div id="editor" contenteditable>Type something here!<div>To save, drag the link in the top right onto your bookmark bar.</div></div>
  <style>
    :root {
      --line-height: 1.5em;
    }

    * {
      line-height: var(--line-height);
      padding: 0;
      margin: 0;
    }

    #link {
      position: fixed;
      top: 0;
      right: 0;
    }

    #editor {
      margin-top: var(--line-height);
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      /* focus the editor so the user can start typing immediately */
      editor.focus();
    
      /* #link should only be a bookmarklet; it will fail if used as a link */
      link.addEventListener('click', e => e.preventDefault());

      /* magic sauce: make's #link's href match the content of this document for 'saving' */
      const genLinkHref = () => link.setAttribute('href', `data:text/html, ${document.documentElement.outerHTML}`);
      /* regenerate the href */
      document.addEventListener('input', genLinkHref);
      /* generate #link's href on load */
      genLinkHref();
    });
  </script>

minified version

data:text/html,
<div id="editor" contenteditable></div>
<style>:root{--line-height:1.5em}*{line-height:var(--line-height);padding:0;margin:0}#link{position:fixed;top:0;right:0}#editor{margin-top:var(--line-height)}</style>
<script>document.addEventListener("DOMContentLoaded",()=>{editor.focus(),link.addEventListener("click",a=>a.preventDefault());let a=()=>link.setAttribute("href",`data:text/html, ${document.documentElement.outerHTML}`);document.addEventListener("input",a),a()})</script>