# Svelte Markdown vs markdown-it Raw Parser vs Svelte Component ## Overview Compare markdown-it and @humanspeak/svelte-markdown: raw HTML string parsing versus typed Svelte 5 renderers with caching, snippets, and HTML control. - **Svelte Markdown site:** https://markdown.svelte.page - **Svelte Markdown npm:** https://www.npmjs.com/package/%40humanspeak%2Fsvelte-markdown - **Svelte Markdown slug:** svelte-markdown - **Category:** Markdown Parser - **Approach:** String in, HTML string out - **Website:** https://markdown-it.github.io - **GitHub:** https://github.com/markdown-it/markdown-it - **npm:** https://www.npmjs.com/package/markdown-it ## Feature comparison | Feature | @humanspeak/svelte-markdown | markdown-it | Notes | | --- | --- | --- | --- | | Svelte 5 Compatibility | Yes | Framework-agnostic | | | TypeScript Support | Yes | @types/markdown-it | | | Component Output | Svelte components | Raw HTML string | | | Custom Renderers | Svelte components | Token stream manipulation | | | Token Caching | Yes | No | | | HTML Safety | Allow/deny per tag | Manual (use with {@html}) | | | LLM Streaming Mode | writeChunk() / resetStream() | No | markdown-it is a parser, not a streaming UI layer. | | Streaming HTML Output | Partial blocks reconcile when arrives | No | Each parse returns a full HTML string — reconciling partial ... structures across chunks is the caller’s responsibility. | | Plugin Ecosystem | Via marked extensions | 200+ plugins | | | CommonMark Compliance | Via marked (GFM) | 100% CommonMark + extensions | | | XSS Protection | Built-in (URL allowlist + attr sanitization) | Manual sanitization required | | | Math (KaTeX) | Built-in extension (markedKatex) | Via markdown-it-katex plugin | | | GitHub Alerts | Built-in extension (markedAlert) | Via plugin | | | Footnotes | Built-in extension (markedFootnote) | Via markdown-it-footnote plugin | | | Framework Integration | Native Svelte component | Framework-agnostic (requires {@html}) | | ## Svelte Markdown strengths - Svelte 5 runes-native — built for runes, not retrofitted - TypeScript-first with full type safety - Built-in token caching (50-200x faster re-renders on repeated content) - LLM streaming with imperative writeChunk() / resetStream() API - 24 markdown renderers + 83 HTML tag renderers — every override is a Svelte snippet - First-class extensions: KaTeX math, Mermaid diagrams, GitHub alerts, footnotes - Opt-in Shiki syntax highlighting (streaming-compatible, tree-shaken from core) - Built-in XSS protection — protocol allowlist, event-handler stripping, attribute sanitization - Allow/deny utilities (allowHtmlOnly, excludeRenderersOnly, etc.) for fine-grained control - Drop-in component — works anywhere in your Svelte app - Renders as Svelte components — not raw HTML injection - No need for {@html} and manual sanitization ## markdown-it strengths - Massive ecosystem (27M+ weekly npm downloads) - 100% CommonMark compliant with spec test suite - 200+ community plugins available - Framework-agnostic — use anywhere - Battle-tested in production at scale ## Svelte Markdown limitations - Smaller community (newer project) - Runtime-only (no build-time optimization) - Fewer plugins than markdown-it ecosystem ## markdown-it limitations - Outputs raw HTML strings — requires {@html} in Svelte - No built-in XSS protection — manual sanitization needed - No Svelte component integration — cannot use Svelte renderers - No caching layer — re-parses every render ## Verdict Choose markdown-it when you need a framework-agnostic parser with maximum CommonMark compliance and a vast plugin ecosystem. Choose @humanspeak/svelte-markdown when you want a native Svelte experience with component-based rendering, built-in safety controls, and caching. ## Keywords markdown-it, markdown-it svelte, svelte markdown parser, markdown-it vs marked