logo

Usage Examples

Explore practical examples of how to use @humanspeak/svelte-markdown in real-world scenarios.

Getting Started

Basic Rendering

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

View Example

Inline Rendering

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

View Example

Customization

Custom Renderers

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

View Example

HTML Filtering

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

View Example

Advanced

Parsed Callback

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

View Example

Quick Reference

Use CaseUsageNotes
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

Best Practices

Filter untrusted HTML

Use allowHtmlOnly/excludeHtmlOnly for user content

Leverage token caching

Repeated renders are 50-200x faster automatically

Use custom renderers

Override specific elements for custom styling

Use isInline for labels

Avoid block-level wrapping for inline content

Inspect tokens when debugging

Use the parsed callback to see the AST