logo

Interactive Examples

Explore how svelte-markdown works with live, interactive demos. Edit markdown, customize renderers, filter HTML, and measure caching performance.

Live Playground

Edit markdown in real-time and see it rendered instantly. Mix markdown with HTML tags.

Try it

Custom Renderers

See how to override default renderers and control which markdown elements are rendered.

Try it

HTML Filtering

Interactive demo of allow/deny controls for HTML tags within markdown content.

Try it

Caching Performance

Explore token caching and see the performance improvement on repeated renders.

Try it

Marked Extensions

Live KaTeX math rendering with the extensions prop. Try component renderers and snippet overrides.

Try it

Mermaid Diagrams

Async Mermaid diagram rendering with a custom marked extension. Flowcharts, sequence diagrams, and more.

Try it

GitHub Alerts

GitHub-style alert admonitions (NOTE, TIP, IMPORTANT, WARNING, CAUTION) with the built-in markedAlert extension.

Try it

Footnotes

Footnote references and definitions with bidirectional linking using the built-in markedFootnote extension.

Try it

Code Formatting

Enhance code blocks with walkTokens extensions and snippet overrides. No custom renderers required.

Try it

Snippet Overrides

Customize rendering inline with Svelte 5 snippets. No separate component files needed.

Try it

Linked Headings

Add clickable anchor links to headings with snippet overrides or custom renderers for easy deep-linking.

Try it

LLM Streaming

Simulate real-time AI response streaming with adjustable speed, jitter, and chunk modes. Measure render performance live.

Try it

Ready to use Svelte Markdown?

Check out the documentation for installation and API reference.

Get Started