// docs / examples

usage examples.

Curated patterns for integrating @humanspeak/svelte-markdown — short walkthrough docs paired with live demos. Items marked live jump to interactive editors under /examples.

Getting Started

2 items

WALKTHROUGH ↗

Basic Rendering

Render markdown content with the SvelteMarkdown component. Covers string input, GFM, and common patterns.

WALKTHROUGH ↗

Inline Rendering

Use the isInline prop to render markdown without wrapping block elements.

Customization

2 items

WALKTHROUGH ↗

Custom Renderers

Override default renderers with your own Svelte components for full control over output.

WALKTHROUGH ↗

HTML Filtering

Use allow/deny utilities to control which HTML tags are rendered from markdown.

Advanced

4 items

WALKTHROUGH ↗

Parsed Callback

Access parsed token data via the parsed callback prop for debugging or processing.

WALKTHROUGH ↗

Marked Extensions

Integrate third-party marked extensions like KaTeX math rendering with custom Svelte renderers.

LIVE DEMO ↗

Mermaid Diagrams

Render Mermaid diagrams with a custom marked extension and async component renderers.

LIVE DEMO ↗

LLM Streaming

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

Quick Reference

5 patterns

Use case	Usage	Notes
Blog posts	`<SvelteMarkdown source={post.body} />`	Full block rendering
Inline labels	`<SvelteMarkdown source={label} isInline />`	No wrapping <p> tags
Sanitized content	`<SvelteMarkdown {source} renderers={{ html: allowHtmlOnly([...]) }} />`	Restrict HTML tags
Custom styling	`<SvelteMarkdown {source} renderers={{ heading: MyHeading }} />`	Override specific renderers
Token inspection	`<SvelteMarkdown {source} parsed={handleTokens} />`	Access AST tokens