Svelte in Markdown

Import and render live Svelte components in the middle of a page.

Every page compiles to a Svelte component, so markdown files can do what Svelte files do: import components and use runes.

Import and render

Add a <script> block anywhere in the file and use the component inline:

---
title: My Page
description: …
---

<script>
	import { Button } from '@levish0/lily-pad';
	let count = $state(0);
</script>

## Live component

<Button onclick={() => count++}>Clicked {count} times</Button>

That renders a real, interactive button:

What you can use

  • lily components re-exported by the lily-pad package (Button, Badge, Kbd, CodeBlock…)
  • your own components from $lib/
  • runes — $state, $derived, and friends work as in any Svelte file

Markdown keeps working around components — headings, emphasis, and code blocks mix freely with them.

Escaping

Writing about Svelte rather than running it? Put the code in a code block — fenced code is never executed.

enko