Learning ladder

Learn quikdown by building, one example at a time.

Five tracks. Twenty examples. From a 10-line "render markdown to HTML" snippet to a fully headless editor wired to your own app shell. Work top-to-bottom or jump in anywhere.

1

Parser — quikdown core

14.9 KB · zero deps · XSS-safe

Start here if you only need to render markdown to HTML — chat messages, blog posts, README previews, LLM output. The parser is the smallest layer of the stack: a single function that takes a markdown string and returns safe HTML. These four examples walk you from a five-line "hello world" to a custom fence plugin and runtime themes.

Example 1

Hello world

The bare minimum: import quikdown, render a markdown string into a div. One script tag, one function call.

~10 lines beginner
Example 2

Parser options

Toggle inline_styles, lazy_linefeeds, bidirectional, allow_unsafe_urls live.

~40 lines beginner
Example 3

Custom fence plugin

Implement fence_plugin to render a custom fence type. Shows the signature and how to fall through.

~50 lines intermediate
Example 4

Themes & emitStyles

Use quikdown.emitStyles() to generate CSS for light and dark themes. Classes vs inline styles.

~30 lines intermediate
2

Bidirectional — quikdown_bd

19.8 KB · HTML ↔ Markdown

Move up a layer when you need to go both directions: render markdown to HTML, let the user edit the HTML in a contenteditable region, then convert it back to markdown. quikdown_bd annotates the HTML with data-qd-* attributes so the round trip preserves formatting, fences, and tables. This is the engine behind quikdown_edit — and you can build your own editor on top of it.

Example 5

Round-trip basics

Markdown → HTML → edit in contenteditable → toMarkdown(). Three side-by-side panes.

~50 lines beginner
Example 6

Reverse fence handlers

Fence plugin with both render and reverse for round-trip preserving custom fences.

~70 lines intermediate
Example 7

Tables & fences round-trip

A pre-built document with table, code, lists. Edit; reverse-convert; verify the source rebuilds.

~30 lines intermediate
3

Editor — quikdown_edit

99.9 KB · drop-in or headless

The full markdown editor as a drop-in component. Live preview, contenteditable bidirectional editing, fence plugins for code, SVG, Mermaid, MathJax, CSV/TSV/PSV, GeoJSON, and STL. Toolbar, themes, undo/redo, keyboard shortcuts. Or run it headless with showToolbar: false and wire your own UI to the public API. The API playground example proves every public method is callable from code — the toolbar is just sugar.

Example 8

Five-line embed

The minimal drop-in: import the editor, give it a div, you're done. No build setup.

~10 lines beginner
Example 9

Headless mode ★ killer

showToolbar: false. Custom UI wired to public API methods. The way to integrate the editor into your app shell.

~120 lines advanced
Example 10

API playground ★ showcase

Every public API method as a button with live console log. Proves the editor is fully drivable from code.

~200 lines advanced
Example 11

Custom fences in editor

Add a custom fence type via customFences. Example: a chart fence that renders a styled bar chart.

~80 lines advanced
Example 12

Runtime theme switching

setTheme('dark') at runtime. Honors system preference in auto mode.

~40 lines beginner
4

Integrations — real-world use

how it fits in your stack

How quikdown plays with other tools. Real-world patterns: rendering markdown inside an LLM chat widget, streaming markdown into the editor as tokens arrive, agent tool calling that reads and writes the document canvas, and wrapping the editor in a React or Vue component. The LLM examples are interactive — the React and Vue ones are documented patterns ready to copy into your project.

Example 20

MCP Path B — doc copilot (Node + browser)

Cursor MCP via start-mcp.js: Node bridges stdio to QuikdownEditor in a browser tab. You edit in the browser; the agent uses 24 MCP tools including render export. See examples/mcp-doc-host/.

MCP LLM editor Node
Example 19

AI Canvas — chat + document editor

Canvas-style editing: inline chat UI + QuikdownEditor with simulated and live LLM modes. Bring your own API key for OpenAI, Groq, Together, OpenRouter, or Ollama — or use simulated mode with no key.

interactive LLM editor BYOK
Example 17

LLM tool editor — chat + document canvas

quikchat widget + QuikdownEditor + simulated agent tools (read_editor, write_editor, undo, stats). Same pattern as function calling — no API key required.

interactive LLM editor
Example 18

Streaming into the editor

Simulate LLM tokens filling QuikdownEditor — the artifact viewer pattern. Re-call setMarkdown(buffer) on every chunk; fences render as the document grows.

interactive LLM editor
Example 13

quikchat — markdown in LLM chats

How quikchat uses quikdown to render fenced markdown in chat bubbles. Themable, lightweight. Includes a live simulated-chat demo.

interactive real-world
Example 16

Streaming LLM output (parser-only)

Render markdown chunks as they arrive from an LLM into a div via quikdown(buffer). Re-parse on every chunk — fast enough you can't see it. Live simulated stream.

interactive
Example 14

React integration

Wrap QuikdownEditor in a React component. Both the parser-only and full-editor patterns.

code only
Example 15

Vue integration

Same patterns in Vue 3 idiom: v-html, ref, onMounted.

code only
⚡

Standalone — offline editor

zero network dependencies

A single-file editor bundle (~7.7 MB minified, ~1.0 MB gzipped) with all fence renderers built in: highlight.js, Mermaid diagrams, DOMPurify HTML sanitization, Leaflet GeoJSON maps, Three.js STL 3D rendering, ABCJS music notation, Vega/Vega-Lite charts, and MathJax equations. No CDN requests, no lazy loading — works fully offline and in air-gapped environments.

Standalone

Try the offline editor

The full editor with all fence types pre-loaded. Syntax highlighting, Mermaid diagrams, SVG, CSV tables, JSON, and HTML fences — all rendering instantly with no network delay.

interactive offline
Docs

Standalone documentation

Bundle contents, file sizes, usage patterns (ESM and UMD), build instructions, and when to use standalone vs. the regular lazy-loading editor.

reference