MdSvex
`.md` and `.svx` files compile through mdsvex into Svelte components — pass them anywhere a `.svelte` component is accepted, or import them as children.
Hello, Mochi!
This block was authored in Markdown but compiled into a Svelte component
via mdsvex, so prose, emphasis, inline code,
and a normal Svelte <script> block all coexist.
Headings get id attributes via rehype-slug, so this section is linkable as #hello-name. The page was rendered at:
2026-06-02T19:03:24.477Z
A .svx file
Same compile pipeline as .md — mdsvex accepts both extensions. This snippet
shows a fenced code block (run through the framework’s syntax highlighter)
plus a Svelte {#each} loop driven by a prop:
const items = ['Hydration', 'CSS imports', 'MdSvex'];- Hydration
- CSS imports
- MdSvex
<script>
let { name = 'world' } = $props();
const renderedAt = new Date().toISOString();
</script>
## Hello, {name}!
This block was authored in **Markdown** but compiled into a Svelte component
via [`mdsvex`](https://mdsvex.pngwn.io/), so prose, _emphasis_, `inline code`,
and a normal Svelte `<script>` block all coexist.
Headings get `id` attributes via `rehype-slug`, so this section is linkable as
`#hello-name`. The page was rendered at:
> {renderedAt}
More demos
Using form return data An action returns data via success({...}); {@attach enhance(...)} updates the UI in place, plain HTML re-renders the page. Real-time Streams WebSocket and SSE clocks, lazily hydrated via mochi:hydrate:visible. Data Loading Server-side fetch from PokéAPI cached via MochiCache and rendered at request time.