A tiny markdown editor. Paste into your URL bar with `data:text/html,` at the front

mini-markdown.html

<style>
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid: none / 1fr 1fr;
    gap: 1rem;
  }
  %23i {
    outline: 0;
    padding: 1rem;
    font-family: Menlo, monospace;
    background: hsl(220, 10%, 20%);
    color: hsl(220, 10%, 94%);
  }
</style>
<div id="i" contenteditable></div>
<div id="o"></div>
<script type=module>
  import m from "https://unpkg.com/snarkdown@1.2.2/dist/snarkdown.es.js";
  let s = decodeURI(location.hash.slice(1));
  i.innerText = s;
  o.innerHTML = m(s);
  i.oninput = ({ target: { innerText: n } }) => {
    o.innerHTML = m(n);
    history.pushState(null, null, encodeURI(`%23${n}`));
  };
</script>

The pushState explodes in Firefox with a generic NS_ERROR_FAILURE, so I assume data URLs aren't supposed to mess with the hash fragment. If I load this as an actual HTML file instead Firefox just warns "SecurityError: The operation is insecure." 🤷‍♂️.

At least in works in Chrome?