Show HN: Quikdown – 17 KB bidirectional Markdown parser and rich-fence editor
github.comHi HN — I built Quikdown, a ~17 KB (6.5 KB gzipped), zero-dependency Markdown parser plus a drop-in split-view editor: Markdown source on one side, rendered output on the other, edit either side and get Markdown back.
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/