made with Svelte

Svelte Markdown

Markdown & HTML Renderer

Visit Site

Description

Markdown & HTML Renderer

"@humanspeak/svelte-markdown is a powerful, customizable markdown renderer for Svelte with TypeScript support.

It's built for streaming AI agent output from Claude Code, ChatGPT, and agentic workflows, and offers XSS-safe defaults and token caching."

  • ๐Ÿ”’ Secure HTML parsing via HTMLParser2 with built-in XSS defaults (protocol allowlist, on* handler stripping)
  • ๐Ÿš€ Full markdown syntax support through Marked
  • ๐Ÿ’ช Complete TypeScript support with strict typing
  • ๐Ÿ”„ Svelte 5 runes compatibility
  • โœ‚๏ธ Inline snippet overrides — customize renderers without separate files
  • ๐ŸŽจ Customizable component rendering system
  • โ™ฟ WCAG 2.1 accessibility compliance
  • ๐ŸŽฏ GitHub-style slug generation for headers
  • ๐Ÿงช Comprehensive test coverage (vitest and playwright)
  • ๐Ÿงฉ First-class marked extensions support via extensions prop (e.g., KaTeX math, alerts)
  • โšก Intelligent token caching (50-200x faster re-renders)
  • ๐Ÿ“ก LLM streaming mode with incremental rendering (~1.6ms avg per update)
  • ๐Ÿ–ผ๏ธ Smart image lazy loading with fade-in animation

Social Media Links

Tailwind Editor Notion-like TailwindCSS Editor
icon-eye-dark Created with Sketch. 18.512
Svelte Scroller Scroller component
icon-eye-dark Created with Sketch. 5.778
Sentry for Svelte Svelte Application Monitoring
๐Ÿงก Sponsored by Friends
More Shadcn Svelte Collection of shadcn-svelte Components
icon-eye-dark Created with Sketch. 233
shadcn-svelte UI Component Library
icon-eye-dark Created with Sketch. 20.260
LayerChart Data Visualization Components & Utilities
icon-eye-dark Created with Sketch. 3.012