@comark/svelte

Svelte renderer for Comark — render markdown with custom Svelte components, streaming support, and SvelteKit SSR.

Features

• 🧩 <Comark> 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 { Comark } from '@comark/svelte'
  import math, { Math } from '@comark/svelte/plugins/math'

  const content = `# Hello\n\nThis is **Comark** in Svelte.`
</script>

<Comark markdown={content} components={{ math: Math }} plugins={[math()]} />

Custom components

<script lang="ts">
  import { Comark } from '@comark/svelte'
  import Alert from './Alert.svelte'
</script>

<Comark markdown={content} components={{ alert: Alert }} />

::alert{type="warning"}
Heads up!
::

Streaming

<Comark markdown={content} streaming={isStreaming} caret />

Documentation

Full guide and API reference at comark.dev/rendering/svelte.

License

Made with ❤️

Published under MIT License.