@comark/svelte
Svelte renderer for Comark. Render markdown with custom Svelte components, streaming support, and SvelteKit SSR.
Features
- 🧩
<Markdown>component for one-shot markdown rendering - 🎯 Map any Comark tag to a custom Svelte component
- 🌊 Streaming-friendly with auto-close and caret support
- 🖥️ SSR-safe, works in SvelteKit
- 🔌 Plugin ecosystem (math, mermaid, highlight, binding…)
- 🎯 Full TypeScript support
Installation
npm install @comark/svelte
# or
pnpm add @comark/svelte
Usage
<script lang="ts">
import { Markdown } from '@comark/svelte'
import math, { Math } from '@comark/svelte/plugins/math'
const content = `# Hello\n\nThis is **Comark** in Svelte.`
</script>
<Markdown value={content} components={{ math: Math }} plugins={[math()]} />
Custom components
<script lang="ts">
import { Markdown } from '@comark/svelte'
import Alert from './Alert.svelte'
</script>
<Markdown value={content} components={{ alert: Alert }} />
::alert{type="warning"}
Heads up!
::
Streaming
Markdown and MarkdownAsync reuse completed blocks while streaming is true. Set it to false when the stream ends to run a final full parse. Changes to options, plugins, or unwrap create a new parser. Heading tails and reference definitions use a full parse to preserve heading IDs and links.
<Markdown value={content} streaming={isStreaming} caret />
Documentation
Full guide and API reference at comark.dev/rendering/svelte.
License
Made with ❤️
Published under MIT License.