# Svelte Markdown vs Carta Editor + Viewer vs Pure Renderer ## Overview Compare Carta and @humanspeak/svelte-markdown: a Svelte markdown editor and viewer versus a focused Svelte 5 renderer with caching and HTML filtering. - **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 + Viewer - **Approach:** Split-pane editor with live preview - **Website:** https://beartocode.github.io/carta - **GitHub:** https://github.com/BearToCode/carta - **npm:** https://www.npmjs.com/package/carta-md ## Feature comparison | Feature | @humanspeak/svelte-markdown | Carta | Notes | | --- | --- | --- | --- | | Svelte 5 Compatibility | Yes | Yes | | | TypeScript Support | Yes | Yes | | | Markdown Rendering | Yes | Yes | | | Markdown Editing | No | Yes | | | Custom Renderers | Svelte components | Via plugins | | | Token Caching | Yes | No | | | HTML Safety | URL + attribute sanitization enabled by default | Consumer-supplied sanitizer | Carta explicitly does not sanitize user input by default and recommends configuring DOMPurify or sanitize-html. | | LLM Streaming Mode | writeChunk() / resetStream() | No | Carta offers live preview for editing, but its docs do not describe a dedicated markdown streaming renderer mode. | | Streaming HTML Output | Partial blocks reconcile when arrives | No | Carta is an authoring editor with live preview, not a renderer for streaming agent output with nested HTML. | | Reactive Viewer | Yes | Manual render() or keyed remount | Carta documents that its standalone Markdown component is not reactive. | | Syntax Highlighting | Opt-in Shiki extension | Built-in plugin | | | Math (KaTeX) | Built-in extension (markedKatex) | Built-in plugin | | | Diagrams (Mermaid) | Built-in extension (markedMermaid) | Via unified/community plugin | | | Split-Pane UI | No | Yes | | | Keyboard Shortcuts | No | Yes | | ## 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 - Simpler API — one component, one prop - More granular HTML control (83 individual tag renderers) - Snippet overrides for inline customization ## Carta strengths - Full markdown editing experience with live preview - Svelte-native (not a wrapper around another framework) - Lightweight compared to ProseMirror-based editors - Plugin system for syntax highlighting, math, etc. - Keyboard shortcuts, toolbar, 150+ remark plugins, and component embeds ## Svelte Markdown limitations - Smaller community (newer project) - Runtime-only (no build-time optimization) - No editing capabilities - No split-pane UI ## Carta limitations - Bundled editor code even if you only need rendering - Smaller community than established editors - No sanitization by default - Standalone Markdown viewer is not reactive without manual handling - No token caching ## Verdict Choose Carta when you need a Svelte-native markdown editor and viewer with live preview, authoring controls, and access to remark plugins. Choose @humanspeak/svelte-markdown for reactive or streaming display, built-in caching, granular HTML rendering, and safer defaults. ## Keywords carta-md, carta svelte, svelte markdown editor, carta vs svelte-markdown