Learning ladder

Learn quikdown by building, one example at a time.

Four tracks. Sixteen 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

9.8 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

14.6 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

84.3 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 chunks token-by-token from an LLM API, and wrapping the editor in a React or Vue component. The chat and streaming examples are interactive — the React and Vue ones are documented patterns ready to copy into your project.

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

Render markdown chunks as they arrive from an LLM. Re-parse the buffer 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 (~3.8 MB minified) with all fence renderers built in: highlight.js, Mermaid diagrams, DOMPurify HTML sanitization, Leaflet GeoJSON maps, and Three.js STL 3D rendering. 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