Round-trip basics

Three panes, one document

The complete code

<script type="module">
  import quikdown_bd from 'https://unpkg.com/quikdown/dist/quikdown_bd.esm.min.js';

  const src     = document.getElementById('src');
  const preview = document.getElementById('preview');
  const back    = document.getElementById('back');

  // Markdown → HTML
  function renderForward() {
    preview.innerHTML = quikdown_bd(src.value);
    renderBack();
  }

  // HTML → Markdown
  function renderBack() {
    back.textContent = quikdown_bd.toMarkdown(preview);
  }

  src.addEventListener('input', renderForward);
  preview.addEventListener('input', renderBack);
</script>

How it works

When bidirectional: true is set (which quikdown_bd sets by default), the parser adds data-qd-* attributes to the rendered HTML. These attributes record the original markdown syntax for each element — the fence marker, the list bullet character, the heading prefix, etc.

When you call quikdown_bd.toMarkdown(htmlOrElement), it walks the DOM, reads those attributes, and reconstructs markdown that round-trips faithfully. Edit the rendered preview directly (text changes, deleted nodes, drag-and-drop) and the next reverse-conversion picks up the edits.

That's how the full quikdown_edit editor works under the hood — and you can build the same thing in your own app with just quikdown_bd if you want full control over the UI.