Try it: https://deftio.github.io/quikdown/pages/edit/
What makes it more than another parser is that fenced blocks render inline — Mermaid diagrams, MathJax, syntax-highlighted code, SVG, CSV → tables, charts — and still round-trip back to Markdown.
Originally I built it for a human and an LLM editing the same document: the model emits Markdown with diagrams and code, you see it rendered, you both keep editing the same source, and a programmatic undo stack lets you roll back when the model makes a mess.
Fences: The editor ships with built-in renderers for syntax-highlighted code (highlight.js), Mermaid diagrams, MathJax equations, inline SVG, CSV/TSV/PSV → tables, GeoJSON → Leaflet maps, STL → Three.js 3D viewer, ABC → sheet music, and Vega/Vega-Lite charts. Fences round-trip to equivalent Markdown (normalized, not byte-for-byte — incidental whitespace and comments inside a fence may not survive exactly). For text-like fences (code, CSV/TSV tables) you can edit either side; for diagrams and equations you edit the source and the render follows. Custom fence handlers are a small callback API.
Bidirectional editing: quikdown_bd adds HTML → markdown conversion. Edit the preview side and get markdown back. It's tuned for quikdown's own HTML, not arbitrary HTML pasted from the web.
Programmatic undo/redo: The editor has a configurable undo stack (default 100 states). This matters when you have LLMs writing into the same document — agents make mistakes, and editor.undo() lets you roll them back without losing context. It's also exposed as an MCP tool.
Headless mode: showToolbar: false gives you a pure API — setMarkdown(), getMarkdown(), undo(), redo(), setTheme(), setMode(). Wire it to your own UI or let an agent drive it.
The editor lazy-loads fence libraries from CDN by default (~100 KB initial). There's also a standalone build (~7.7 MB / ~1 MB gzipped) that bundles everything for offline use.
Other things that might be of interest:
- Escapes all HTML by default — no eval, no dynamic regex, URL sanitization blocks javascript:/vbscript:/non-image data: URIs. Fence plugins are trusted extension points, so any HTML a plugin returns is the plugin's job to sanitize.
- Parser architecture is a four-phase pipeline (extract code → escape HTML → line-scan blocks → restore) — no AST in the core HTML path.
- AST/JSON/YAML output modules if you need structured data instead of HTML.
- MCP server with 24 tools for AI agent integration (headless parsing, filesystem ops, editor control).
- Streaming-friendly — I re-parse the whole buffer on every incoming chunk rather than maintaining incremental parser state; it's the naive approach, but it's held up fine at token-rate streaming in my testing (no formal benchmarks).
- Copy-as-rich-text puts the rendered preview on the clipboard — diagrams and charts are rasterized to PNG on the fly, so they paste cleanly into Google Docs, Gmail, and MS Word.
- Works in Node and browser, TypeScript definitions included.
It intentionally doesn't cover full CommonMark — definition lists and some edge-case syntax are omitted, though reference-style links and footnotes are opt-in.
Longer write-up: https://deftio.github.io/quikdown/pages/blog/
deftio•2h ago
This past year I've built and maintained Quikdown, a bidirectional markdown parser and companion editor in pure js, with batteries included fences for rendering rich content.
Try it live: https://deftio.github.io/quikdown/pages/edit/
The motivation was working with many different LLM frameworks and wanting to test tool calling and collaborative editing. Often I just wanted a pretty final output with rich support for diagrams, math, or other rendered content but, keep it editable. So a user (often me) could just work on the final (rendered) output while the LLM could see/seek/update/edit just using markdown under the covers. Quikdown editor supports md/split/rendered output and can run headless so you can bring your own UI. MCP support is included as well.
The Quikdown parser has zero dependencies and is based on regex and outputs HTML with built-in tags for triggering plugins for fences (like Mermaid, Vega-lite, code syntax, music and many more). A separate set of attributes allow tracking of bidirectional content so a user can edit markdown tables, code rendered in highlightjs and many other types in the rendered view. For complex rendered types (like Mermaid or STL) bidirectional support is not included but if you want to take that on there are hooks to support your own efforts.
While the parser has no dependencies , the editor lazy-loads appropriate libraries for rendering rich content. Supported fences include: Mermaid, MathJax, SVG, CSV/TSV/PSV tables, GeoJSON with live leaflet based pan-and-zoom, Sheet music (via ABC.js), Vega/Vegalite-charts, STL (via threejs), code highlighting (via highlightjs).
Also included is programmatic undo/redo - so if you are making a closed loop with another output service (LLM or some process) you can roll back content changes that were not desired.
All inline HTML is escaped by default - no eval() or other unsafe raw parsing of content is allowed and URL sanitization blocks script based urls. However if you are using the editor the plugins which render rich content are left to handle that content on their own and are hence "trusted".
Quikdown intentionally doesn't cover all of Commonmark compatibility - if you find some portion of the spec isn't covered that you need raise an issue or make a PR and I'll take a look.
A standalone "air-gapped" build is also provided so you can use quikdown locally with zero cloud support. The standalone build is about 8MB so not recommended for use in online applications.
Longer write-up: https://deftio.github.io/quikdown/pages/blog/