# Svelte Markdown vs ByteMD Full Editor vs Pure Renderer ## Overview Compare ByteMD and @humanspeak/svelte-markdown: a hackable markdown editor from ByteDance versus a focused Svelte 5 renderer for app content. - **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 Editor - **Approach:** Split-pane editor + preview - **GitHub:** https://github.com/bytedance/bytemd - **npm:** https://www.npmjs.com/package/bytemd ## Feature comparison | Feature | @humanspeak/svelte-markdown | ByteMD | Notes | | --- | --- | --- | --- | | Svelte 5 Compatibility | Yes | Compiled Svelte component | | | TypeScript Support | Yes | Yes | | | Markdown Rendering | Yes | Yes | | | Markdown Editing | No | Yes | | | Custom Renderers | Yes | Via plugins | | | Token Caching | Yes | No | | | HTML Tag Control | 83 tags with allow/deny | Via sanitize schema | | | LLM Streaming Mode | writeChunk() / resetStream() | No | ByteMD is an editor with live preview, but its upstream docs do not describe a dedicated markdown streaming renderer mode. | | Streaming HTML Output | Partial blocks reconcile when arrives | No | ByteMD targets the editor + live-preview workflow; agent-streamed HTML output where nested blocks resolve mid-stream is not the use case. | | Plugin Ecosystem | Marked extensions | Official plugins (math, mermaid, etc.) | | | Math (KaTeX) | Built-in extension (markedKatex) | Via @bytemd/plugin-math | | | Diagrams (Mermaid) | Built-in extension (markedMermaid) | Via @bytemd/plugin-mermaid | | | XSS Protection | Built-in | Built-in (sanitize-html) | | | Framework Support | Svelte 5 | Svelte/vanilla, React, Vue, Angular | | | Maintenance | Active | Dormant since February 2025 (~1.4k stars) | | ## 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 - Uses current Svelte 5 APIs and runes directly - Actively maintained for latest Svelte - Lighter bundle for rendering use cases ## ByteMD strengths - Full markdown editor with split-pane preview - Framework-agnostic — works in React, Vue, vanilla JS - Official plugins for math, mermaid, syntax highlighting - XSS-safe by default - Established community (~1,400 GitHub stars) ## Svelte Markdown limitations - Smaller community (newer project) - Runtime-only (no build-time optimization) - No editing capabilities ## ByteMD limitations - Compiled from an older Svelte codebase rather than designed around Svelte 5 runes - No release or repository activity since February 2025 - Overkill for display-only use cases - Larger bundle size ## Verdict Choose ByteMD when you need an established cross-framework markdown editor/viewer with official plugins and secure defaults. Choose @humanspeak/svelte-markdown when you want an actively maintained, Svelte 5-native renderer with streaming, caching, and component-level HTML control. ## Keywords bytemd, bytemd svelte, markdown editor svelte, bytemd vs svelte-markdown