Gulo

Gulo is a Markdown editor and renderer based on several ideas:

  1. CodeMirror uses a Markdown parser which produces a Lezer-style Abstract Syntax Tree: a tree of nodes with positions and types but no text content.
  2. Edits in CodeMirror are dispatched to the parser, so the syntax tree is incrementally updated.
  3. React can render the syntax tree into an iframe, converting each node to an appropriate HTML element and reading the relevant text from the editor state (and, in a separate pass, collecting all the cross-references and footnotes).
  4. Browsers have reasonable support for CSS Paged Media, particularly the @page selector.
  5. Chrome's "Save as PDF", via the print dialog, creates tagged PDF from well-structured input.
Gulo provides an interface for editing a .md file and a .css file, then merging the two outputs into an iframe which can be printed/saved to PDF.

I was hoping that the syntax nodes would be stable enough that React could memoise them and avoid needing to read the text content from the editor state on every render, but that doesn't appear to be the case.

Each HTML DOM element is associated with a position in the Markdown source, so a selection in the preview can be synced to a selection in the editor.

For a different angle (editing a single Markdown file, with inline comments and suggested changes), try Matt Webb's mist (blog post).