Svelte Markdown
📝 Markdown and HTML renderer for Svelte 5 — built for streaming AI agent output from Claude Code, ChatGPT, and agentic workflows. XSS-safe defaults, token caching, TypeScript types.
Last verified:
What is Svelte Markdown?
Svelte Markdown (@humanspeak/svelte-markdown) is a modern, powerful markdown renderer component specifically built for Svelte applications. It transforms markdown strings into rendered HTML/Svelte components with full CommonMark and GitHub Flavored Markdown (GFM) support. The package is the maintained successor to the original svelte-markdown by Pablo Berganza, now enhanced by Humanspeak, Inc.
Key features include full TypeScript support with strict typing, a customizable component rendering system allowing developers to override any markdown element, secure HTML parsing via HTMLParser2 with XSS protection, GitHub-style slug generation for headers, WCAG 2.1 accessibility compliance, and full Svelte 5 runes compatibility. It supports all standard markdown elements including headings, paragraphs, bold/italic text, links, images, tables, code blocks, blockquotes, lists, and horizontal rules.
The tool is designed for Svelte and SvelteKit developers building documentation sites, blogs, content-rich applications, markdown editors, and any project requiring markdown rendering. It's particularly useful for developers who need customizable rendering, TypeScript safety, and security features without the overhead of heavier solutions.
The package includes comprehensive test coverage with vitest and playwright, supports custom Marked extensions (like GitHub-style alerts), and provides helper utilities for allow/deny strategies to control which renderers are enabled. It emits a 'parsed' event when tokens are calculated, enabling developers to access the parsed token structure.
Svelte Markdown pricing
Pricing model: Freemium
Free and open source under MIT license. The package @humanspeak/svelte-markdown is completely free for both commercial and personal use with no paid tiers or restrictions.
Svelte Markdown pros
- Full TypeScript support with strict typing and type definitions
- Complete CommonMark and GitHub Flavored Markdown (GFM) support
- Svelte 5 runes compatible
- Customizable component rendering system with 20+ renderer types
- XSS protection and HTML sanitization for security
- GitHub-style slug generation for heading IDs
- WCAG 2.1 accessibility compliance
- Comprehensive test coverage with vitest and playwright
- Supports custom Marked extensions like GitHub-style alerts
- Helper utilities for allow/deny renderer strategies
- Images include lazy loading and fade-in effects by default
- Code blocks include language CSS class for syntax highlighting
- Tables support column alignment (left, center, right)
- Emits 'parsed' event for accessing token structure
- Lightweight with carefully selected dependencies only
- MIT license - free for commercial and personal use
- Supports mixing HTML and Markdown seamlessly
- Reactive source binding for real-time preview editors
Svelte Markdown cons
- No built-in syntax highlighting - requires external library
- Limited to Svelte/SvelteKit ecosystem only
- No built-in table of contents generation
- No frontmatter/parser support out of the box
- Requires marked as external dependency
- No built-in image optimization
- Custom renderers require TypeScript knowledge for best experience
- No built-in dark mode or styling - needs custom CSS
Frequently asked questions about Svelte Markdown
What is Svelte Markdown?
Svelte Markdown (@humanspeak/svelte-markdown) is a powerful, customizable markdown renderer component for Svelte applications. It transforms markdown strings into rendered HTML with full CommonMark and GitHub Flavored Markdown support, complete TypeScript typing, XSS protection, and a customizable rendering system.
How do I install Svelte Markdown?
Install via npm with 'npm i -S @humanspeak/svelte-markdown', or use pnpm with 'pnpm add @humanspeak/svelte-markdown', or yarn with 'yarn add @humanspeak/svelte-markdown'. It requires Svelte 5 for runes compatibility.
What markdown syntax is supported?
Full CommonMark and GitHub Flavored Markdown (GFM) including headings, paragraphs, bold, italic, strikethrough, links, images, code blocks (inline and fenced), tables with column alignment, blockquotes, ordered and unordered lists (with nesting), horizontal rules, and HTML mixing.
How do I customize renderers?
Pass a 'renderers' prop with custom Svelte components. Import defaultRenderers to extend defaults, or use helper utilities like allowRenderersOnly() and excludeRenderersOnly() to control which renderers are enabled. Each markdown element (paragraph, link, heading, etc.) and HTML tag can be overridden.
Is Svelte Markdown secure?
Yes. It includes XSS protection through HTML sanitization, secure HTML parsing with HTMLParser2, safe handling of HTML entities, and protection against malicious markdown injection. The HTML parser is security-focused and the package is battle-tested in production.
Does it support Svelte 5?
Yes, Svelte Markdown has full Svelte 5 runes compatibility. The package was updated to support Svelte 5's new reactive syntax including $state() for reactive source binding in real-time editors.
How do I enable heading IDs?
Heading IDs are enabled by default via github-slugger (GitHub-style). To customize, pass options={{ headerIds: true, headerPrefix: 'doc-' }} for a prefix, or options={{ headerIds: false }} to disable. IDs are auto-generated and handle Unicode and collisions.
Can I mix HTML and Markdown?
Yes, Svelte Markdown seamlessly supports mixing HTML and Markdown. You can embed HTML elements like div, details/summary, and tables within markdown, and the HTML renderer handles them correctly with proper attribute isolation for nested components.
What are the external dependencies?
Three core dependencies: marked (industry-standard markdown parser with security features), github-slugger (GitHub-style heading ID generation with Unicode and collision handling), and htmlparser2 (high-performance, security-focused HTML parsing with streaming capabilities).
How do I create a live markdown editor?
Use reactive source binding with Svelte 5 $state(): 'let source = $state('# Hello\nStart typing...')' then bind a textarea: '<textarea bind:value={source}></textarea><SvelteMarkdown {source} />' for real-time preview as the user types.