examples.
Hands-on demos of @humanspeak/svelte-markdown — live editors, agent / LLM streaming, HTML filtering, custom renderers, token caching, KaTeX, Mermaid, and more. Edit, copy, ship.
pick a demo.
Each page is a self-contained live example with the source you need to copy into your own project.
live playground.
DEMO
Edit markdown in real-time and see it rendered instantly. Mix markdown with HTML tags.
custom renderers.
RENDERERS
Override default renderers and control which markdown elements are rendered.
html filtering.
SECURITY
Interactive demo of allow/deny controls for HTML tags within markdown.
caching performance.
PERFORMANCE
Explore token caching and see the performance improvement on repeated renders.
marked extensions.
EXTENSIONS
Live KaTeX math with the extensions prop. Try component renderers and snippet overrides.
reactive extensions.
EXTENSIONS
Dynamically rebuild marked extensions from Svelte state without appending duplicate extensions.
mermaid diagrams.
EXTENSIONS
Async Mermaid diagram rendering with a custom marked extension. Flowcharts, sequence diagrams, and more.
github alerts.
EXTENSIONS
GitHub-style alert admonitions (NOTE, TIP, IMPORTANT, WARNING, CAUTION) with markedAlert.
footnotes.
EXTENSIONS
Footnote references and definitions with bidirectional linking using markedFootnote.
code formatting.
EXTENSIONS
Enhance code blocks with walkTokens extensions and snippet overrides — no custom renderers required.
snippet overrides.
SNIPPETS
Customize rendering inline with Svelte 5 snippets. No separate component files needed.
linked headings.
SNIPPETS
Add clickable anchor links to headings with snippet overrides or custom renderers.
llm streaming.
STREAMING
Stream markdown and rich HTML from AI agents in real time. Adjustable speed, jitter, and chunk modes — XSS-safe by default.
agent output.
STREAMING
Watch a simulated agent stream mixed markdown and HTML — with a live log of every javascript: URL and on*= handler the sanitizer blocks.
the playground → edit markdown live