# Svelte Markdown vs marked The Engine Under Our Hood ## Overview Compare marked and @humanspeak/svelte-markdown: direct markdown parsing versus a Svelte 5 component layer with renderers, caching, and safety controls. - **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://marked.js.org - **GitHub:** https://github.com/markedjs/marked - **npm:** https://www.npmjs.com/package/marked ## Feature comparison | Feature | @humanspeak/svelte-markdown | marked | Notes | | --- | --- | --- | --- | | Svelte 5 Compatibility | Yes | Framework-agnostic | | | TypeScript Support | Yes | Yes | | | Component Output | Svelte components | Raw HTML string | | | Custom Renderers | Svelte components | Token manipulation | | | Token Caching | Built-in LRU cache | Manual implementation | | | HTML Safety | Allow/deny per tag | Manual sanitization | | | LLM Streaming Mode | writeChunk() / resetStream() | No | marked is the parsing engine only; incremental streaming behavior must be built manually on top. | | Streaming HTML Output | Partial blocks reconcile when arrives | No | marked parses to tokens or HTML strings per call; streaming reconciliation of nested HTML across chunks is left to the consumer. | | Extensions | Full marked extensions support | Full extensions API | | | Math (KaTeX) | Built-in extension (markedKatex) | Via marked-katex-extension | | | Diagrams (Mermaid) | Built-in extension (markedMermaid) | Via marked-mermaid | | | GitHub Alerts | Built-in extension (markedAlert) | Via marked-alert | | | Footnotes | Built-in extension (markedFootnote) | Via marked-footnote | | | GFM Support | Yes | Yes | | | Bundle Size | Renderer layer + marked | Parser only | | | Framework Integration | Native Svelte | 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 - All the power of marked, wrapped in Svelte components - Full marked extensions API pass-through - No {@html} needed — renders as safe Svelte components ## marked strengths - One of the most popular JS markdown parsers (63M+ weekly npm downloads) - Smaller bundle (parser only, no rendering layer) - Framework-agnostic — use anywhere - Maximum flexibility with token/renderer hooks - Extensive extension ecosystem ## Svelte Markdown limitations - Smaller community (newer project) - Runtime-only (no build-time optimization) - Slightly larger bundle (includes rendering layer on top of marked) ## marked limitations - Outputs raw HTML — requires {@html} and manual XSS handling - No component-based rendering in Svelte - Must manually implement caching - No allow/deny controls for HTML tags ## Verdict We use marked internally — so you get all of its parsing power for free. Choose marked directly when you need a framework-agnostic parser or want the absolute smallest bundle. Choose @humanspeak/svelte-markdown when you want the Svelte DX layer: component rendering, caching, HTML controls, and TypeScript types. ## Keywords marked js, svelte markdown renderer, marked svelte, marked vs svelte-markdown