loading code fetching the highlighted snippet
FIG-001/ DEFAULT
default rendering.
No overrides. Every markdown element falls through to its built-in renderer — clean baseline for comparison.
- Same markdown source as the snippet variant — rendered with zero overrides for clean baseline comparison.
- Headings, paragraphs, lists, code, tables, blockquotes — all fall through to the built-in renderers.
Snippet Overrides Demo
Inline Customization
Svelte 5 snippets let you customize rendering directly in your template. No separate files needed for simple tweaks.
Key Benefits
- Inline — customize right where you use the component
- Type-safe — full TypeScript support for snippet props
- Composable — mix snippets with component renderers
Check out the documentation for the full guide.
Tip: Snippets take precedence over component renderers. Use them for quick, one-off overrides.
Here is a feature comparison:
| Approach | Files | Reusable | Best For |
|---|---|---|---|
| Snippets | 0 | No | Quick tweaks |
| Components | 1+ | Yes | Complex logic |
- First item in the list
- Second item with bold text
- Third item with a link
// Snippet overrides are this simple:
<SvelteMarkdown source={md}>
{#snippet paragraph({ children })}
<p class="custom">{@render children?.()}</p>
{/snippet}
</SvelteMarkdown>category · default
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ SNIPPETS
snippet overrides.
Inline Svelte 5 snippets customize paragraphs, headings, links, blockquotes, list items, code blocks, and table cells — all in one template, no separate component files.
-
{#snippet paragraph}…{/snippet}overrides happen inline inside<SvelteMarkdown>— no separate component files. - Mix-and-match: override just the elements you care about (heading + blockquote here), let the rest fall through.
- Snippets are fully typed and take precedence over component renderers — perfect for one-off layout tweaks per page.
Snippet Overrides Demo
Inline Customization
Svelte 5 snippets let you customize rendering directly in your template. No separate files needed for simple tweaks.
Key Benefits
- Inline — customize right where you use the component
- Type-safe — full TypeScript support for snippet props
- Composable — mix snippets with component renderers
Check out the documentation for the full guide.
Here is a feature comparison:
| Approach | Files | Reusable | Best For |
|---|---|---|---|
| Snippets | 0 | No | Quick tweaks |
| Components | 1+ | Yes | Complex logic |
- First item in the list
- Second item with bold text
- Third item with a link
javascript
// Snippet overrides are this simple:
<SvelteMarkdown source={md}>
{#snippet paragraph({ children })}
<p class="custom">{@render children?.()}</p>
{/snippet}
</SvelteMarkdown>category · snippets
sheet · sheet 02 / 02
⟳ to re-run