{"id":31109411,"url":"https://github.com/deftio/quikdown","last_synced_at":"2026-04-11T17:11:09.516Z","repository":{"id":310181746,"uuid":"1038686360","full_name":"deftio/quikdown","owner":"deftio","description":"Fast, secure markdown parser with bidirectional HTML conversion, plugin system, and live editor.    Zero dependencies, XSS-safe by default. 9KB core.","archived":false,"fork":false,"pushed_at":"2025-09-14T07:16:15.000Z","size":4302,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-16T14:15:21.093Z","etag":null,"topics":["bidirectional","html-to-markdown","markdown","markdown-converter","markdown-editor","markdown-html","markdown-parser","markdown-previewer","markdown-to-html","markdown-to-html-converter","markdown-viewer","no-dependencies","zero-dependencies","zero-dependency"],"latest_commit_sha":null,"homepage":"https://deftio.github.io/quikdown/examples/quikdown-live.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deftio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-15T16:40:13.000Z","updated_at":"2025-09-14T07:15:54.000Z","dependencies_parsed_at":"2025-08-16T10:37:51.513Z","dependency_job_id":null,"html_url":"https://github.com/deftio/quikdown","commit_stats":null,"previous_names":["deftio/quikdown"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/deftio/quikdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deftio","download_url":"https://codeload.github.com/deftio/quikdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275549743,"owners_count":25484687,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-17T02:00:09.119Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bidirectional","html-to-markdown","markdown","markdown-converter","markdown-editor","markdown-html","markdown-parser","markdown-previewer","markdown-to-html","markdown-to-html-converter","markdown-viewer","no-dependencies","zero-dependencies","zero-dependency"],"created_at":"2025-09-17T07:00:32.391Z","updated_at":"2026-04-11T17:11:09.510Z","avatar_url":"https://github.com/deftio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quikdown\n\n[![CI](https://github.com/deftio/quikdown/actions/workflows/ci.yml/badge.svg)](https://github.com/deftio/quikdown/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/quikdown.svg)](https://www.npmjs.com/package/quikdown)\n[![Coverage](https://img.shields.io/badge/coverage-95.3%25-brightgreen)](https://github.com/deftio/quikdown)\n[![License: BSD-2-Clause](https://img.shields.io/badge/License-BSD%202--Clause-blue.svg)](https://opensource.org/licenses/BSD-2-Clause)\n[![Bundle Size](https://img.shields.io/badge/minified-9.3KB-green.svg)](https://bundlephobia.com/package/quikdown)\n\nQuikdown 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.\n\nFor 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).\n\n- **quikdown.js** (9.3KB) - Markdown to HTML Parser with theme support, XSS protection, fence callbacks\n- **quikdown_bd.js** (14.1KB) - Bidirectional (HTML ↔ Markdown) Parser\n- **quikdown_edit.js** (80.0KB) - Drop-in editor component with live preview, copy-as-rich-text, and lazy-loaded fence handlers\n- **quikdown_ast.js** - Markdown to AST (Abstract Syntax Tree) Parser\n- **quikdown_json.js** - Markdown to JSON conversion\n- **quikdown_yaml.js** - Markdown to YAML conversion\n- **quikdown_ast_html.js** - AST/JSON/YAML to HTML renderer\n\n🚀 **[Live Demo](https://deftio.github.io/quikdown/examples/quikdown-live.html)** | **[Editor Demo](https://deftio.github.io/quikdown/examples/qde/)** | **[Documentation](docs/)**\n\n📍 **Quick Links:** [Installation](#installation) • [Quick Start](#quick-start) • [API](#api-reference) • [TypeScript](#typescript-support) • [Plugins](#fence-plugins) • [Examples](examples/)\n\n## Features\n\n- 📦 **Zero dependencies** - No external libraries required\n- 🌐 **Universal** - Works in browsers and Node.js\n- 🚀 **Lightweight** - 9.3KB (core), 14.1KB (bidirectional), 80KB (editor)\n- 🔒 **Secure by default** - Built-in XSS protection with URL sanitization\n- 🎨 **Flexible styling** - Inline styles or CSS classes with theme support\n- 🔌 **Plugin system** - Extensible fence block handlers\n- ⚡ **Fast** - Optimized regex-based parsing\n- 📝 **CommonMark subset** - Essential markdown features\n- ✅ **Task Lists** - GitHub-style checkboxes\n- 🔗 **Autolinks** - Automatic URL detection\n- 🔄 **Bidirectional** - Convert HTML back to Markdown (quikdown_bd)\n- 💬 **Lazy linefeeds** - Single newlines become line breaks (configurable)\n- 📱 **Editor component** - Drop-in markdown editor with live preview\n\n## Installation\n\nQuikdown is available via [NPM](https://www.npmjs.com/package/quikdown) and related [unpkg](https://unpkg.com/quikdown) and [jsdelivr](https://cdn.jsdelivr.net/npm/quikdown)\n\n### NPM package\n```bash\nnpm install quikdown\n```\n\n### CDN using UNPKG  \n\n**CDN (ES Modules):**\n```html\n\u003cscript type=\"module\"\u003e\n  import quikdown from 'https://unpkg.com/quikdown/dist/quikdown.esm.min.js';\n  document.body.innerHTML = quikdown('# Hello World');\n\u003c/script\u003e\n```\n\n**CDN (UMD):**\n```html\n\u003cscript src=\"https://unpkg.com/quikdown/dist/quikdown.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  document.body.innerHTML = quikdown('# Hello World');\n\u003c/script\u003e\n```\n\n## Quick Start\n\nQuikdown 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.\n\n### Markdown → HTML (quikdown.js)\n\n```javascript\n// Basic conversion\nconst html = quikdown('# Hello World',\n    {inline_styles: true}  // Use inline styles,  more options in API docs\n);\n\ndocument.body.innerHTML = html;\n\n```\n\n### Bidirectional Markdown ↔  HTML (quikdown_bd.js)\n\n```javascript\n// Convert with source tracking\nconst htmlString = quikdown_bd(markdown, options);\n\n// Convert HTML back to Markdown\nconst markdown = quikdown_bd.toMarkdown(htmlString);\n```\n\nNote: 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.\n\n### Editor (quikdown_edit.js)\n\n```javascript\nconst editor = new QuikdownEditor('#container', {\n  mode: 'split',           // 'source', 'split', 'preview'\n  theme: 'auto',           // 'light', 'dark', 'auto'\n  plugins: { highlightjs: true, mermaid: true } // built-in fence handlers, see API docs for custom plugins\n});\n\neditor.setMarkdown('# Content  \\nTo be quik or not to be.');  // provide default content\nconst content = editor.getMarkdown(); // get source content, see APIs for getting / setting HTML\n```\n\n### AST Libraries (quikdown_ast, quikdown_json, quikdown_yaml)\n\nConvert markdown to structured data formats for programmatic manipulation:\n\n```javascript\nimport quikdown_ast from 'quikdown/ast';\nimport quikdown_json from 'quikdown/json';\nimport quikdown_yaml from 'quikdown/yaml';\nimport quikdown_ast_html from 'quikdown/ast-html';\n\nconst markdown = '# Hello\\n\\nWorld **bold**';\n\n// Markdown → AST object\nconst ast = quikdown_ast(markdown);\n\n// Markdown → JSON string\nconst json = quikdown_json(markdown);\n\n// Markdown → YAML string\nconst yaml = quikdown_yaml(markdown);\n\n// AST/JSON/YAML → HTML\nconst html = quikdown_ast_html(ast);  // or pass json/yaml string\n```\n\nThe AST parsers are \"forgiving\" - they handle malformed markdown gracefully without throwing errors. See [AST Documentation](docs/quikdown-ast.md) for the complete node type reference.\n\n**Note:** The editor automatically lazy-loads plugin libraries from CDNs when needed:\n- **highlight.js** - Loaded when code blocks are encountered and `highlightjs: true`\n- **mermaid** - Loaded when mermaid diagrams are found and `mermaid: true`\n- **DOMPurify** - Loaded when HTML fence blocks are rendered\n- **KaTeX** - Loaded when math/tex fence blocks are encountered\n\nThis keeps the initial bundle small while providing rich functionality on-demand.\n\n## Other Configuration Options\nquikdown 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.\n\n```javascript\nconst html = quikdown(markdown, {\n  lazy_linefeeds: true,    // Single newlines become \u003cbr\u003e\n  inline_styles: false,    // Use class based CSS instead of inline styles\n  fence_plugin: {          // Custom code block processor (v1.1.0+ API)\n    render: myHandler      // Function to render fence blocks\n  }\n});\n```\n\n### Styling Options\n\n**Inline styles:** All formatting uses inline CSS\n```javascript\nquikdown('**bold**', { inline_styles: true });\n// \u003cstrong style=\"font-weight: bold;\"\u003ebold\u003c/strong\u003e\n```\n\n**Class-based styling:** Uses CSS classes (default)\n```javascript\nquikdown('**bold**');\n// \u003cstrong\u003ebold\u003c/strong\u003e\n// Requires CSS: .quikdown strong { font-weight: bold; }\n// see included dist/quikdown.light.css or quikdown.dark.css\n```\n\n### Fence Plugins\n\nQuikdown provides a callback for all fenced text such as code blocks, math, svg etc.\n\nHandle code blocks with custom languages:\n\n```javascript\nconst fencePlugin = {\n  render: (code, language) =\u003e {\n    if (language === 'mermaid') {\n      // Process with mermaid library and return rendered diagram\n      const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);\n      setTimeout(() =\u003e mermaid.render(id + '-svg', code).then(result =\u003e {\n        document.getElementById(id).innerHTML = result.svg;\n      }), 0);\n      return `\u003cdiv id=\"${id}\" class=\"mermaid\"\u003eLoading diagram...\u003c/div\u003e`;\n    }\n    // Return undefined for default handling\n  }\n};\n\nconst html = quikdown(markdown, { fence_plugin: fencePlugin });\n```\n\n\n## TypeScript Support\n\nquikdown includes TypeScript definitions for better IDE support and type safety:\n\n```typescript\nimport quikdown, { QuikdownOptions, FencePlugin } from 'quikdown';\n\nconst fencePlugin: FencePlugin = {\n  render: (content: string, language: string) =\u003e {\n    return `\u003cpre class=\"hljs ${language}\"\u003e${content}\u003c/pre\u003e`;\n  }\n};\n\nconst options: QuikdownOptions = {\n  inline_styles: true,\n  fence_plugin: fencePlugin\n};\n\nconst html: string = quikdown(markdown, options);\n```\n\n## Supported Markdown\n\n**Text formatting:** `**bold**`, `*italic*`, `~~strikethrough~~`, `` `code` ``\n\n**Headings:** `# H1` through `###### H6`\n\n**Lists:**\n\n- Unordered lists  \n1. Ordered lists  \n- [x] Task lists  \n\n**Links:** `[text](url)` and automatic URL detection\n\n**Code blocks:**  \n\n```javascript\nconsole.log('syntax highlighting support via plugins');\n```\n\n**Tables, blockquotes, horizontal rules** - See [documentation](docs/) for complete syntax reference\n\n## API Reference\n\nFor complete API documentation, see [docs/api-reference.md](docs/api-reference.md)\n\n## Security\n\nAll HTML is escaped by default. Only safe markdown constructs become HTML:\n\n```javascript\nconst unsafe = '\u003cscript\u003ealert(\"XSS\")\u003c/script\u003e **bold**';\nconst safe = quikdown(unsafe);\n// \u0026lt;script\u0026gt;alert(\"XSS\")\u0026lt;/script\u0026gt; \u003cstrong\u003ebold\u003c/strong\u003e\n```\n\n## Framework Integration\n\nWorks with React, Vue, Svelte, Angular. See [Framework Integration Guide](docs/framework-integration.md) for examples.\n\n## Limitations\n\nFor size and security, quikdown doesn't support:\n- Reference-style links  \n- Footnotes\n- Definition lists\n\nNote that raw html, svg, etc can be rendered using appropriate fences\n```html\n\u003ch1\u003eMy HTML Content\u003c/h1\u003e\n\u003cp\u003eSome HTML\u003c/p\u003e\n```\nas long as an appropriate fence plugin is provided.  See API docs for example or try out in quikdown_edit.js which has built-in support for HTML with XSS prevention.\n\n## License\n\nBSD 2-Clause - see [LICENSE.txt](LICENSE.txt)\n\n## Acknowledgments\n\n- Inspired by the simplicity of early markdown parsers\n- Built for the [QuikChat](https://github.com/deftio/quikchat) project\n- CommonMark spec for markdown standardization\n\n\n## Support\n\n- 📖 [Documentation](docs/)\n- 🐛 [Issues](https://github.com/deftio/quikdown/issues)\n- 📦 [Examples](examples/)  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fquikdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeftio%2Fquikdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fquikdown/lists"}