quikdown is a simple markdown to HTML parser that supports fences
npm install quikdown



Quikdown is a small, secure markdown parser with bidirectional conversion. Zero dependencies, XSS protection built-in, extensible via plugins for code highlighting and diagrams, and works in browser and Node.js.
For small and fast projects quikdown includes built-in inline styles for a "batteries included" rendering experience, but these can be overridden with themed css (see light and dark examples).
- quikdown.js (9.0KB) - Markdown to HTML Parser with theme support, XSS protection, fence callbacks
- quikdown_bd.js (13.8KB) - Bidirectional (HTML ā Markdown) Parser
- quikdown_edit.js (68.0KB) - Drop-in editor component with live preview, copy-as-rich-text, and lazy-loaded fence handlers
š Live Demo | Editor Demo | Documentation
š Quick Links: Installation ⢠Quick Start ⢠API ⢠TypeScript ⢠Plugins ⢠Examples
- š¦ Zero dependencies - No external libraries required
- š Universal - Works in browsers and Node.js
- š Lightweight - 9.0KB (core), 13.8KB (bidirectional), 68.0KB (editor)
- š Secure by default - Built-in XSS protection with URL sanitization
- šØ Flexible styling - Inline styles or CSS classes with theme support
- š Plugin system - Extensible fence block handlers
- ā” Fast - Optimized regex-based parsing
- š CommonMark subset - Essential markdown features
- ā
Task Lists - GitHub-style checkboxes
- š Autolinks - Automatic URL detection
- š Bidirectional - Convert HTML back to Markdown (quikdown_bd)
- š¬ Lazy linefeeds - Single newlines become line breaks (configurable)
- š± Editor component - Drop-in markdown editor with live preview
Quikdown is available via NPM and related unpkg and jsdelivr
bash
npm install quikdown
`$3
CDN (ES Modules):
`html
`CDN (UMD):
`html
`Quick Start
Quikdown is built in 3 versions. The smallest (quikdown) provides markdown to html conversion only. The next (quikdown_bd) provides markdown to html and html to markdown support. The lightweight editor quikdown_edit allows a bidirectional editor with lazy loading for common fences such as codeblocks, svg, and mermaid diagrams is also provided.
$3
`javascript
// Basic conversion
const html = quikdown('# Hello World',
{inline_styles: true} // Use inline styles, more options in API docs
);document.body.innerHTML = html;
`$3
`javascript
// Convert with source tracking
const htmlString = quikdown_bd(markdown, options);// Convert HTML back to Markdown
const markdown = quikdown_bd.toMarkdown(htmlString);
`Note: quikdown does not provide a generic html to markdown conversion but uses special tags and limited DOM parsing for HTML to markdown conversion. Standard markdown components such as headings, text styles, tables, quotes, etc are supported. For custom fences quikdown relies on its tag system or 3rd party handlers to provide reverse (html to md) conversion.
$3
`javascript
const editor = new QuikdownEditor('#container', {
mode: 'split', // 'source', 'split', 'preview'
theme: 'auto', // 'light', 'dark', 'auto'
plugins: { highlightjs: true, mermaid: true } // built-in fence handlers, see API docs for custom plugins
});editor.setMarkdown('# Content \nTo be quik or not to be.'); // provide default content
const content = editor.getMarkdown(); // get source content, see APIs for getting / setting HTML
`Note: The editor automatically lazy-loads plugin libraries from CDNs when needed:
- highlight.js - Loaded when code blocks are encountered and
highlightjs: true
- mermaid - Loaded when mermaid diagrams are found and mermaid: true
- DOMPurify - Loaded when HTML fence blocks are rendered
- KaTeX - Loaded when math/tex fence blocks are encounteredThis keeps the initial bundle small while providing rich functionality on-demand.
Other Configuration Options
quikdown supports built-in styles for a "batteries included" experience or you can bring your own CSS themes. Example css files are provided for basic light and dark themes to get started.`javascript
const html = quikdown(markdown, {
lazy_linefeeds: true, // Single newlines become
inline_styles: false, // Use class based CSS instead of inline styles
fence_plugin: { // Custom code block processor (v1.1.0+ API)
render: myHandler // Function to render fence blocks
}
});
`$3
Inline styles: All formatting uses inline CSS
`javascript
quikdown('bold', { inline_styles: true });
// bold
`Class-based styling: Uses CSS classes (default)
`javascript
quikdown('bold');
// bold
// Requires CSS: .quikdown strong { font-weight: bold; }
// see included dist/quikdown.light.css or quikdown.dark.css
`$3
Quikdown provides a callback for all fenced text such as code blocks, math, svg etc.
Handle code blocks with custom languages:
`javascript
const fencePlugin = {
render: (code, language) => {
if (language === 'mermaid') {
// Process with mermaid library and return rendered diagram
const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
setTimeout(() => mermaid.render(id + '-svg', code).then(result => {
document.getElementById(id).innerHTML = result.svg;
}), 0);
return ;
}
// Return undefined for default handling
}
};const html = quikdown(markdown, { fence_plugin: fencePlugin });
`
TypeScript Support
quikdown includes TypeScript definitions for better IDE support and type safety:
`typescript
import quikdown, { QuikdownOptions, FencePlugin } from 'quikdown';const fencePlugin: FencePlugin = {
render: (content: string, language: string) => {
return
${content};
}
};const options: QuikdownOptions = {
inline_styles: true,
fence_plugin: fencePlugin
};
const html: string = quikdown(markdown, options);
`Supported Markdown
Text formatting:
bold, italic, ~~strikethrough~~, code Headings:
# H1 through ###### H6Lists:
- Unordered lists
1. Ordered lists
- [x] Task lists
Links:
text and automatic URL detectionCode blocks:
`javascript
console.log('syntax highlighting support via plugins');
`Tables, blockquotes, horizontal rules - See documentation for complete syntax reference
API Reference
For complete API documentation, see docs/api-reference.md
Security
All HTML is escaped by default. Only safe markdown constructs become HTML:
`javascript
const unsafe = ' bold';
const safe = quikdown(unsafe);
// <script>alert("XSS")</script> bold
`Framework Integration
Works with React, Vue, Svelte, Angular. See Framework Integration Guide for examples.
Limitations
For size and security, quikdown doesn't support:
- Reference-style links
- Footnotes
- Definition lists
Note that raw html, svg, etc can be rendered using appropriate fences
`html
My HTML Content
Some HTML
``BSD 2-Clause - see LICENSE.txt
- Inspired by the simplicity of early markdown parsers
- Built for the QuikChat project
- CommonMark spec for markdown standardization
- š Documentation
- š Issues
- š¦ Examples