diff --git a/.gitignore b/.gitignore
index 0457094..ae883ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,6 @@ logs
 
 .vscode
 .history
+
+# Svelte
+.svelte-kit
diff --git a/AGENTS.md b/AGENTS.md
index 1ea725a..ff656ec 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,7 +10,7 @@ This is a **monorepo** containing multiple packages related to Comark (Component
 
 - Fast synchronous and async parsing via markdown-it
 - Streaming support for real-time/incremental parsing
-- Vue and React renderers
+- Vue, React and Svelte renderers
 - Syntax highlighting via Shiki
 - Auto-close utilities for incomplete markdown (useful for AI streaming)
 
@@ -21,7 +21,8 @@ This is a **monorepo** containing multiple packages related to Comark (Component
 ├── packages/             # All publishable packages
 │   ├── comark/           # Main Comark parser package
 │   ├── comark-cjk/       # CJK support plugin (@comark/cjk)
-│   └── comark-math/      # Math formula support (@comark/math)
+│   ├── comark-math/      # Math formula support (@comark/math)
+│   └── comark-svelte/    # Svelte renderer (@comark/svelte)
 ├── examples/             # Example applications
 │   ├── vue-vite/         # Vue + Vite + Tailwind CSS v4
 │   ├── react-vite/       # React 19 + Vite + Tailwind CSS v4
@@ -197,6 +198,58 @@ $$
 - Vue and React components for easy integration
 - Automatic tokenization at parse time (not render time) for performance
 
+## Package: @comark/svelte
+
+Svelte 5 renderer for Comark. Located at `packages/comark-svelte/`:
+
+```
+packages/comark-svelte/
+├── src/
+│   ├── index.ts              # Entry point (@comark/svelte)
+│   ├── types.ts              # Shared prop interfaces
+│   ├── Comark.svelte         # High-level markdown → render ($state + $effect)
+│   ├── ComarkAsync.svelte    # High-level markdown → render (experimental await)
+│   ├── ComarkRenderer.svelte # Low-level AST → render component
+│   └── ComarkNode.svelte     # Recursive AST node renderer
+├── svelte.config.js          # Svelte config (experimental.async enabled)
+├── vitest.config.ts          # Dual test config (server + client browser)
+├── tsconfig.json
+└── package.json
+```
+
+### Build
+
+Uses `@sveltejs/package` (`svelte-package`) — the standard Svelte library packaging tool. Ships `.svelte` source files (compiled by consumer's bundler) with `.d.ts` type definitions generated via `svelte2tsx`.
+
+### Testing
+
+Uses Vitest with two test projects:
+- **`server`**: Node environment, `*.test.ts` files — SSR tests using `svelte/server` `render()`
+- **`client`**: Browser environment (Playwright/Chromium), `*.svelte.test.ts` files — real DOM tests using `vitest-browser-svelte`
+
+### Usage
+
+**Manual state (stable API)**:
+```svelte
+<script>
+  import { Comark } from '@comark/svelte'
+</script>
+<Comark markdown={content} components={customComponents} />
+```
+
+**Experimental async** (requires `experimental.async` in Svelte config):
+```svelte
+<script>
+  import { ComarkAsync } from '@comark/svelte'
+</script>
+<svelte:boundary>
+  <ComarkAsync markdown={content} components={customComponents} />
+  {#snippet pending()}
+    <p>Loading...</p>
+  {/snippet}
+</svelte:boundary>
+```
+
 ## Package Exports
 
 ```typescript
@@ -216,6 +269,12 @@ import { Comark } from 'comark/vue'
 
 // React components
 import { Comark } from 'comark/react'
+
+// Svelte components
+import { Comark, ComarkRenderer } from '@comark/svelte'
+import { ComarkAsync } from '@comark/svelte/async' // requires experimental.async
+import { math, Math } from '@comark/svelte/plugin-math'
+import { mermaid, Mermaid } from '@comark/svelte/plugin-mermaid'
 ```
 
 ## Coding Principles
@@ -250,7 +309,7 @@ const matches = line.match(/\*+/g)  // Don't do this
 
 1. Keep internal implementation in `packages/comark/src/internal/` (parsing in `internal/parse/`, stringification in `internal/stringify/`)
 2. AST types and utilities in `packages/comark/src/ast/`
-3. Framework-specific code in `packages/comark/src/vue/` and `packages/comark/src/react/`
+3. Framework-specific code in `packages/comark/src/vue/`, `packages/comark/src/react/`, and `packages/comark-svelte/src/`
 4. Export public APIs from entry points (`index.ts`, `ast/index.ts`)
 5. Document exported functions with JSDoc including `@example`
 
@@ -351,7 +410,7 @@ Example:
 }
 ```
 
-## Vue/React Components
+## Vue/React/Svelte Components
 
 ### Comark Component (High-level)
 
@@ -371,6 +430,31 @@ Accepts markdown string, handles parsing internally.
 <Comark components={customComponents}>{content}</Comark>
 ```
 
+**Svelte** (manual state — stable API, uses `$state` + `$effect`):
+
+```svelte
+<script>
+  import { Comark } from '@comark/svelte'
+</script>
+
+<Comark markdown={content} components={customComponents} />
+```
+
+**Svelte** (experimental async — requires `experimental.async` in Svelte config):
+
+```svelte
+<script>
+  import { ComarkAsync } from '@comark/svelte/async'
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} components={customComponents} />
+  {#snippet pending()}
+    <p>Loading...</p>
+  {/snippet}
+</svelte:boundary>
+```
+
 ## Common Tasks
 
 ### Adding a new utility function
@@ -390,7 +474,8 @@ Accepts markdown string, handles parsing internally.
 
 1. Vue components in `packages/comark/src/vue/components/`
 2. React components in `packages/comark/src/react/components/`
-3. Both should have similar APIs for consistency
+3. Svelte components in `packages/comark-svelte/src/`
+4. All three should have similar APIs for consistency
 
 ### Adding a new package
 
diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index e3cd7a3..3d56c2c 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -1,7 +1,7 @@
 export default defineAppConfig({
   seo: {
     title: 'Comark',
-    description: 'Components in Markdown (Comark) parser with streaming support for Vue and React.',
+    description: 'Components in Markdown (Comark) parser with streaming support for Vue, React and Svelte.',
     url: 'https://comark.dev',
     socials: {
       github: 'comarkdown/comark',
@@ -12,7 +12,7 @@ export default defineAppConfig({
   },
 
   title: 'Comark',
-  description: 'Components in Markdown (Comark) parser with streaming support for Vue and React.',
+  description: 'Components in Markdown (Comark) parser with streaming support for Vue, React and Svelte.',
   url: 'https://comark.dev',
 
   ui: {
@@ -32,6 +32,7 @@ export default defineAppConfig({
         'md': 'i-custom-comark',
         'react': 'i-logos-react',
         'html': 'i-vscode-icons-file-type-html',
+        'svelte': 'i-simple-icons-svelte',
       },
     },
   },
diff --git a/docs/content/2.vite/svelte-vite/README.md b/docs/content/2.vite/svelte-vite/README.md
new file mode 100644
index 0000000..66f870d
--- /dev/null
+++ b/docs/content/2.vite/svelte-vite/README.md
@@ -0,0 +1,139 @@
+---
+title: Svelte
+category: Vite
+description: A minimal example showing how to use Comark with Svelte and Vite.
+navigation:
+  icon: i-simple-icons-svelte
+---
+
+::code-tree{expand-all default-value="src/App.svelte"}
+```ts [src/main.ts]
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+mount(App, {
+  target: document.getElementById('app')!,
+})
+```
+
+```svelte [src/App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import Alert from './components/Alert.svelte'
+
+  const markdown = `
+# Hello *World*
+
+::alert{type="info"}
+This is an alert!
+::
+`
+</script>
+
+<Comark markdown={markdown} components={{ Alert }} />
+```
+
+```svelte [src/components/Alert.svelte]
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    type = 'info',
+    children,
+  }: {
+    type?: 'info' | 'warning' | 'success' | 'danger'
+    children?: Snippet
+  } = $props()
+
+  const config = {
+    info: 'bg-blue-50 border-blue-400 text-blue-900 dark:bg-blue-950/50 dark:border-blue-500/50 dark:text-blue-200',
+    warning: 'bg-amber-50 border-amber-400 text-amber-900 dark:bg-amber-950/50 dark:border-amber-500/50 dark:text-amber-200',
+    success: 'bg-emerald-50 border-emerald-400 text-emerald-900 dark:bg-emerald-950/50 dark:border-emerald-500/50 dark:text-emerald-200',
+    danger: 'bg-red-50 border-red-400 text-red-900 dark:bg-red-950/50 dark:border-red-500/50 dark:text-red-200',
+  }
+</script>
+
+<div
+  class="my-4 rounded-lg border-l-4 px-4 py-3 text-sm leading-relaxed {config[type]}"
+  role="alert"
+>
+  {@render children?.()}
+</div>
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    svelte(),
+    tailwindcss(),
+  ],
+})
+```
+
+```json [package.json]
+{
+  "name": "comark-svelte-vite",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@comark/svelte": "workspace:*",
+    "@tailwindcss/vite": "^4.2.0",
+    "comark": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "svelte": "^5.53.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}
+```
+
+```html [index.html]
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Comark - Svelte Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+
+```json [tsconfig.json]
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}
+```
+::
+
+This example demonstrates the simplest way to use Comark with Svelte - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.
diff --git a/docs/content/3.rendering/1.vue.md b/docs/content/3.rendering/1.vue.md
index 1792153..8257d54 100644
--- a/docs/content/3.rendering/1.vue.md
+++ b/docs/content/3.rendering/1.vue.md
@@ -10,6 +10,11 @@ links:
     to: /rendering/react
     color: neutral
     variant: soft
+  - label: Svelte Rendering
+    icon: i-simple-icons-svelte
+    to: /rendering/svelte
+    color: neutral
+    variant: soft
   - label: Streaming
     icon: i-lucide-radio
     to: /rendering/streaming
diff --git a/docs/content/3.rendering/2.react.md b/docs/content/3.rendering/2.react.md
index f7faac8..a9a58d2 100644
--- a/docs/content/3.rendering/2.react.md
+++ b/docs/content/3.rendering/2.react.md
@@ -10,6 +10,11 @@ links:
     to: /rendering/vue
     color: neutral
     variant: soft
+  - label: Svelte Rendering
+    icon: i-simple-icons-svelte
+    to: /rendering/svelte
+    color: neutral
+    variant: soft
   - label: Streaming
     icon: i-lucide-radio
     to: /rendering/streaming
diff --git a/docs/content/3.rendering/3.svelte.md b/docs/content/3.rendering/3.svelte.md
new file mode 100644
index 0000000..3967f44
--- /dev/null
+++ b/docs/content/3.rendering/3.svelte.md
@@ -0,0 +1,307 @@
+---
+title: Render Comark in Svelte
+description: Learn how to render Comark in a Svelte 5 application with custom components, plugins, and streaming support.
+navigation:
+  title: Svelte
+  icon: i-simple-icons-svelte
+links:
+  - label: Vue Rendering
+    icon: i-simple-icons-vuedotjs
+    to: /rendering/vue
+    color: neutral
+    variant: soft
+  - label: React Rendering
+    icon: i-lucide-atom
+    to: /rendering/react
+    color: neutral
+    variant: soft
+  - label: Streaming
+    icon: i-lucide-radio
+    to: /rendering/streaming
+    color: neutral
+    variant: soft
+---
+
+The `@comark/svelte` package provides two high-level components for rendering markdown in Svelte 5:
+
+- **`<Comark>`** — Uses `$state` + `$effect` for async parsing. No experimental features required.
+- **`<ComarkAsync>`** — Uses Svelte's experimental `await` support with `<svelte:boundary>`. Cleaner, but requires `experimental.async` in your Svelte config.
+
+Both components accept the same props and produce the same output.
+
+### Installation
+
+```bash
+npm install @comark/svelte
+```
+
+### Basic Usage
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import Alert from './Alert.svelte'
+
+  const content = `# Hello World
+
+This is **markdown** with Comark components.
+
+::alert{type="info"}
+This is an alert!
+::
+`
+</script>
+
+<Comark markdown={content} components={{ alert: Alert }} />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `markdown` | `string` | `''` | Markdown content to parse and render |
+| `options` | `ParseOptions` | `{}` | Parser options (autoUnwrap, autoClose, etc.) |
+| `plugins` | `ComarkPlugin[]` | `[]` | Array of plugins (highlight, emoji, toc, etc.) |
+| `components` | `Record<string, Component>` | `{}` | Custom Svelte component mappings |
+| `componentsManifest` | `ComponentManifest` | `undefined` | Dynamic component resolver function |
+| `streaming` | `boolean` | `false` | Enable streaming mode |
+| `caret` | `boolean \| { class: string }` | `false` | Append caret to last text node |
+| `class` | `string` | `''` | CSS class for wrapper element |
+
+### With Parser Options
+
+Use the `options` prop to configure parser behavior:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  const content = '# Hello World'
+  const options = {
+    autoUnwrap: true,  // Remove <p> wrappers from single-paragraph containers
+    autoClose: true,   // Auto-close incomplete syntax
+  }
+</script>
+
+<Comark markdown={content} {options} />
+```
+
+### With Plugins
+
+Use the `plugins` prop to add functionality like syntax highlighting, emoji support, or table of contents:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import highlight from 'comark/plugins/highlight'
+  import githubLight from '@shikijs/themes/github-light'
+
+  const plugins = [
+    highlight({ theme: githubLight }),
+  ]
+</script>
+
+<Comark markdown="```js\nconsole.log('hello')\n```" {plugins} />
+```
+
+### With Math Plugin
+
+The `@comark/svelte/plugin-math` subpath bundles the math plugin and a Svelte rendering component:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import { math, Math } from '@comark/svelte/plugin-math'
+
+  const markdown = 'The formula $E = mc^2$ is famous.'
+</script>
+
+<Comark {markdown} components={{ math: Math }} plugins={[math()]} />
+```
+
+### With Mermaid Plugin
+
+The `@comark/svelte/plugin-mermaid` subpath provides Mermaid diagram support:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import { mermaid, Mermaid } from '@comark/svelte/plugin-mermaid'
+</script>
+
+<Comark markdown={content} components={{ mermaid: Mermaid }} plugins={[mermaid()]} />
+```
+
+### With Custom Components
+
+Map Svelte components to Comark elements using the `components` prop. Components are resolved by:
+1. `Prose{PascalTag}` — e.g., `ProseH1` for `<h1>` elements
+2. `PascalTag` — e.g., `Alert` for `::alert` components
+3. `tag` — e.g., `alert` for `::alert` components
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import Alert from './Alert.svelte'
+  import ProseH1 from './ProseH1.svelte'
+
+  const components = { alert: Alert, ProseH1 }
+</script>
+
+<Comark markdown={content} {components} />
+```
+
+A custom component receives the AST node's attributes as props and its children as a Svelte `children` snippet:
+
+```svelte [Alert.svelte]
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let { type = 'info', children }: { type?: string, children?: Snippet } = $props()
+</script>
+
+<div class="alert alert-{type}" role="alert">
+  {@render children?.()}
+</div>
+```
+
+#### Overriding Native HTML Elements
+
+Use the `Prose` prefix to override how native HTML elements render. For example, to customize all `<h1>` elements:
+
+```svelte [ProseH1.svelte]
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let { id, children }: { id?: string, children?: Snippet } = $props()
+</script>
+
+<h1 {id} class="custom-heading">
+  {@render children?.()}
+</h1>
+```
+
+```svelte [App.svelte]
+<Comark markdown={content} components={{ ProseH1 }} />
+```
+
+## Experimental Async (`ComarkAsync`)
+
+The `ComarkAsync` component uses Svelte's experimental `await` in `$derived` for a more declarative approach. This requires `experimental.async` in your Svelte config:
+
+```js [svelte.config.js]
+const config = {
+  compilerOptions: {
+    experimental: {
+      async: true,
+    },
+  },
+}
+
+export default config
+```
+
+Wrap `ComarkAsync` in a `<svelte:boundary>` to handle loading and error states:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { ComarkAsync } from '@comark/svelte/async'
+
+  let content = $state('# Hello World')
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} />
+  {#snippet pending()}
+    <p>Loading...</p>
+  {/snippet}
+  {#snippet failed(error, reset)}
+    <p>Error: {error.message}</p>
+    <button onclick={reset}>Retry</button>
+  {/snippet}
+</svelte:boundary>
+```
+
+::callout{icon="i-lucide-triangle-alert" color="warning"}
+The `experimental.async` feature is still experimental in Svelte 5. For production use, prefer the stable `<Comark>` component.
+::
+
+## Low-Level Rendering
+
+For more control, use `ComarkRenderer` to render a pre-parsed AST tree:
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { ComarkRenderer } from '@comark/svelte'
+  import { parse } from 'comark'
+
+  let tree = $state(null)
+
+  $effect(() => {
+    parse('# Hello **World**').then((result) => {
+      tree = result
+    })
+  })
+</script>
+
+{#if tree}
+  <ComarkRenderer {tree} />
+{/if}
+```
+
+## Streaming
+
+Enable streaming mode to render content as it arrives, with a blinking caret indicator:
+
+```svelte [AiChat.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  let content = $state('')
+  let isStreaming = $state(false)
+
+  async function askAI(prompt: string) {
+    content = ''
+    isStreaming = true
+
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({ prompt }),
+    })
+
+    const reader = response.body!.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      content += decoder.decode(value, { stream: true })
+    }
+
+    isStreaming = false
+  }
+</script>
+
+<Comark markdown={content} streaming={isStreaming} caret />
+```
+
+::callout{icon="i-lucide-info" color="info"}
+`autoClose` is enabled by default — incomplete syntax like `**bold text` is automatically closed on every parse. The caret is only visible while `streaming` is `true`.
+::
+
+Customize the caret with a CSS class:
+
+```svelte
+<Comark markdown={content} streaming={isStreaming} caret={{ class: 'my-caret' }} />
+```
+
+For more details on streaming, see the [Streaming guide](/rendering/streaming).
+
+---
+
+## Next Steps
+
+- [Streaming](/rendering/streaming) - Real-time incremental rendering with auto-close
+- [Vue Rendering](/rendering/vue) - Full Vue component API
+- [React Rendering](/rendering/react) - Full React component API
+- [Parse API](/api/parse) - Parser options and configuration
diff --git a/docs/content/3.rendering/3.streaming.md b/docs/content/3.rendering/4.streaming.md
similarity index 87%
rename from docs/content/3.rendering/3.streaming.md
rename to docs/content/3.rendering/4.streaming.md
index bb91e17..7bc5071 100644
--- a/docs/content/3.rendering/3.streaming.md
+++ b/docs/content/3.rendering/4.streaming.md
@@ -112,6 +112,40 @@ export default function AiChat() {
 }
 ```
 
+## Svelte Streaming
+
+```svelte [components/AiChat.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  let content = $state('')
+  let isStreaming = $state(false)
+
+  async function askAI(prompt: string) {
+    content = ''
+    isStreaming = true
+
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({ prompt }),
+    })
+
+    const reader = response.body!.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      content += decoder.decode(value, { stream: true })
+    }
+
+    isStreaming = false
+  }
+</script>
+
+<Comark markdown={content} streaming={isStreaming} caret />
+```
+
 ## Caret Indicator
 
 The `caret` prop appends a blinking cursor to the last text node, giving visual feedback that content is still arriving:
@@ -217,4 +251,5 @@ When calling `autoCloseMarkdown` manually, pass `autoClose: false` to `parse` to
 - [Auto-Close API](/api/auto-close) - Detailed auto-close function reference
 - [Vue Rendering](/rendering/vue) - Full Vue component API
 - [React Rendering](/rendering/react) - Full React component API
+- [Svelte Rendering](/rendering/svelte) - Full Svelte component API
 - [Parse API](/api/parse) - Parser options and configuration
diff --git a/docs/content/4.plugins/2.external/10.mermaid.md b/docs/content/4.plugins/2.external/10.mermaid.md
index 80d95e2..4b28ced 100644
--- a/docs/content/4.plugins/2.external/10.mermaid.md
+++ b/docs/content/4.plugins/2.external/10.mermaid.md
@@ -92,6 +92,24 @@ function App() {
 }
 ```
 
+### With Svelte
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import { mermaid, Mermaid } from '@comark/svelte/plugin-mermaid'
+
+  const markdown = `
+\`\`\`mermaid
+graph TD
+    A[Start] --> B[End]
+\`\`\`
+`
+</script>
+
+<Comark {markdown} components={{ mermaid: Mermaid }} plugins={[mermaid()]} />
+```
+
 ### With Parse API
 
 ```typescript
diff --git a/docs/content/4.plugins/2.external/11.math.md b/docs/content/4.plugins/2.external/11.math.md
index b86d3d8..4b310c8 100644
--- a/docs/content/4.plugins/2.external/11.math.md
+++ b/docs/content/4.plugins/2.external/11.math.md
@@ -96,6 +96,25 @@ function App() {
 }
 ```
 
+### With Svelte
+
+```svelte [App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import { math, Math } from '@comark/svelte/plugin-math'
+
+  const markdown = `
+The equation $E = mc^2$ is famous.
+
+$$
+x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
+$$
+`
+</script>
+
+<Comark {markdown} components={{ math: Math }} plugins={[math()]} />
+```
+
 ### With Parse API
 
 ```typescript [parse.ts]
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index ab68a7d..23a6245 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -23,7 +23,7 @@ export default defineNuxtConfig({
     build: {
       markdown: {
         highlight: {
-          langs: ['tsx', 'vue', 'html', 'css', 'json', 'markdown', 'bash', 'shell', 'astro'],
+          langs: ['tsx', 'svelte', 'vue', 'html', 'css', 'json', 'markdown', 'bash', 'shell', 'astro'],
         },
       },
     },
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e13d87f..dfbc76e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,8 @@
 // @ts-check
 import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import svelte from 'eslint-plugin-svelte'
+import stylistic from '@stylistic/eslint-plugin'
+import svelteConfig from './packages/comark-svelte/svelte.config.js'
 
 // Run `npx @eslint/config-inspector` to inspect the resolved config interactively
 export default createConfigForNuxt({
@@ -10,6 +13,36 @@ export default createConfigForNuxt({
     stylistic: true,
   },
 })
+  .append(
+    ...svelte.configs.recommended,
+  )
+  .append(
+    {
+      files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+      languageOptions: {
+        parserOptions: {
+          svelteConfig,
+        },
+      },
+    },
+  )
+  .append(
+    {
+      // Apply stylistic rules to Svelte files (nuxt config only targets js/ts/vue)
+      files: ['**/*.svelte'],
+      plugins: {
+        '@stylistic': stylistic,
+      },
+      rules: {
+        ...stylistic.configs.recommended.rules,
+        '@stylistic/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+        '@stylistic/comma-dangle': ['error', 'always-multiline'],
+        '@stylistic/indent': ['error', 2],
+        '@stylistic/quotes': ['error', 'single'],
+        '@stylistic/semi': ['error', 'never'],
+      },
+    },
+  )
   .append(
     {
       rules: {
diff --git a/examples/2.vite/svelte-vite/README.md b/examples/2.vite/svelte-vite/README.md
new file mode 100644
index 0000000..3016f4b
--- /dev/null
+++ b/examples/2.vite/svelte-vite/README.md
@@ -0,0 +1,141 @@
+---
+title: Svelte
+description: A minimal example showing how to use Comark with Svelte and Vite.
+navigation.icon: i-simple-icons-svelte
+category: Vite
+path: /examples/vite/svelte-vite
+---
+
+::code-tree{defaultValue="src/App.svelte" expandAll}
+
+```ts [src/main.ts]
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+mount(App, {
+  target: document.getElementById('app')!,
+})
+```
+
+```svelte [src/App.svelte]
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import Alert from './components/Alert.svelte'
+
+  const markdown = `
+# Hello *World*
+
+::alert{type="info"}
+This is an alert!
+::
+`
+</script>
+
+<Comark markdown={markdown} components={{ Alert }} />
+```
+
+```svelte [src/components/Alert.svelte]
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    type = 'info',
+    children,
+  }: {
+    type?: 'info' | 'warning' | 'success' | 'danger'
+    children?: Snippet
+  } = $props()
+
+  const config = {
+    info: 'bg-blue-50 border-blue-400 text-blue-900 dark:bg-blue-950/50 dark:border-blue-500/50 dark:text-blue-200',
+    warning: 'bg-amber-50 border-amber-400 text-amber-900 dark:bg-amber-950/50 dark:border-amber-500/50 dark:text-amber-200',
+    success: 'bg-emerald-50 border-emerald-400 text-emerald-900 dark:bg-emerald-950/50 dark:border-emerald-500/50 dark:text-emerald-200',
+    danger: 'bg-red-50 border-red-400 text-red-900 dark:bg-red-950/50 dark:border-red-500/50 dark:text-red-200',
+  }
+</script>
+
+<div
+  class="my-4 rounded-lg border-l-4 px-4 py-3 text-sm leading-relaxed {config[type]}"
+  role="alert"
+>
+  {@render children?.()}
+</div>
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    svelte(),
+    tailwindcss(),
+  ],
+})
+```
+
+```json [package.json]
+{
+  "name": "comark-svelte-vite",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@comark/svelte": "workspace:*",
+    "@tailwindcss/vite": "^4.2.0",
+    "comark": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "svelte": "^5.53.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}
+```
+
+```html [index.html]
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Comark - Svelte Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+
+```json [tsconfig.json]
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}
+```
+
+::
+
+This example demonstrates the simplest way to use Comark with Svelte - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.
diff --git a/examples/2.vite/svelte-vite/index.html b/examples/2.vite/svelte-vite/index.html
new file mode 100644
index 0000000..610008d
--- /dev/null
+++ b/examples/2.vite/svelte-vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Comark - Svelte Example</title>
+    <link href="/src/index.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/2.vite/svelte-vite/package.json b/examples/2.vite/svelte-vite/package.json
new file mode 100644
index 0000000..4960e24
--- /dev/null
+++ b/examples/2.vite/svelte-vite/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "comark-svelte-vite",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@comark/svelte": "workspace:*",
+    "@tailwindcss/vite": "^4.2.0",
+    "comark": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "svelte": "^5.53.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/examples/2.vite/svelte-vite/src/App.svelte b/examples/2.vite/svelte-vite/src/App.svelte
new file mode 100644
index 0000000..6d7b9a3
--- /dev/null
+++ b/examples/2.vite/svelte-vite/src/App.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import Alert from './components/Alert.svelte'
+
+  const markdown = `
+# Hello *World*
+
+::alert{type="info"}
+This is an alert!
+::
+`
+</script>
+
+<Comark markdown={markdown} components={{ Alert }} />
diff --git a/examples/2.vite/svelte-vite/src/components/Alert.svelte b/examples/2.vite/svelte-vite/src/components/Alert.svelte
new file mode 100644
index 0000000..e74024e
--- /dev/null
+++ b/examples/2.vite/svelte-vite/src/components/Alert.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    type = 'info',
+    children,
+  }: {
+    type?: 'info' | 'warning' | 'success' | 'danger'
+    children?: Snippet
+  } = $props()
+
+  const config = {
+    info: 'bg-blue-50 border-blue-400 text-blue-900 dark:bg-blue-950/50 dark:border-blue-500/50 dark:text-blue-200',
+    warning: 'bg-amber-50 border-amber-400 text-amber-900 dark:bg-amber-950/50 dark:border-amber-500/50 dark:text-amber-200',
+    success: 'bg-emerald-50 border-emerald-400 text-emerald-900 dark:bg-emerald-950/50 dark:border-emerald-500/50 dark:text-emerald-200',
+    danger: 'bg-red-50 border-red-400 text-red-900 dark:bg-red-950/50 dark:border-red-500/50 dark:text-red-200',
+  }
+</script>
+
+<div
+  class="my-4 rounded-lg border-l-4 px-4 py-3 text-sm leading-relaxed {config[type]}"
+  role="alert"
+>
+  {@render children?.()}
+</div>
diff --git a/examples/2.vite/svelte-vite/src/index.css b/examples/2.vite/svelte-vite/src/index.css
new file mode 100644
index 0000000..ea752f8
--- /dev/null
+++ b/examples/2.vite/svelte-vite/src/index.css
@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@source "./**/*.svelte";
+
+body {
+  @apply bg-neutral-50 dark:bg-neutral-950 p-4 text-neutral-900 dark:text-neutral-50;
+}
diff --git a/examples/2.vite/svelte-vite/src/main.ts b/examples/2.vite/svelte-vite/src/main.ts
new file mode 100644
index 0000000..765afde
--- /dev/null
+++ b/examples/2.vite/svelte-vite/src/main.ts
@@ -0,0 +1,6 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+mount(App, {
+  target: document.getElementById('app')!,
+})
diff --git a/examples/2.vite/svelte-vite/svelte.config.js b/examples/2.vite/svelte-vite/svelte.config.js
new file mode 100644
index 0000000..071bad2
--- /dev/null
+++ b/examples/2.vite/svelte-vite/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+export default config
diff --git a/examples/2.vite/svelte-vite/tsconfig.json b/examples/2.vite/svelte-vite/tsconfig.json
new file mode 100644
index 0000000..e092317
--- /dev/null
+++ b/examples/2.vite/svelte-vite/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}
diff --git a/examples/2.vite/svelte-vite/vite.config.ts b/examples/2.vite/svelte-vite/vite.config.ts
new file mode 100644
index 0000000..cac72c7
--- /dev/null
+++ b/examples/2.vite/svelte-vite/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    svelte(),
+    tailwindcss(),
+  ],
+})
diff --git a/package.json b/package.json
index 0df2474..f2d62ce 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dev:playground": "nuxt dev playground",
     "dev:prepare": "nuxt prepare playground",
     "dev:react": "pnpm --filter comark-react-vite run dev",
+    "dev:svelte": "pnpm --filter comark-svelte-vite run dev",
     "dev:vue": "pnpm --filter comark-vue-vite run dev",
     "dev:vue:mermaid": "pnpm --filter comark-vue-vite-mermaid run dev",
     "dev:vue:math": "pnpm --filter comark-vue-vite-math run dev",
@@ -34,7 +35,7 @@
     "verify": "pnpm run lint && pnpm run test && pnpm run typecheck",
     "release": "pnpm --filter 'comark' run release && pnpm --filter '@comark/cjk' run release && pnpm --filter '@comark/math' run release",
     "release:dry": "pnpm --filter 'comark' run release:dry && pnpm --filter '@comark/cjk' run release:dry && pnpm --filter '@comark/math' run release:dry",
-    "postinstall": "pnpm --filter 'comark' run build --stub && pnpm --filter '@comark/*' run build --stub"
+    "postinstall": "pnpm --filter 'comark' run build --stub && pnpm --filter '@comark/*' --filter '!@comark/svelte' run build --stub"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.15.2",
@@ -42,6 +43,7 @@
     "@types/node": "^25.3.3",
     "@vitejs/plugin-vue": "^6.0.4",
     "eslint": "^10.0.2",
+    "eslint-plugin-svelte": "^3.15.0",
     "nuxt": "^4.3.1",
     "release-it": "^19.2.4",
     "remark-gfm": "^4.0.1",
diff --git a/packages/comark-svelte/package.json b/packages/comark-svelte/package.json
new file mode 100644
index 0000000..be9c8b9
--- /dev/null
+++ b/packages/comark-svelte/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@comark/svelte",
+  "version": "1.0.0",
+  "description": "Svelte renderer for Comark (Components in Markdown)",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "repository": "comarkdown/comark",
+  "keywords": [
+    "markdown",
+    "mdc",
+    "comark",
+    "svelte",
+    "renderer",
+    "streaming"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./async": {
+      "types": "./dist/async/index.d.ts",
+      "svelte": "./dist/async/index.js"
+    },
+    "./plugin-math": {
+      "types": "./dist/plugin-math/index.d.ts",
+      "svelte": "./dist/plugin-math/index.js"
+    },
+    "./plugin-mermaid": {
+      "types": "./dist/plugin-mermaid/index.d.ts",
+      "svelte": "./dist/plugin-mermaid/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package --input src",
+    "build:watch": "svelte-package --input src --watch",
+    "test": "vitest run",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@comark/math": "workspace:*",
+    "@comark/mermaid": "workspace:*",
+    "beautiful-mermaid": "^1.1.3",
+    "comark": "workspace:*",
+    "katex": "^0.16.33",
+    "scule": "^1.3.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "svelte": "^5.53.7",
+    "svelte-check": "^4.2.1",
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^0.1.0"
+  }
+}
diff --git a/packages/comark-svelte/src/Comark.svelte b/packages/comark-svelte/src/Comark.svelte
new file mode 100644
index 0000000..b53f1c9
--- /dev/null
+++ b/packages/comark-svelte/src/Comark.svelte
@@ -0,0 +1,81 @@
+<!--
+@component
+High-level Comark component that accepts a markdown string, parses it, and renders it.
+
+Uses `$state` and `$effect` for async parsing — no experimental features required.
+Renders nothing until the first parse completes.
+
+@example
+```svelte
+<script>
+  import { Comark } from '@comark/svelte'
+  import Alert from './Alert.svelte'
+
+  let content = `
+# Hello World
+
+::alert{type="info"}
+This is an alert component
+::
+`
+</script>
+
+<Comark markdown={content} components={{ alert: Alert }} />
+```
+-->
+<script lang="ts">
+  import type { ComarkTree } from 'comark/ast'
+  import type { ComarkPlugin, ComponentManifest } from 'comark'
+  import { parse } from 'comark'
+  import ComarkRenderer from './ComarkRenderer.svelte'
+
+  let {
+    markdown = '',
+    options = {},
+    plugins = [],
+    components = {},
+    componentsManifest,
+    streaming = false,
+    caret = false,
+    class: className = '',
+  }: {
+    markdown?: string
+    options?: Record<string, any>
+    plugins?: ComarkPlugin[]
+    components?: Record<string, any>
+    componentsManifest?: ComponentManifest
+    streaming?: boolean
+    caret?: boolean | { class: string }
+    class?: string
+  } = $props()
+
+  let parsed: ComarkTree | null = $state(null)
+
+  let content = $derived((markdown || '').trim())
+
+  let requestVersion = 0
+  let appliedVersion = 0
+  $effect(() => {
+    const currentVersion = ++requestVersion
+    // `parse` directly mutates `plugins` which creates an infinite effect loop
+    // so we copy it before passing it in so it gets a regular JS array and we get to still
+    // track dependencies from an external perspective
+    parse(content, { ...options, plugins: [...plugins] }).then((result) => {
+      if (currentVersion > appliedVersion) {
+        appliedVersion = currentVersion
+        parsed = result
+      }
+    })
+  })
+</script>
+
+{#if parsed}
+  <ComarkRenderer
+    tree={parsed}
+    {components}
+    {componentsManifest}
+    {streaming}
+    {caret}
+    class={className}
+  />
+{/if}
diff --git a/packages/comark-svelte/src/ComarkNode.svelte b/packages/comark-svelte/src/ComarkNode.svelte
new file mode 100644
index 0000000..74b4107
--- /dev/null
+++ b/packages/comark-svelte/src/ComarkNode.svelte
@@ -0,0 +1,138 @@
+<!--
+@component
+Recursive Comark AST node renderer.
+
+Renders a single `ComarkNode` — either a text string, a native HTML element
+(via `<svelte:element>`), or a custom component (via a capitalized variable).
+
+Recurses into children by importing itself. The streaming caret is threaded
+through props and only forwarded to the last child at each level, so it
+naturally appears inline after the deepest trailing text node.
+
+@example
+```svelte
+<ComarkNode node={astNode} components={{ alert: Alert }} />
+```
+-->
+<script lang="ts">
+  import type { ComarkNode as ComarkNodeType } from 'comark/ast'
+  import type { ComponentManifest } from 'comark'
+  import ComarkNode from './ComarkNode.svelte'
+  import { pascalCase } from 'scule'
+
+  let {
+    node,
+    components = {},
+    componentsManifest,
+    caretClass = null,
+  }: {
+    node: ComarkNodeType
+    components?: Record<string, any>
+    componentsManifest?: ComponentManifest
+    caretClass?: string | null
+  } = $props()
+
+  const CARET_TEXT = '\u2009'
+  const CARET_STYLE
+    = 'background-color: currentColor; display: inline-block; margin-left: 0.25rem; margin-right: 0.25rem; animation: pulse 0.75s cubic-bezier(0.4,0,0.6,1) infinite;'
+
+  function parsePropValue(value: string): any {
+    if (value === 'true') return true
+    if (value === 'false') return false
+    if (value === 'null') return null
+    try {
+      return JSON.parse(value)
+    }
+    catch {
+      return value
+    }
+  }
+
+  const VOID_ELEMENTS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr',
+  ])
+
+  let { isText, tag, isVoid, children, Component, mappedProps } = $derived.by(() => {
+    let isText = false
+    let tag: string | null = null
+    let isVoid = false
+    let children: ComarkNodeType[] = []
+    let Component: any = null
+    let mappedProps: Record<string, any> = {}
+
+    if (typeof node === 'string') {
+      isText = true
+      return { isText, tag, isVoid, children, Component, mappedProps }
+    }
+
+    if (!Array.isArray(node) || node.length < 1) {
+      return { isText, tag, isVoid, children, Component, mappedProps }
+    }
+
+    // Comment nodes have null as the tag
+    if (node[0] === null) {
+      return { isText, tag, isVoid, children, Component, mappedProps }
+    }
+
+    tag = node[0] as string
+    isVoid = VOID_ELEMENTS.has(tag)
+    const nodeProps: Record<string, any>
+      = (node.length >= 2 ? node[1] : {}) ?? {}
+    children = node.length > 2 ? (node.slice(2) as ComarkNodeType[]) : []
+
+    // Resolve custom component: check Prose{PascalTag}, PascalTag, then raw tag
+    const pascal = pascalCase(tag)
+    Component
+      = components[`Prose${pascal}`]
+        || components[pascal]
+        || components[tag]
+        || null
+
+    // Map props: className → class, :prefix → parsed value, rest pass through
+    for (const k in nodeProps) {
+      if (k === 'className') {
+        mappedProps.class = nodeProps[k]
+      }
+      else if (k.charCodeAt(0) === 58 /* ':' */) {
+        mappedProps[k.substring(1)] = parsePropValue(nodeProps[k])
+      }
+      else {
+        mappedProps[k] = nodeProps[k]
+      }
+    }
+
+    return { isText, tag, isVoid, children, Component, mappedProps }
+  })
+</script>
+
+{#if isText}
+  {node}{#if caretClass !== null}<span
+      class={caretClass || undefined}
+      style={CARET_STYLE}>{CARET_TEXT}</span
+    >{/if}
+{:else if Component}
+  <Component {...mappedProps}>
+    {#each children as child, i (i)}
+      <ComarkNode
+        node={child}
+        {components}
+        {componentsManifest}
+        caretClass={i === children.length - 1 ? caretClass : null}
+      />
+    {/each}
+  </Component>
+{:else if isVoid}
+  <svelte:element this={tag} {...mappedProps} />
+{:else if tag}
+  <svelte:element this={tag} {...mappedProps}>
+    {#each children as child, i (i)}
+      <ComarkNode
+        node={child}
+        {components}
+        {componentsManifest}
+        caretClass={i === children.length - 1 ? caretClass : null}
+      />
+    {/each}
+  </svelte:element>
+{/if}
diff --git a/packages/comark-svelte/src/ComarkNode.svelte.test.ts b/packages/comark-svelte/src/ComarkNode.svelte.test.ts
new file mode 100644
index 0000000..c2c2e52
--- /dev/null
+++ b/packages/comark-svelte/src/ComarkNode.svelte.test.ts
@@ -0,0 +1,202 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+import { parse } from 'comark'
+import ComarkRenderer from './ComarkRenderer.svelte'
+import ComarkNode from './ComarkNode.svelte'
+import Alert from './test-components/Alert.svelte'
+import ProseH1 from './test-components/ProseH1.svelte'
+
+describe('ComarkNode', () => {
+  it('renders a paragraph', async () => {
+    const tree = await parse('Hello world')
+    const screen = render(ComarkNode, { node: tree.nodes[0] })
+    await expect.element(screen.getByText('Hello world')).toBeInTheDocument()
+  })
+
+  it('renders nested inline markup', async () => {
+    const tree = await parse('Hello **World**')
+    const screen = render(ComarkNode, { node: tree.nodes[0] })
+    await expect.element(screen.getByText('Hello World')).toBeInTheDocument()
+    await expect.element(screen.getByText('World')).toBeInTheDocument()
+  })
+
+  it('renders a link with href', async () => {
+    const tree = await parse('[link](/about)')
+    const screen = render(ComarkNode, { node: tree.nodes[0] })
+    await expect
+      .element(screen.getByRole('link', { name: 'link' }))
+      .toHaveAttribute('href', '/about')
+  })
+
+  it('maps className to class', async () => {
+    const screen = render(ComarkNode, {
+      node: ['div', { className: 'my-class' }, 'content'],
+    })
+    const div = screen.container.querySelector<HTMLElement>('.my-class')!
+    expect(div).not.toBeNull()
+    await expect.element(div).toHaveTextContent('content')
+  })
+
+  it('renders caret with custom class', async () => {
+    const screen = render(ComarkNode, {
+      node: 'text',
+      caretClass: 'test-caret',
+    })
+    const caret = screen.container.querySelector<HTMLElement>('.test-caret')!
+    expect(caret).not.toBeNull()
+    await expect.element(caret).toHaveStyle({ display: 'inline-block' })
+  })
+
+  it('does not render caret when caretClass is null', async () => {
+    const screen = render(ComarkNode, {
+      node: 'text',
+      caretClass: null,
+    })
+    expect(screen.container.querySelector('span')).toBeNull()
+  })
+
+  it('threads caret to deepest last text node', async () => {
+    const tree = await parse('first **last**')
+    const screen = render(ComarkNode, {
+      node: tree.nodes[0],
+      caretClass: 'caret',
+    })
+    const strong = screen.container.querySelector<HTMLElement>('strong')!
+    expect(strong.querySelector('.caret')).not.toBeNull()
+    expect(screen.container.querySelectorAll('.caret').length).toBe(1)
+  })
+})
+
+describe('ComarkRenderer', () => {
+  it('renders a heading with inline markup', async () => {
+    const tree = await parse('# Hello **World**')
+    const screen = render(ComarkRenderer, { tree })
+    const heading = screen.getByRole('heading', {
+      name: 'Hello World',
+      level: 1,
+    })
+    await expect.element(heading).toBeInTheDocument()
+    await expect.element(heading).toHaveAttribute('id', 'hello-strong-world')
+  })
+
+  it('renders multiple block elements', async () => {
+    const tree = await parse('# Heading\n\nA paragraph\n\n- item 1\n- item 2')
+    const screen = render(ComarkRenderer, { tree })
+
+    await expect
+      .element(screen.getByRole('heading', { name: 'Heading', level: 1 }))
+      .toBeInTheDocument()
+    await expect.element(screen.getByText('A paragraph')).toBeInTheDocument()
+
+    const items = screen.getByRole('listitem')
+    expect(items.elements().length).toBe(2)
+    await expect.element(items.nth(0)).toHaveTextContent('item 1')
+    await expect.element(items.nth(1)).toHaveTextContent('item 2')
+  })
+
+  it('renders empty tree as empty wrapper', async () => {
+    const tree = { nodes: [], frontmatter: {}, meta: {} }
+    const screen = render(ComarkRenderer, { tree })
+    const wrapper
+      = screen.container.querySelector<HTMLElement>('.comark-content')!
+    expect(wrapper).not.toBeNull()
+    expect(wrapper.children.length).toBe(0)
+  })
+
+  it('applies custom class to wrapper', async () => {
+    const tree = await parse('hello')
+    const screen = render(ComarkRenderer, { tree, class: 'prose' })
+    const wrapper
+      = screen.container.querySelector<HTMLElement>('.comark-content')!
+    await expect.element(wrapper).toHaveClass('prose')
+  })
+
+  it('renders inline code', async () => {
+    const tree = await parse('use `const x = 1`')
+    const screen = render(ComarkRenderer, { tree })
+    await expect.element(screen.getByText('const x = 1')).toBeInTheDocument()
+  })
+
+  it('renders links with href', async () => {
+    const tree = await parse('[click](https://example.com)')
+    const screen = render(ComarkRenderer, { tree })
+    await expect
+      .element(screen.getByRole('link', { name: 'click' }))
+      .toHaveAttribute('href', 'https://example.com')
+  })
+
+  it('renders images with src and alt', async () => {
+    const tree = await parse('![alt text](image.png)')
+    const screen = render(ComarkRenderer, { tree })
+    await expect
+      .element(screen.getByAltText('alt text'))
+      .toHaveAttribute('src', 'image.png')
+  })
+
+  it('renders blockquotes', async () => {
+    const tree = await parse('> quoted text')
+    const screen = render(ComarkRenderer, { tree })
+    expect(screen.container.querySelector('blockquote')).not.toBeNull()
+    await expect.element(screen.getByText('quoted text')).toBeInTheDocument()
+  })
+
+  it('renders emphasis and strong', async () => {
+    const tree = await parse('*em* and **strong**')
+    const screen = render(ComarkRenderer, { tree })
+    await expect.element(screen.getByText('em')).toBeInTheDocument()
+    await expect.element(screen.getByText('strong')).toBeInTheDocument()
+  })
+})
+
+describe('custom components', () => {
+  it('resolves custom component for MDC syntax', async () => {
+    const tree = await parse('::alert{type="warning"}\nWatch out!\n::')
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { alert: Alert },
+    })
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Watch out!')
+    await expect.element(screen.getByRole('alert')).toHaveClass('alert-warning')
+  })
+
+  it('resolves component by PascalCase key', async () => {
+    const tree = await parse('::alert{type="info"}\nInfo message\n::')
+    const screen = render(ComarkRenderer, { tree, components: { Alert } })
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Info message')
+    await expect.element(screen.getByRole('alert')).toHaveClass('alert-info')
+  })
+
+  it('resolves Prose-prefixed component for native tags', async () => {
+    const tree = await parse('# Custom Heading')
+    const screen = render(ComarkRenderer, { tree, components: { ProseH1 } })
+    await expect
+      .element(
+        screen.getByRole('heading', { name: 'Custom Heading', level: 1 }),
+      )
+      .toHaveClass('prose-heading')
+  })
+
+  it('renders children inside custom components', async () => {
+    const tree = await parse('::alert{type="info"}\n**Bold** text\n::')
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { alert: Alert },
+    })
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Bold text')
+    await expect.element(screen.getByRole('alert')).toHaveClass('alert-info')
+  })
+
+  it('falls back to native element when no component matches', async () => {
+    const tree = await parse('::alert{type="info"}\ncontent\n::')
+    const screen = render(ComarkRenderer, { tree, components: {} })
+    const alert = screen.container.querySelector<HTMLElement>('alert')!
+    expect(alert).not.toBeNull()
+    await expect.element(alert).toHaveTextContent('content')
+  })
+})
diff --git a/packages/comark-svelte/src/ComarkNode.test.ts b/packages/comark-svelte/src/ComarkNode.test.ts
new file mode 100644
index 0000000..f7371e7
--- /dev/null
+++ b/packages/comark-svelte/src/ComarkNode.test.ts
@@ -0,0 +1,264 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'svelte/server'
+import { parse } from 'comark'
+import ComarkRenderer from './ComarkRenderer.svelte'
+import ComarkNode from './ComarkNode.svelte'
+import Alert from './test-components/Alert.svelte'
+import ProseH1 from './test-components/ProseH1.svelte'
+
+/** Strip Svelte SSR hydration comments from rendered HTML */
+function html(body: string): string {
+  return body.replace(/<!--[[\]\-\d!]*-->/g, '').replace(/<!---->/g, '')
+}
+
+const CARET_STYLE
+  = 'background-color: currentColor; display: inline-block; margin-left: 0.25rem; margin-right: 0.25rem; animation: pulse 0.75s cubic-bezier(0.4,0,0.6,1) infinite;'
+
+describe('ComarkNode', () => {
+  it('renders a paragraph', async () => {
+    const tree = await parse('A paragraph')
+    const { body } = render(ComarkNode, { props: { node: tree.nodes[0] } })
+    expect(html(body)).toBe('<p>A paragraph</p>')
+  })
+
+  it('renders nested inline markup', async () => {
+    const tree = await parse('Hello **World**')
+    const { body } = render(ComarkNode, { props: { node: tree.nodes[0] } })
+    expect(html(body)).toBe('<p>Hello <strong>World</strong></p>')
+  })
+
+  it('renders mixed inline markup', async () => {
+    const tree = await parse('one *two* three')
+    const { body } = render(ComarkNode, { props: { node: tree.nodes[0] } })
+    expect(html(body)).toBe('<p>one <em>two</em> three</p>')
+  })
+
+  it('renders a link with attributes', async () => {
+    const tree = await parse('[link](/about)')
+    const { body } = render(ComarkNode, { props: { node: tree.nodes[0] } })
+    expect(html(body)).toBe('<p><a href="/about">link</a></p>')
+  })
+
+  it('renders a thematic break', async () => {
+    const tree = await parse('---')
+    const { body } = render(ComarkNode, { props: { node: tree.nodes[0] } })
+    expect(html(body)).toBe('<hr>')
+  })
+
+  it('skips comment nodes (null tag)', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: [null, {}, 'a comment'] },
+    })
+    expect(html(body)).toBe('')
+  })
+
+  it('maps className to class', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: ['div', { className: 'my-class' }, 'content'] },
+    })
+    expect(html(body)).toBe('<div class="my-class">content</div>')
+  })
+
+  it('parses colon-prefixed props as values', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: ['div', { ':hidden': 'true' }, 'content'] },
+    })
+    expect(html(body)).toBe('<div hidden="">content</div>')
+  })
+
+  it('parses colon-prefixed JSON values', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: ['div', { ':data-count': '42' }, 'content'] },
+    })
+    expect(html(body)).toBe('<div data-count="42">content</div>')
+  })
+
+  it('does not render caret when caretClass is null', async () => {
+    const tree = await parse('some text')
+    const { body } = render(ComarkNode, {
+      props: { node: tree.nodes[0], caretClass: null },
+    })
+    expect(html(body)).toBe('<p>some text</p>')
+    expect(html(body)).not.toContain('<span')
+  })
+
+  it('renders caret with custom class on text node', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: 'text', caretClass: 'my-caret' },
+    })
+    expect(html(body)).toBe(
+      `text<span class="my-caret" style="${CARET_STYLE}">\u2009</span>`,
+    )
+  })
+
+  it('renders caret without class when caretClass is empty string', () => {
+    const { body } = render(ComarkNode, {
+      props: { node: 'text', caretClass: '' },
+    })
+    expect(html(body)).toBe(`text<span style="${CARET_STYLE}">\u2009</span>`)
+  })
+
+  it('threads caret to deepest last text node', async () => {
+    const tree = await parse('first **last**')
+    const { body } = render(ComarkNode, {
+      props: { node: tree.nodes[0], caretClass: '' },
+    })
+    const output = html(body)
+    // Caret should be inside <strong>, after "last"
+    expect(output).toContain(
+      `last<span style="${CARET_STYLE}">\u2009</span></strong>`,
+    )
+    // Not after the </strong>
+    expect(output).not.toContain(`</strong><span`)
+  })
+
+  it('threads caret through deeply nested structure', async () => {
+    const tree = await parse('*__**deep**__*')
+    const { body } = render(ComarkNode, {
+      props: { node: tree.nodes[0], caretClass: 'c' },
+    })
+    const output = html(body)
+    // Caret should be at the very deepest level, after "deep"
+    expect(output).toContain(
+      `deep<span class="c" style="${CARET_STYLE}">\u2009</span>`,
+    )
+  })
+
+  it('does not attach caret to non-last children', async () => {
+    const tree = await parse('**first** last')
+    const { body } = render(ComarkNode, {
+      props: { node: tree.nodes[0], caretClass: '' },
+    })
+    const output = html(body)
+    // Caret should be after "last" (the last child), not inside <strong>
+    expect(output).toContain(`last<span style="${CARET_STYLE}">\u2009</span>`)
+    expect(output).not.toContain(`first<span`)
+  })
+})
+
+describe('ComarkRenderer', () => {
+  it('renders a heading with inline markup', async () => {
+    const tree = await parse('# Hello **World**')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    const output = html(body)
+    expect(output).toContain('<h1 id="hello-strong-world">')
+    expect(output).toContain('Hello <strong>World</strong>')
+    expect(output).toContain('</h1>')
+    expect(output).toMatch(/^<div class="comark-content ">.*<\/div>$/)
+  })
+
+  it('renders multiple block-level elements', async () => {
+    const tree = await parse('# Heading\n\nA paragraph\n\n- item 1\n- item 2')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    const output = html(body)
+    expect(output).toContain('<h1')
+    expect(output).toContain('<p>A paragraph</p>')
+    expect(output).toContain('<ul>')
+    expect(output).toContain('<li>item 1</li>')
+    expect(output).toContain('<li>item 2</li>')
+  })
+
+  it('renders an empty tree as an empty wrapper', () => {
+    const tree = { nodes: [], frontmatter: {}, meta: {} }
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    expect(html(body)).toBe('<div class="comark-content "></div>')
+  })
+
+  it('applies a custom class to the wrapper', async () => {
+    const tree = await parse('hello')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, class: 'prose' },
+    })
+    const output = html(body)
+    expect(output).toMatch(/^<div class="comark-content prose">/)
+    expect(output).toContain('<p>hello</p>')
+  })
+
+  it('renders inline code', async () => {
+    const tree = await parse('use `const x = 1`')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    expect(html(body)).toContain('<code>const x = 1</code>')
+  })
+
+  it('renders links', async () => {
+    const tree = await parse('[click me](https://example.com)')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    expect(html(body)).toContain('<a href="https://example.com">click me</a>')
+  })
+
+  it('renders images', async () => {
+    const tree = await parse('![alt text](image.png)')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    expect(html(body)).toContain('<img src="image.png" alt="alt text">')
+  })
+
+  it('renders blockquotes', async () => {
+    const tree = await parse('> quoted text')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    const output = html(body)
+    expect(output).toContain('<blockquote>')
+    expect(output).toContain('quoted text')
+  })
+
+  it('renders emphasis and strong', async () => {
+    const tree = await parse('*em* and **strong**')
+    const { body } = render(ComarkRenderer, { props: { tree } })
+    const output = html(body)
+    expect(output).toContain('<em>em</em>')
+    expect(output).toContain('<strong>strong</strong>')
+  })
+})
+
+describe('custom components', () => {
+  it('resolves custom component for MDC syntax', async () => {
+    const tree = await parse('::alert{type="warning"}\nWatch out!\n::')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { alert: Alert } },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="alert alert-warning" role="alert">')
+    expect(output).toContain('Watch out!')
+  })
+
+  it('resolves component by PascalCase key', async () => {
+    const tree = await parse('::alert{type="info"}\nInfo message\n::')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { Alert } },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="alert alert-info" role="alert">')
+    expect(output).toContain('Info message')
+  })
+
+  it('resolves Prose-prefixed component for native tags', async () => {
+    const tree = await parse('# Custom Heading')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { ProseH1 } },
+    })
+    const output = html(body)
+    expect(output).toContain('class="prose-heading"')
+    expect(output).toContain('Custom Heading')
+  })
+
+  it('renders children inside custom components', async () => {
+    const tree = await parse('::alert{type="info"}\n**Bold** text\n::')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { alert: Alert } },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="alert alert-info" role="alert">')
+    expect(output).toContain('<strong>Bold</strong>')
+    expect(output).toContain(' text')
+  })
+
+  it('falls back to native element when no component matches', async () => {
+    const tree = await parse('::alert{type="info"}\ncontent\n::')
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: {} },
+    })
+    const output = html(body)
+    // Should render as a native <alert> element, not a custom component
+    expect(output).toContain('<alert')
+    expect(output).toContain('content')
+  })
+})
diff --git a/packages/comark-svelte/src/ComarkRenderer.svelte b/packages/comark-svelte/src/ComarkRenderer.svelte
new file mode 100644
index 0000000..99a6d63
--- /dev/null
+++ b/packages/comark-svelte/src/ComarkRenderer.svelte
@@ -0,0 +1,57 @@
+<!--
+@component
+Renders a Comark AST tree to Svelte components/HTML.
+
+Accepts a parsed `ComarkTree` and renders each top-level node via `ComarkNode`.
+Supports custom component mappings and a streaming caret indicator.
+
+@example
+```svelte
+<script>
+  import { ComarkRenderer } from '@comark/svelte'
+  import { parse } from 'comark'
+
+  const tree = await parse('# Hello **World**')
+</script>
+
+<ComarkRenderer {tree} />
+```
+-->
+<script lang="ts">
+  import type { ComarkTree } from 'comark/ast'
+  import type { ComponentManifest } from 'comark'
+  import ComarkNode from './ComarkNode.svelte'
+
+  let {
+    tree,
+    components = {},
+    componentsManifest,
+    streaming = false,
+    caret: caretProp = false,
+    class: className = '',
+  }: {
+    tree: ComarkTree
+    components?: Record<string, any>
+    componentsManifest?: ComponentManifest
+    streaming?: boolean
+    caret?: boolean | { class: string }
+    class?: string
+  } = $props()
+
+  let caretClass = $derived(
+    streaming && caretProp
+      ? (typeof caretProp === 'object' && caretProp.class) || ''
+      : null,
+  )
+</script>
+
+<div class="comark-content {className}">
+  {#each tree.nodes as node, i (i)}
+    <ComarkNode
+      {node}
+      {components}
+      {componentsManifest}
+      caretClass={i === tree.nodes.length - 1 ? caretClass : null}
+    />
+  {/each}
+</div>
diff --git a/packages/comark-svelte/src/async/ComarkAsync.svelte b/packages/comark-svelte/src/async/ComarkAsync.svelte
new file mode 100644
index 0000000..ce3bf33
--- /dev/null
+++ b/packages/comark-svelte/src/async/ComarkAsync.svelte
@@ -0,0 +1,71 @@
+<!--
+@component
+High-level Comark component using experimental Svelte 5 async support.
+
+Uses `$derived` with `await` to parse markdown reactively. Requires the
+consumer to enable `experimental: { async: true }` in their Svelte config
+and wrap this component in a `<svelte:boundary>` for pending/error states.
+
+@example
+```svelte
+<script>
+  import { ComarkAsync } from '@comark/svelte/async'
+  import Alert from './Alert.svelte'
+
+  let content = $state('# Hello World')
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} components={{ alert: Alert }} />
+  {#snippet pending()}
+    <p>Loading...</p>
+  {/snippet}
+  {#snippet failed(error, reset)}
+    <p>Error: {error.message}</p>
+    <button onclick={reset}>Retry</button>
+  {/snippet}
+</svelte:boundary>
+```
+-->
+<script lang="ts">
+  import type { ComarkPlugin, ComponentManifest } from 'comark'
+  import { parse } from 'comark'
+  import ComarkRenderer from '../ComarkRenderer.svelte'
+
+  let {
+    markdown = '',
+    options = {},
+    plugins = [],
+    components = {},
+    componentsManifest,
+    streaming = false,
+    caret = false,
+    class: className = '',
+  }: {
+    markdown?: string
+    options?: Record<string, any>
+    plugins?: ComarkPlugin[]
+    components?: Record<string, any>
+    componentsManifest?: ComponentManifest
+    streaming?: boolean
+    caret?: boolean | { class: string }
+    class?: string
+  } = $props()
+
+  let content = $derived((markdown || '').trim())
+  let parsed = $derived(
+    // `parse` directly mutates `plugins` which creates an infinite effect loop
+    // so we copy it before passing it in so it gets a regular JS array and we get to still
+    // track dependencies from an external perspective
+    await parse(content, { ...options, plugins: [...plugins] }),
+  )
+</script>
+
+<ComarkRenderer
+  tree={parsed}
+  {components}
+  {componentsManifest}
+  {streaming}
+  {caret}
+  class={className}
+/>
diff --git a/packages/comark-svelte/src/async/index.ts b/packages/comark-svelte/src/async/index.ts
new file mode 100644
index 0000000..72fc871
--- /dev/null
+++ b/packages/comark-svelte/src/async/index.ts
@@ -0,0 +1 @@
+export { default as ComarkAsync } from './ComarkAsync.svelte'
diff --git a/packages/comark-svelte/src/index.ts b/packages/comark-svelte/src/index.ts
new file mode 100644
index 0000000..d259ff5
--- /dev/null
+++ b/packages/comark-svelte/src/index.ts
@@ -0,0 +1,8 @@
+export { default as Comark } from './Comark.svelte'
+export { default as ComarkRenderer } from './ComarkRenderer.svelte'
+export { default as ComarkNode } from './ComarkNode.svelte'
+export type {
+  ComarkProps,
+  ComarkRendererProps,
+  ComarkNodeProps,
+} from './types.js'
diff --git a/packages/comark-svelte/src/plugin-math/Math.svelte b/packages/comark-svelte/src/plugin-math/Math.svelte
new file mode 100644
index 0000000..1910636
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-math/Math.svelte
@@ -0,0 +1,50 @@
+<!--
+@component
+Renders a KaTeX math expression from a Comark AST `math` node.
+
+Receives a `content` prop with the LaTeX source and a `class` prop that
+determines inline vs display mode (display when class does NOT contain "inline").
+
+@example
+```svelte
+<script>
+  import { math, Math } from '@comark/svelte/plugin-math'
+  import { Comark } from '@comark/svelte'
+</script>
+
+<Comark markdown="$E = mc^2$" plugins={[math()]} components={{ math: Math }} />
+```
+-->
+<script lang="ts">
+  import katex from 'katex'
+  import 'katex/dist/katex.min.css'
+
+  let {
+    content,
+    class: className = '',
+  }: {
+    content: string
+    class?: string
+  } = $props()
+
+  let isInline = $derived(className.split(' ').includes('inline'))
+
+  let mathml = $derived.by(() => {
+    try {
+      return katex.renderToString(content, {
+        throwOnError: true,
+        displayMode: !isInline,
+      })
+    }
+    catch {
+      return '...'
+    }
+  })
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -- KaTeX output is safe rendered HTML -->
+{#if isInline}
+  <span class="math inline">{@html mathml}</span>
+{:else}
+  <div class="math block">{@html mathml}</div>
+{/if}
diff --git a/packages/comark-svelte/src/plugin-math/index.svelte.test.ts b/packages/comark-svelte/src/plugin-math/index.svelte.test.ts
new file mode 100644
index 0000000..9a3e160
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-math/index.svelte.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+import { parse } from 'comark'
+import { math, Math } from './index'
+import ComarkRenderer from '../ComarkRenderer.svelte'
+import Comark from '../Comark.svelte'
+
+describe('Math component', () => {
+  it('renders inline math with KaTeX', async () => {
+    const screen = render(Math, { content: 'x^2', class: 'inline' })
+    const wrapper = screen.container.querySelector<HTMLElement>('.math.inline')!
+    expect(wrapper).not.toBeNull()
+    expect(wrapper.querySelector('.katex')).not.toBeNull()
+  })
+
+  it('renders display math with KaTeX', async () => {
+    const screen = render(Math, { content: 'E = mc^2', class: '' })
+    const wrapper = screen.container.querySelector<HTMLElement>('.math.block')!
+    expect(wrapper).not.toBeNull()
+    expect(wrapper.querySelector('.katex')).not.toBeNull()
+  })
+
+  it('handles invalid LaTeX gracefully', async () => {
+    const screen = render(Math, { content: '\\invalid{', class: '' })
+    const wrapper = screen.container.querySelector<HTMLElement>('.math.block')!
+    expect(wrapper).not.toBeNull()
+  })
+})
+
+describe('Math + ComarkRenderer integration', () => {
+  it('renders inline math from parsed markdown', async () => {
+    const tree = await parse('The formula $x^2$ is simple', {
+      plugins: [math()],
+    })
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { math: Math },
+    })
+    await expect.element(screen.getByText(/The formula/)).toBeInTheDocument()
+    const inlineMath = screen.container.querySelector<HTMLElement>('.math.inline')!
+    expect(inlineMath).not.toBeNull()
+    expect(inlineMath.querySelector('.katex')).not.toBeNull()
+  })
+
+  it('renders display math from parsed markdown', async () => {
+    const tree = await parse('$$\nE = mc^2\n$$', {
+      plugins: [math()],
+    })
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { math: Math },
+    })
+    const blockMath = screen.container.querySelector<HTMLElement>('.math.block')!
+    expect(blockMath).not.toBeNull()
+    expect(blockMath.querySelector('.katex')).not.toBeNull()
+  })
+})
+
+describe('Math + Comark integration', () => {
+  it('renders math end-to-end via Comark component', async () => {
+    const screen = render(Comark, {
+      markdown: 'Inline $a+b$ and display:\n\n$$\nc^2\n$$',
+      plugins: [math()],
+      components: { math: Math },
+    })
+
+    await expect.element(screen.getByText(/Inline/)).toBeInTheDocument()
+    const inlineMath = screen.container.querySelector<HTMLElement>('.math.inline')!
+    expect(inlineMath).not.toBeNull()
+    expect(inlineMath.querySelector('.katex')).not.toBeNull()
+
+    const blockMath = screen.container.querySelector<HTMLElement>('.math.block')!
+    expect(blockMath).not.toBeNull()
+    expect(blockMath.querySelector('.katex')).not.toBeNull()
+  })
+})
diff --git a/packages/comark-svelte/src/plugin-math/index.test.ts b/packages/comark-svelte/src/plugin-math/index.test.ts
new file mode 100644
index 0000000..53beb85
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-math/index.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'svelte/server'
+import { parse } from 'comark'
+import { math, Math } from './index'
+import ComarkRenderer from '../ComarkRenderer.svelte'
+
+/** Strip Svelte SSR hydration comments from rendered HTML */
+function html(body: string): string {
+  return body.replace(/<!--[[\]\-\d!]*-->/g, '').replace(/<!---->/g, '')
+}
+
+describe('Math component (server)', () => {
+  it('renders inline math', () => {
+    const { body } = render(Math, {
+      props: { content: 'x^2', class: 'inline' },
+    })
+    const output = html(body)
+    expect(output).toContain('<span class="math inline">')
+    expect(output).toContain('katex')
+  })
+
+  it('renders display math', () => {
+    const { body } = render(Math, {
+      props: { content: 'E = mc^2', class: '' },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="math block">')
+    expect(output).toContain('katex')
+  })
+
+  it('handles invalid LaTeX gracefully', () => {
+    const { body } = render(Math, {
+      props: { content: '\\invalid{', class: '' },
+    })
+    const output = html(body)
+    // Should render fallback rather than throwing
+    expect(output).toContain('<div class="math block">')
+  })
+})
+
+describe('math plugin', () => {
+  it('exports the plugin factory', () => {
+    expect(typeof math).toBe('function')
+    const plugin = math()
+    expect(plugin.name).toBe('math')
+  })
+})
+
+describe('Math + ComarkRenderer integration (server)', () => {
+  it('renders inline math from parsed markdown', async () => {
+    const tree = await parse('The formula $x^2$ is simple', {
+      plugins: [math()],
+    })
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { math: Math } },
+    })
+    const output = html(body)
+    expect(output).toContain('<span class="math inline">')
+    expect(output).toContain('katex')
+    expect(output).toContain('The formula')
+  })
+
+  it('renders display math from parsed markdown', async () => {
+    const tree = await parse('$$\nE = mc^2\n$$', {
+      plugins: [math()],
+    })
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { math: Math } },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="math block">')
+    expect(output).toContain('katex')
+  })
+
+  it('renders mixed inline and display math', async () => {
+    const tree = await parse('Inline $a+b$ and display:\n\n$$\nc^2\n$$', {
+      plugins: [math()],
+    })
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { math: Math } },
+    })
+    const output = html(body)
+    expect(output).toContain('<span class="math inline">')
+    expect(output).toContain('<div class="math block">')
+  })
+})
diff --git a/packages/comark-svelte/src/plugin-math/index.ts b/packages/comark-svelte/src/plugin-math/index.ts
new file mode 100644
index 0000000..7e2ef72
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-math/index.ts
@@ -0,0 +1,3 @@
+export { default as math } from '@comark/math'
+export type { MathConfig } from '@comark/math'
+export { default as Math } from './Math.svelte'
diff --git a/packages/comark-svelte/src/plugin-mermaid/Mermaid.svelte b/packages/comark-svelte/src/plugin-mermaid/Mermaid.svelte
new file mode 100644
index 0000000..0251884
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-mermaid/Mermaid.svelte
@@ -0,0 +1,106 @@
+<!--
+@component
+Renders a Mermaid diagram from a Comark AST `mermaid` node.
+
+Receives a `content` prop with the Mermaid diagram source.
+Supports `theme` and `themeDark` props for light/dark mode theming.
+Automatically detects dark mode from the `<html>` element's `dark` class.
+
+@example
+```svelte
+<script>
+  import { mermaid, Mermaid } from '@comark/svelte/plugin-mermaid'
+  import { Comark } from '@comark/svelte'
+</script>
+
+<Comark markdown={md} plugins={[mermaid()]} components={{ mermaid: Mermaid }} />
+```
+-->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import {
+    renderMermaidSVG,
+    THEMES,
+    type DiagramColors,
+  } from 'beautiful-mermaid'
+  import type { ThemeNames } from '@comark/mermaid'
+
+  let {
+    content,
+    class: className = '',
+    height = '400px',
+    width = '100%',
+    theme,
+    'theme-dark': themeDark,
+  }: {
+    'content': string
+    'class'?: string
+    'height'?: string
+    'width'?: string
+    'theme'?: ThemeNames | DiagramColors
+    'theme-dark'?: ThemeNames | DiagramColors
+  } = $props()
+
+  let isDark = $state(false)
+
+  let resolvedTheme = $derived.by(() => {
+    const themeProp = isDark ? themeDark : theme
+
+    let resolved: DiagramColors | undefined
+    if (typeof themeProp === 'string') {
+      resolved = THEMES[themeProp]
+    }
+    else if (typeof themeProp === 'object') {
+      resolved = themeProp
+    }
+
+    if (!resolved) {
+      resolved = THEMES[isDark ? 'tokyo-night' : 'tokyo-light']
+    }
+
+    return resolved
+  })
+
+  let { svgContent, error } = $derived.by(() => {
+    try {
+      return {
+        svgContent: renderMermaidSVG(content, resolvedTheme),
+        error: null as string | null,
+      }
+    }
+    catch (err) {
+      return {
+        svgContent: '',
+        error: err instanceof Error ? err.message : 'Failed to render diagram',
+      }
+    }
+  })
+
+  onMount(() => {
+    const htmlEl = document.documentElement
+    isDark = htmlEl.classList.contains('dark')
+
+    const observer = new MutationObserver(() => {
+      isDark = htmlEl.classList.contains('dark')
+    })
+
+    observer.observe(htmlEl, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    return () => observer.disconnect()
+  })
+</script>
+
+<div
+  class="mermaid {className}"
+  style:display="flex"
+  style:justify-content="center"
+  style:width
+  style:height
+  data-error={error}
+>
+  <!-- eslint-disable svelte/no-at-html-tags -- Mermaid SVG output is safe rendered content -->
+  {@html svgContent}
+</div>
diff --git a/packages/comark-svelte/src/plugin-mermaid/index.svelte.test.ts b/packages/comark-svelte/src/plugin-mermaid/index.svelte.test.ts
new file mode 100644
index 0000000..5f11871
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-mermaid/index.svelte.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+import { parse } from 'comark'
+import { mermaid, Mermaid } from './index'
+import ComarkRenderer from '../ComarkRenderer.svelte'
+import Comark from '../Comark.svelte'
+
+describe('Mermaid component', () => {
+  it('renders a mermaid diagram as SVG', async () => {
+    const screen = render(Mermaid, { content: 'graph TD\n    A-->B' })
+    const wrapper = screen.container.querySelector<HTMLElement>('.mermaid')!
+    expect(wrapper).not.toBeNull()
+    expect(wrapper.querySelector('svg')).not.toBeNull()
+  })
+
+  it('applies custom class', async () => {
+    const screen = render(Mermaid, {
+      content: 'graph TD\n    A-->B',
+      class: 'my-diagram',
+    })
+    const wrapper = screen.container.querySelector<HTMLElement>('.mermaid.my-diagram')!
+    expect(wrapper).not.toBeNull()
+  })
+
+  it('handles invalid mermaid syntax gracefully', async () => {
+    const screen = render(Mermaid, { content: 'not valid mermaid' })
+    const wrapper = screen.container.querySelector<HTMLElement>('.mermaid')!
+    expect(wrapper).not.toBeNull()
+  })
+})
+
+describe('Mermaid + ComarkRenderer integration', () => {
+  it('renders a mermaid code block from parsed markdown', async () => {
+    const tree = await parse('```mermaid\ngraph TD\n    A-->B\n```', {
+      plugins: [mermaid()],
+    })
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { mermaid: Mermaid },
+    })
+    const wrapper = screen.container.querySelector<HTMLElement>('.mermaid')!
+    expect(wrapper).not.toBeNull()
+    expect(wrapper.querySelector('svg')).not.toBeNull()
+  })
+})
+
+describe('Mermaid + Comark integration', () => {
+  it('renders mermaid end-to-end via Comark component', async () => {
+    const screen = render(Comark, {
+      markdown: '```mermaid\ngraph TD\n    A-->B\n```',
+      plugins: [mermaid()],
+      components: { mermaid: Mermaid },
+    })
+
+    // Wait for Comark to parse and render the mermaid diagram
+    await expect.element(screen.getByText(/A/)).toBeInTheDocument()
+    const mermaidEl = screen.container.querySelector<HTMLElement>('.mermaid')
+    expect(mermaidEl).not.toBeNull()
+    expect(mermaidEl!.querySelector('svg')).not.toBeNull()
+  })
+})
diff --git a/packages/comark-svelte/src/plugin-mermaid/index.test.ts b/packages/comark-svelte/src/plugin-mermaid/index.test.ts
new file mode 100644
index 0000000..dc39615
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-mermaid/index.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'svelte/server'
+import { parse } from 'comark'
+import { mermaid, Mermaid } from './index'
+import ComarkRenderer from '../ComarkRenderer.svelte'
+
+/** Strip Svelte SSR hydration comments from rendered HTML */
+function html(body: string): string {
+  return body.replace(/<!--[[\]\-\d!]*-->/g, '').replace(/<!---->/g, '')
+}
+
+describe('Mermaid component (server)', () => {
+  it('renders a mermaid diagram container', () => {
+    const { body } = render(Mermaid, {
+      props: { content: 'graph TD\n    A-->B' },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="mermaid')
+    // SVG should be rendered
+    expect(output).toContain('<svg')
+  })
+
+  it('applies custom class', () => {
+    const { body } = render(Mermaid, {
+      props: { content: 'graph TD\n    A-->B', class: 'my-diagram' },
+    })
+    const output = html(body)
+    expect(output).toContain('mermaid my-diagram')
+  })
+
+  it('applies custom dimensions', () => {
+    const { body } = render(Mermaid, {
+      props: { content: 'graph TD\n    A-->B', width: '500px', height: '300px' },
+    })
+    const output = html(body)
+    expect(output).toContain('width: 500px')
+    expect(output).toContain('height: 300px')
+  })
+
+  it('handles invalid mermaid syntax gracefully', () => {
+    const { body } = render(Mermaid, {
+      props: { content: 'not valid mermaid' },
+    })
+    const output = html(body)
+    // Should render the container div even on error
+    expect(output).toContain('<div class="mermaid')
+  })
+})
+
+describe('mermaid plugin', () => {
+  it('exports the plugin factory', () => {
+    expect(typeof mermaid).toBe('function')
+    const plugin = mermaid()
+    expect(plugin.name).toBe('mermaid')
+  })
+})
+
+describe('Mermaid + ComarkRenderer integration (server)', () => {
+  it('renders a mermaid code block from parsed markdown', async () => {
+    const tree = await parse('```mermaid\ngraph TD\n    A-->B\n```', {
+      plugins: [mermaid()],
+    })
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { mermaid: Mermaid } },
+    })
+    const output = html(body)
+    expect(output).toContain('<div class="mermaid')
+    expect(output).toContain('<svg')
+  })
+})
diff --git a/packages/comark-svelte/src/plugin-mermaid/index.ts b/packages/comark-svelte/src/plugin-mermaid/index.ts
new file mode 100644
index 0000000..d901c28
--- /dev/null
+++ b/packages/comark-svelte/src/plugin-mermaid/index.ts
@@ -0,0 +1,3 @@
+export { default as mermaid } from '@comark/mermaid'
+export type { MermaidConfig, ThemeNames } from '@comark/mermaid'
+export { default as Mermaid } from './Mermaid.svelte'
diff --git a/packages/comark-svelte/src/streaming.svelte.test.ts b/packages/comark-svelte/src/streaming.svelte.test.ts
new file mode 100644
index 0000000..164f1da
--- /dev/null
+++ b/packages/comark-svelte/src/streaming.svelte.test.ts
@@ -0,0 +1,202 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+import { parse } from 'comark'
+import Comark from './Comark.svelte'
+import ComarkRenderer from './ComarkRenderer.svelte'
+import Alert from './test-components/Alert.svelte'
+
+describe('streaming mode', () => {
+  it('updates content when markdown prop changes', async () => {
+    const screen = render(Comark, { markdown: 'Hello' })
+
+    await expect.element(screen.getByText('Hello')).toBeInTheDocument()
+
+    await screen.rerender({ markdown: 'Hello **World**' })
+
+    await expect.element(screen.getByText('Hello World')).toBeInTheDocument()
+  })
+
+  it('shows caret during streaming', async () => {
+    const screen = render(Comark, {
+      markdown: 'Hello',
+      streaming: true,
+      caret: { class: 'streaming-caret' },
+    })
+
+    await expect.element(screen.getByText('Hello')).toBeInTheDocument()
+    expect(screen.container.querySelector('.streaming-caret')).not.toBeNull()
+  })
+
+  it('shows caret with custom class', async () => {
+    const screen = render(Comark, {
+      markdown: 'Hello',
+      streaming: true,
+      caret: { class: 'my-cursor' },
+    })
+
+    await expect.element(screen.getByText('Hello')).toBeInTheDocument()
+    expect(screen.container.querySelector('.my-cursor')).not.toBeNull()
+  })
+
+  it('does not show caret when streaming is false', async () => {
+    const screen = render(Comark, {
+      markdown: 'Hello',
+      streaming: false,
+      caret: true,
+    })
+
+    await expect.element(screen.getByText('Hello')).toBeInTheDocument()
+    expect(
+      screen.container.querySelector('span[style*="currentColor"]'),
+    ).toBeNull()
+  })
+
+  it('progressively renders content as markdown grows', async () => {
+    const screen = render(Comark, { markdown: '# Title' })
+
+    await expect
+      .element(screen.getByRole('heading', { name: 'Title', level: 1 }))
+      .toBeInTheDocument()
+
+    await screen.rerender({ markdown: '# Title\n\nFirst paragraph' })
+    await expect
+      .element(screen.getByText('First paragraph'))
+      .toBeInTheDocument()
+
+    await screen.rerender({
+      markdown: '# Title\n\nFirst paragraph\n\n- item 1',
+    })
+    await expect
+      .element(screen.getByRole('listitem'))
+      .toHaveTextContent('item 1')
+
+    await screen.rerender({
+      markdown: '# Title\n\nFirst paragraph\n\n- item 1\n- item 2',
+    })
+    const items = screen.getByRole('listitem')
+    expect(items.length).toBe(2)
+  })
+
+  it('handles incomplete bold during streaming with autoClose', async () => {
+    const screen = render(Comark, {
+      markdown: 'Hello **wor',
+      streaming: true,
+      caret: true,
+      options: { autoClose: true },
+    })
+
+    await expect.element(screen.getByText(/wor/)).toBeInTheDocument()
+
+    await screen.rerender({
+      markdown: 'Hello **world**',
+      streaming: false,
+      caret: false,
+      options: { autoClose: true },
+    })
+
+    await expect.element(screen.getByText('Hello world')).toBeInTheDocument()
+  })
+
+  it('handles incomplete heading during streaming', async () => {
+    const screen = render(Comark, {
+      markdown: '# Hell',
+      streaming: true,
+      caret: true,
+    })
+
+    await expect
+      .element(screen.getByRole('heading', { level: 1 }))
+      .toBeInTheDocument()
+    await expect.element(screen.getByText(/Hell/)).toBeInTheDocument()
+
+    await screen.rerender({
+      markdown: '# Hello World',
+      streaming: false,
+      caret: false,
+    })
+
+    await expect
+      .element(screen.getByRole('heading', { name: 'Hello World', level: 1 }))
+      .toBeInTheDocument()
+  })
+
+  it('handles incomplete MDC component during streaming with autoClose', async () => {
+    const screen = render(Comark, {
+      markdown: '::alert{type="warning"}\nDang',
+      streaming: true,
+      caret: true,
+      options: { autoClose: true },
+      components: { alert: Alert },
+    })
+
+    await expect.element(screen.getByRole('alert')).toBeInTheDocument()
+    await expect.element(screen.getByText(/Dang/)).toBeInTheDocument()
+
+    await screen.rerender({
+      markdown: '::alert{type="warning"}\nDanger zone\n::',
+      streaming: false,
+      caret: false,
+      options: { autoClose: true },
+      components: { alert: Alert },
+    })
+
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Danger zone')
+  })
+
+  it('removes caret when streaming ends', async () => {
+    const screen = render(Comark, {
+      markdown: 'Hello',
+      streaming: true,
+      caret: { class: 'streaming-caret' },
+    })
+
+    await expect.element(screen.getByText('Hello')).toBeInTheDocument()
+    expect(screen.container.querySelector('.streaming-caret')).not.toBeNull()
+
+    await screen.rerender({
+      markdown: 'Hello World',
+      streaming: false,
+      caret: false,
+    })
+
+    await expect.element(screen.getByText('Hello World')).toBeInTheDocument()
+    expect(screen.container.querySelector('.streaming-caret')).toBeNull()
+  })
+})
+
+describe('streaming with ComarkRenderer', () => {
+  it('shows and removes caret based on streaming prop', async () => {
+    const tree = await parse('Hello **World**')
+    const screen = render(ComarkRenderer, {
+      tree,
+      streaming: true,
+      caret: { class: 'streaming-caret' },
+    })
+
+    await expect.element(screen.getByText(/Hello/)).toBeInTheDocument()
+    expect(screen.container.querySelector('.streaming-caret')).not.toBeNull()
+
+    await screen.rerender({
+      tree,
+      streaming: false,
+      caret: false,
+    })
+
+    expect(screen.container.querySelector('.streaming-caret')).toBeNull()
+  })
+
+  it('updates tree and reflects new content', async () => {
+    let tree = await parse('First')
+    const screen = render(ComarkRenderer, { tree })
+
+    await expect.element(screen.getByText('First')).toBeInTheDocument()
+
+    tree = await parse('First\n\nSecond')
+    await screen.rerender({ tree })
+
+    await expect.element(screen.getByText('First')).toBeInTheDocument()
+    await expect.element(screen.getByText('Second')).toBeInTheDocument()
+  })
+})
diff --git a/packages/comark-svelte/src/test-components/Alert.svelte b/packages/comark-svelte/src/test-components/Alert.svelte
new file mode 100644
index 0000000..5f88c91
--- /dev/null
+++ b/packages/comark-svelte/src/test-components/Alert.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let { type = 'info', children }: { type?: string, children?: Snippet }
+    = $props()
+</script>
+
+<div class="alert alert-{type}" role="alert">
+  {@render children?.()}
+</div>
diff --git a/packages/comark-svelte/src/test-components/ProseH1.svelte b/packages/comark-svelte/src/test-components/ProseH1.svelte
new file mode 100644
index 0000000..6ce46f6
--- /dev/null
+++ b/packages/comark-svelte/src/test-components/ProseH1.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let { id, children }: { id?: string, children?: Snippet } = $props()
+</script>
+
+<h1 {id} class="prose-heading">
+  {@render children?.()}
+</h1>
diff --git a/packages/comark-svelte/src/types.ts b/packages/comark-svelte/src/types.ts
new file mode 100644
index 0000000..9f1ea47
--- /dev/null
+++ b/packages/comark-svelte/src/types.ts
@@ -0,0 +1,30 @@
+import type { ComarkNode, ComarkTree } from 'comark/ast'
+import type { ComarkPlugin, ComponentManifest, ParseOptions } from 'comark'
+
+export interface ComarkNodeProps {
+  node: ComarkNode
+  components?: Record<string, any>
+  componentsManifest?: ComponentManifest
+  /** CSS class for the streaming caret, or null if no caret. Threaded recursively to the last child. */
+  caretClass?: string | null
+}
+
+export interface ComarkRendererProps {
+  tree: ComarkTree
+  components?: Record<string, any>
+  componentsManifest?: ComponentManifest
+  streaming?: boolean
+  caret?: boolean | { class: string }
+  class?: string
+}
+
+export interface ComarkProps {
+  markdown?: string
+  options?: Exclude<ParseOptions, 'plugins'>
+  plugins?: ComarkPlugin[]
+  components?: Record<string, any>
+  componentsManifest?: ComponentManifest
+  streaming?: boolean
+  caret?: boolean | { class: string }
+  class?: string
+}
diff --git a/packages/comark-svelte/svelte.config.js b/packages/comark-svelte/svelte.config.js
new file mode 100644
index 0000000..6505d99
--- /dev/null
+++ b/packages/comark-svelte/svelte.config.js
@@ -0,0 +1,10 @@
+/** @type {import('svelte/compiler').CompileOptions} */
+const config = {
+  compilerOptions: {
+    experimental: {
+      async: true,
+    },
+  },
+}
+
+export default config
diff --git a/packages/comark-svelte/tsconfig.json b/packages/comark-svelte/tsconfig.json
new file mode 100644
index 0000000..c3ed48d
--- /dev/null
+++ b/packages/comark-svelte/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "lib": ["esnext", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/comark-svelte/vitest.config.ts b/packages/comark-svelte/vitest.config.ts
new file mode 100644
index 0000000..95d1243
--- /dev/null
+++ b/packages/comark-svelte/vitest.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vitest/config'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { playwright } from '@vitest/browser-playwright'
+
+export default defineConfig({
+  plugins: [svelte()],
+  optimizeDeps: {
+    include: ['katex', 'beautiful-mermaid'],
+  },
+  test: {
+    projects: [
+      {
+        extends: './vitest.config.ts',
+        test: {
+          name: 'client',
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [{ browser: 'chromium' }],
+          },
+          include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+        },
+      },
+      {
+        extends: './vitest.config.ts',
+        test: {
+          name: 'server',
+          environment: 'node',
+          include: ['src/**/*.{test,spec}.{js,ts}'],
+          exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+        },
+      },
+    ],
+  },
+})
diff --git a/packages/comark/src/plugins/highlight.ts b/packages/comark/src/plugins/highlight.ts
index e0ddf3a..1518643 100644
--- a/packages/comark/src/plugins/highlight.ts
+++ b/packages/comark/src/plugins/highlight.ts
@@ -125,10 +125,11 @@ async function registerDefaults(options: HighlightOptions) {
   }
   if (options.registerDefaultLanguages !== false) {
     languages.push(await import('@shikijs/langs/vue').then(m => m.default))
+    languages.push(await import('@shikijs/langs/tsx').then(m => m.default))
+    languages.push(await import('@shikijs/langs/svelte').then(m => m.default))
     languages.push(await import('@shikijs/langs/typescript').then(m => m.default))
     languages.push(await import('@shikijs/langs/javascript').then(m => m.default))
     languages.push(await import('@shikijs/langs/mdc').then(m => m.default))
-    languages.push(await import('@shikijs/langs/tsx').then(m => m.default))
     languages.push(await import('@shikijs/langs/bash').then(m => m.default))
     languages.push(await import('@shikijs/langs/json').then(m => m.default))
     languages.push(await import('@shikijs/langs/yaml').then(m => m.default))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7030c21..1eb64c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       eslint:
         specifier: ^10.0.2
         version: 10.0.2(jiti@2.6.1)
+      eslint-plugin-svelte:
+        specifier: ^3.15.0
+        version: 3.15.0(eslint@10.0.2(jiti@2.6.1))(svelte@5.53.7)
       nuxt:
         specifier: ^4.3.1
         version: 4.3.1(@parcel/watcher@2.5.6)(@types/node@25.3.5)(@vue/compiler-sfc@3.5.29)(better-sqlite3@12.6.2)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.6.2))(eslint@10.0.2(jiti@2.6.1))(ioredis@5.10.0)(lightningcss@1.31.1)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rolldown@1.0.0-rc.7)(rollup@4.59.0)(terser@5.46.0)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.5(typescript@5.9.3))(yaml@2.8.2)
@@ -70,10 +73,10 @@ importers:
         version: 0.9.0
       '@vercel/analytics':
         specifier: ^1.6.1
-        version: 1.6.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
+        version: 1.6.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(svelte@5.53.7)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
       '@vercel/speed-insights':
         specifier: ^1.3.1
-        version: 1.3.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
+        version: 1.3.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(svelte@5.53.7)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
       comark:
         specifier: workspace:*
         version: link:../packages/comark
@@ -251,6 +254,37 @@ importers:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
+  examples/2.vite/svelte-vite:
+    dependencies:
+      '@comark/svelte':
+        specifier: workspace:*
+        version: link:../../../packages/comark-svelte
+      '@tailwindcss/vite':
+        specifier: ^4.2.0
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      comark:
+        specifier: workspace:*
+        version: link:../../../packages/comark
+    devDependencies:
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^6.2.4
+        version: 6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      autoprefixer:
+        specifier: ^10.4.24
+        version: 10.4.27(postcss@8.5.8)
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.8
+      svelte:
+        specifier: ^5.53.7
+        version: 5.53.7
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
   examples/2.vite/vue-vite:
     dependencies:
       '@tailwindcss/vite':
@@ -456,7 +490,7 @@ importers:
         version: 4.21.0
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/comark-cjk:
     dependencies:
@@ -472,7 +506,7 @@ importers:
         version: 0.4.31(chokidar@5.0.0)(dotenv@17.3.1)(giget@3.1.2)(jiti@2.6.1)(magicast@0.5.2)(picomatch@4.0.3)(rollup@4.59.0)(typescript@5.9.3)(vue-tsc@3.2.5(typescript@5.9.3))
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/comark-math:
     dependencies:
@@ -494,7 +528,7 @@ importers:
         version: 0.4.31(chokidar@5.0.0)(dotenv@17.3.1)(giget@3.1.2)(jiti@2.6.1)(magicast@0.5.2)(picomatch@4.0.3)(rollup@4.59.0)(typescript@5.9.3)(vue-tsc@3.2.5(typescript@5.9.3))
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/comark-mermaid:
     dependencies:
@@ -516,7 +550,53 @@ importers:
         version: 0.4.31(chokidar@5.0.0)(dotenv@17.3.1)(giget@3.1.2)(jiti@2.6.1)(magicast@0.5.2)(picomatch@4.0.3)(rollup@4.59.0)(typescript@5.9.3)(vue-tsc@3.2.5(typescript@5.9.3))
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
+  packages/comark-svelte:
+    dependencies:
+      '@comark/math':
+        specifier: workspace:*
+        version: link:../comark-math
+      '@comark/mermaid':
+        specifier: workspace:*
+        version: link:../comark-mermaid
+      beautiful-mermaid:
+        specifier: ^1.1.3
+        version: 1.1.3
+      comark:
+        specifier: workspace:*
+        version: link:../comark
+      katex:
+        specifier: ^0.16.33
+        version: 0.16.35
+      scule:
+        specifier: ^1.3.0
+        version: 1.3.0
+    devDependencies:
+      '@sveltejs/package':
+        specifier: ^2.5.7
+        version: 2.5.7(svelte@5.53.7)(typescript@5.9.3)
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^6.2.4
+        version: 6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/browser':
+        specifier: ^4.0.18
+        version: 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)
+      '@vitest/browser-playwright':
+        specifier: ^4.0.18
+        version: 4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)
+      svelte:
+        specifier: ^5.53.7
+        version: 5.53.7
+      svelte-check:
+        specifier: ^4.2.1
+        version: 4.4.4(picomatch@4.0.3)(svelte@5.53.7)(typescript@5.9.3)
+      vitest:
+        specifier: ^4.0.18
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest-browser-svelte:
+        specifier: ^0.1.0
+        version: 0.1.0(@vitest/browser@4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18))(svelte@5.53.7)(vitest@4.0.18)
 
 packages:
 
@@ -3455,6 +3535,33 @@ packages:
     peerDependencies:
       eslint: ^9.0.0 || ^10.0.0
 
+  '@sveltejs/acorn-typescript@1.0.9':
+    resolution: {integrity: sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@sveltejs/package@2.5.7':
+    resolution: {integrity: sha512-qqD9xa9H7TDiGFrF6rz7AirOR8k15qDK/9i4MIE8te4vWsv5GEogPks61rrZcLy+yWph+aI6pIj2MdoK3YI8AQ==}
+    engines: {node: ^16.14 || >=18}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.2':
+    resolution: {integrity: sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
+  '@sveltejs/vite-plugin-svelte@6.2.4':
+    resolution: {integrity: sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -3888,6 +3995,9 @@ packages:
   '@types/splitpanes@2.2.6':
     resolution: {integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -4177,6 +4287,17 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
       vue: ^3.2.25
 
+  '@vitest/browser-playwright@4.0.18':
+    resolution: {integrity: sha512-gfajTHVCiwpxRj1qh0Sh/5bbGLG4F/ZH/V9xvFVoFddpITfMta9YGow0W6ZpTTORv2vdJuz9TnrNSmjKvpOf4g==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 4.0.18
+
+  '@vitest/browser@4.0.18':
+    resolution: {integrity: sha512-gVQqh7paBz3gC+ZdcCmNSWJMk70IUjDeVqi+5m5vYpEHsIwRgw3Y545jljtajhkekIpIp5Gg8oK7bctgY0E2Ng==}
+    peerDependencies:
+      vitest: 4.0.18
+
   '@vitest/expect@4.0.18':
     resolution: {integrity: sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==}
 
@@ -4528,6 +4649,10 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  aria-query@5.3.1:
+    resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==}
+    engines: {node: '>= 0.4'}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -5188,6 +5313,9 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  dedent-js@1.0.1:
+    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -5543,6 +5671,16 @@ packages:
     peerDependencies:
       eslint: '>=9.38.0'
 
+  eslint-plugin-svelte@3.15.0:
+    resolution: {integrity: sha512-QKB7zqfuB8aChOfBTComgDptMf2yxiJx7FE04nneCmtQzgTHvY8UJkuh8J2Rz7KB9FFV9aTHX6r7rdYGvG8T9Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.1 || ^9.0.0 || ^10.0.0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+
   eslint-plugin-unicorn@63.0.0:
     resolution: {integrity: sha512-Iqecl9118uQEXYh7adylgEmGfkn5es3/mlQTLLkd4pXkIk9CTGrAbeUux+YljSa2ohXCBmQQ0+Ej1kZaFgcfkA==}
     engines: {node: ^20.10.0 || >=21.0.0}
@@ -5569,6 +5707,10 @@ packages:
       '@vue/compiler-sfc': ^3.3.0
       eslint: '>=9.0.0'
 
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   eslint-scope@9.1.1:
     resolution: {integrity: sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -5595,6 +5737,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@10.4.0:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5616,6 +5761,9 @@ packages:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
+  esrap@2.2.3:
+    resolution: {integrity: sha512-8fOS+GIGCQZl/ZIlhl59htOlms6U8NvX6ZYgYHpRU/b6tVSh3uHkOHZikl3D4cMbYM0JlpBe+p/BkZEi8J9XIQ==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -5842,6 +5990,11 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -6269,6 +6422,9 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-ssh@1.4.1:
     resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
 
@@ -6419,6 +6575,9 @@ packages:
   knitwork@1.3.0:
     resolution: {integrity: sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==}
 
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
+
   launch-editor@2.13.1:
     resolution: {integrity: sha512-lPSddlAAluRKJ7/cjRFoXUFzaX7q/YKI7yPHuEvSJVqoXvFnJov1/Ud87Aa4zULIbA9Nja4mSPK8l0z/7eV2wA==}
 
@@ -6512,6 +6671,10 @@ packages:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
 
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -6533,6 +6696,9 @@ packages:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
 
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -6896,6 +7062,10 @@ packages:
       '@vueuse/core': '>=10.0.0'
       vue: '>=3.0.0'
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -7334,6 +7504,10 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  pixelmatch@7.1.0:
+    resolution: {integrity: sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==}
+    hasBin: true
+
   pkce-challenge@5.0.1:
     resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
     engines: {node: '>=16.20.0'}
@@ -7349,10 +7523,19 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -7399,6 +7582,18 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  postcss-load-config@3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
   postcss-merge-longhand@7.0.5:
     resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -7507,6 +7702,18 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
@@ -7962,6 +8169,10 @@ packages:
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
@@ -8342,6 +8553,33 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte-check@4.4.4:
+    resolution: {integrity: sha512-F1pGqXc710Oi/wTI4d/x7d6lgPwwfx1U6w3Q35n4xsC2e8C/yN2sM1+mWxjlMcpAfWucjlq4vPi+P4FZ8a14sQ==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+
+  svelte-eslint-parser@1.6.0:
+    resolution: {integrity: sha512-qoB1ehychT6OxEtQAqc/guSqLS20SlA53Uijl7x375s8nlUT0lb9ol/gzraEEatQwsyPTJo87s2CmKL9Xab+Uw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0, pnpm: 10.30.3}
+    peerDependencies:
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+
+  svelte2tsx@0.7.51:
+    resolution: {integrity: sha512-YbVMQi5LtQkVGOMdATTY8v3SMtkNjzYtrVDGaN3Bv+0LQ47tGXu/Oc8ryTkcYuEJWTZFJ8G2+2I8ORcQVGt9Ag==}
+    peerDependencies:
+      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
+      typescript: ^4.9.4 || ^5.0.0
+
+  svelte@5.53.7:
+    resolution: {integrity: sha512-uxck1KI7JWtlfP3H6HOWi/94soAl23jsGJkBzN2BAWcQng0+lTrRNhxActFqORgnO9BHVd1hKJhG+ljRuIUWfQ==}
+    engines: {node: '>=18'}
+
   svgo@4.0.1:
     resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
     engines: {node: '>=16'}
@@ -8992,6 +9230,14 @@ packages:
       postcss:
         optional: true
 
+  vitest-browser-svelte@0.1.0:
+    resolution: {integrity: sha512-YB6ZUZZQNqU1T9NzvTEDpwpPv35Ng1NZMPBh81zDrLEdOgROGE6nJb79NWb1Eu/a8VkHifqArpOZfJfALge6xQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      '@vitest/browser': ^2.1.0 || ^3.0.0-0
+      svelte: '>3.0.0'
+      vitest: ^2.1.0 || ^3.0.0-0
+
   vitest@4.0.18:
     resolution: {integrity: sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -9261,6 +9507,10 @@ packages:
     resolution: {integrity: sha512-odxVsHAkZYYglR30aPYRY4nUGJnoJ2y1ww2HDvZALo0BDETv9kWbi16J52eHs+PWRNmF4ub6nZqfVOeesOvntg==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.8.2:
     resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
     engines: {node: '>= 14.6'}
@@ -9310,6 +9560,9 @@ packages:
   youch@4.1.0:
     resolution: {integrity: sha512-cYekNh2tUoU+voS11X0D0UQntVCSO6LQ1h10VriQGmfbpf0mnGTruwZICts23UUNiZCXm8H8hQBtRrdsbhuNNg==}
 
+  zimmerframe@1.1.4:
+    resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
+
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -12287,6 +12540,38 @@ snapshots:
       estraverse: 5.3.0
       picomatch: 4.0.3
 
+  '@sveltejs/acorn-typescript@1.0.9(acorn@8.16.0)':
+    dependencies:
+      acorn: 8.16.0
+
+  '@sveltejs/package@2.5.7(svelte@5.53.7)(typescript@5.9.3)':
+    dependencies:
+      chokidar: 5.0.0
+      kleur: 4.1.5
+      sade: 1.8.1
+      semver: 7.7.4
+      svelte: 5.53.7
+      svelte2tsx: 0.7.51(svelte@5.53.7)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      obug: 2.1.1
+      svelte: 5.53.7
+      vite: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
+  '@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      deepmerge: 4.3.1
+      magic-string: 0.30.21
+      obug: 2.1.1
+      svelte: 5.53.7
+      vite: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.2(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -12718,6 +13003,8 @@ snapshots:
     dependencies:
       vue: 2.7.16
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -12907,10 +13194,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vercel/analytics@1.6.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))':
+  '@vercel/analytics@1.6.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(svelte@5.53.7)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))':
     optionalDependencies:
       next: 15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
+      svelte: 5.53.7
       vue: 3.5.29(typescript@5.9.3)
       vue-router: 4.6.4(vue@3.5.29(typescript@5.9.3))
 
@@ -12935,10 +13223,11 @@ snapshots:
 
   '@vercel/oidc@3.1.0': {}
 
-  '@vercel/speed-insights@1.3.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))':
+  '@vercel/speed-insights@1.3.1(next@15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(svelte@5.53.7)(vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))':
     optionalDependencies:
       next: 15.5.12(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
+      svelte: 5.53.7
       vue: 3.5.29(typescript@5.9.3)
       vue-router: 4.6.4(vue@3.5.29(typescript@5.9.3))
 
@@ -12989,6 +13278,36 @@ snapshots:
       vite: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       vue: 3.5.29(typescript@5.9.3)
 
+  '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)':
+    dependencies:
+      '@vitest/browser': 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)
+      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      playwright: 1.58.2
+      tinyrainbow: 3.0.3
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)':
+    dependencies:
+      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/utils': 4.0.18
+      magic-string: 0.30.21
+      pixelmatch: 7.1.0
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.0.3
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      ws: 8.19.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
   '@vitest/expect@4.0.18':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -13392,6 +13711,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  aria-query@5.3.1: {}
+
   aria-query@5.3.2: {}
 
   array-find-index@1.0.2: {}
@@ -14110,6 +14431,8 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
+  dedent-js@1.0.1: {}
+
   deep-extend@0.6.0: {}
 
   deep-is@0.1.4: {}
@@ -14594,6 +14917,24 @@ snapshots:
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
+  eslint-plugin-svelte@3.15.0(eslint@10.0.2(jiti@2.6.1))(svelte@5.53.7):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.2(jiti@2.6.1))
+      '@jridgewell/sourcemap-codec': 1.5.5
+      eslint: 10.0.2(jiti@2.6.1)
+      esutils: 2.0.3
+      globals: 16.5.0
+      known-css-properties: 0.37.0
+      postcss: 8.5.8
+      postcss-load-config: 3.1.4(postcss@8.5.8)
+      postcss-safe-parser: 7.0.1(postcss@8.5.8)
+      semver: 7.7.4
+      svelte-eslint-parser: 1.6.0(svelte@5.53.7)
+    optionalDependencies:
+      svelte: 5.53.7
+    transitivePeerDependencies:
+      - ts-node
+
   eslint-plugin-unicorn@63.0.0(eslint@10.0.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -14633,6 +14974,11 @@ snapshots:
       '@vue/compiler-sfc': 3.5.29
       eslint: 10.0.2(jiti@2.6.1)
 
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-scope@9.1.1:
     dependencies:
       '@types/esrecurse': 4.3.1
@@ -14683,6 +15029,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@10.4.0:
     dependencies:
       acorn: 8.16.0
@@ -14707,6 +15055,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@2.2.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -14981,6 +15333,9 @@ snapshots:
 
   fs-constants@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -15518,6 +15873,10 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-ssh@1.4.1:
     dependencies:
       protocols: 2.0.2
@@ -15653,6 +16012,8 @@ snapshots:
 
   knitwork@1.3.0: {}
 
+  known-css-properties@0.37.0: {}
+
   launch-editor@2.13.1:
     dependencies:
       picocolors: 1.1.1
@@ -15727,6 +16088,8 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
 
+  lilconfig@2.1.0: {}
+
   lilconfig@3.1.3: {}
 
   linebreak@1.1.0:
@@ -15767,6 +16130,8 @@ snapshots:
       pkg-types: 2.3.0
       quansync: 0.2.11
 
+  locate-character@3.0.0: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -16283,6 +16648,8 @@ snapshots:
       - react
       - react-dom
 
+  mri@1.2.0: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -17131,6 +17498,10 @@ snapshots:
 
   pify@4.0.1: {}
 
+  pixelmatch@7.1.0:
+    dependencies:
+      pngjs: 7.0.0
+
   pkce-challenge@5.0.1: {}
 
   pkg-types@1.3.1:
@@ -17147,8 +17518,16 @@ snapshots:
 
   playwright-core@1.58.2: {}
 
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
+  pngjs@7.0.0: {}
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-calc@10.1.1(postcss@8.5.8):
@@ -17188,6 +17567,13 @@ snapshots:
     dependencies:
       postcss: 8.5.8
 
+  postcss-load-config@3.1.4(postcss@8.5.8):
+    dependencies:
+      lilconfig: 2.1.0
+      yaml: 1.10.2
+    optionalDependencies:
+      postcss: 8.5.8
+
   postcss-merge-longhand@7.0.5(postcss@8.5.8):
     dependencies:
       postcss: 8.5.8
@@ -17289,6 +17675,14 @@ snapshots:
       postcss: 8.5.8
       postcss-value-parser: 4.2.0
 
+  postcss-safe-parser@7.0.1(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+
+  postcss-scss@4.0.9(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
@@ -17971,6 +18365,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
@@ -18429,6 +18827,56 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte-check@4.4.4(picomatch@4.0.3)(svelte@5.53.7)(typescript@5.9.3):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      chokidar: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.53.7
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte-eslint-parser@1.6.0(svelte@5.53.7):
+    dependencies:
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      postcss: 8.5.8
+      postcss-scss: 4.0.9(postcss@8.5.8)
+      postcss-selector-parser: 7.1.1
+      semver: 7.7.4
+    optionalDependencies:
+      svelte: 5.53.7
+
+  svelte2tsx@0.7.51(svelte@5.53.7)(typescript@5.9.3):
+    dependencies:
+      dedent-js: 1.0.1
+      scule: 1.3.0
+      svelte: 5.53.7
+      typescript: 5.9.3
+
+  svelte@5.53.7:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.9(acorn@8.16.0)
+      '@types/estree': 1.0.8
+      '@types/trusted-types': 2.0.7
+      acorn: 8.16.0
+      aria-query: 5.3.1
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      devalue: 5.6.3
+      esm-env: 1.2.2
+      esrap: 2.2.3
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.21
+      zimmerframe: 1.1.4
+
   svgo@4.0.1:
     dependencies:
       commander: 11.1.0
@@ -19060,6 +19508,10 @@ snapshots:
     optionalDependencies:
       vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
+  vitefu@1.1.2(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
+    optionalDependencies:
+      vite: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
   vitepress@1.6.4(@algolia/client-search@5.49.1)(@types/node@25.3.5)(change-case@5.4.4)(fuse.js@7.1.0)(lightningcss@1.31.1)(postcss@8.5.8)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
@@ -19109,7 +19561,13 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
+  vitest-browser-svelte@0.1.0(@vitest/browser@4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18))(svelte@5.53.7)(vitest@4.0.18):
+    dependencies:
+      '@vitest/browser': 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)
+      svelte: 5.53.7
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+
+  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.18
       '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -19134,6 +19592,7 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
       '@types/node': 25.3.5
+      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18)
     transitivePeerDependencies:
       - jiti
       - less
@@ -19359,6 +19818,8 @@ snapshots:
       eslint-visitor-keys: 3.4.3
       yaml: 2.8.2
 
+  yaml@1.10.2: {}
+
   yaml@2.8.2: {}
 
   yargs-parser@21.1.1: {}
@@ -19406,6 +19867,8 @@ snapshots:
       cookie-es: 2.0.0
       youch-core: 0.3.3
 
+  zimmerframe@1.1.4: {}
+
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2
diff --git a/skills/mdc/references/rendering-svelte.md b/skills/mdc/references/rendering-svelte.md
new file mode 100644
index 0000000..74ac020
--- /dev/null
+++ b/skills/mdc/references/rendering-svelte.md
@@ -0,0 +1,399 @@
+# Svelte Rendering Guide
+
+Complete guide for rendering Comark AST in Svelte 5 applications.
+
+## Table of Contents
+
+- [Basic Usage](#basic-usage)
+- [Custom Components](#custom-components)
+- [Dynamic Component Resolution](#dynamic-component-resolution)
+- [Props Mapping](#props-mapping)
+- [Streaming Mode](#streaming-mode)
+- [Prose Components](#prose-components)
+- [Experimental Async](#experimental-async)
+- [Custom Props Handling](#custom-props-handling)
+- [CSS Class](#css-class)
+
+---
+
+## Basic Usage
+
+Use the `Comark` component to render markdown:
+
+```svelte
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  const content = `
+# Hello World
+
+This is **markdown** content.
+
+::alert{type="info"}
+Important message
+::
+`
+</script>
+
+<Comark markdown={content} />
+```
+
+---
+
+## Custom Components
+
+Map custom Svelte components to Comark elements:
+
+```svelte
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import CustomHeading from './CustomHeading.svelte'
+  import CustomAlert from './CustomAlert.svelte'
+  import CustomCard from './CustomCard.svelte'
+
+  const customComponents = {
+    h1: CustomHeading,
+    h2: CustomHeading,
+    alert: CustomAlert,
+    card: CustomCard,
+  }
+</script>
+
+<Comark markdown={content} components={customComponents} />
+```
+
+### Component Resolution Order
+
+Components are resolved by checking these keys in order:
+1. `Prose{PascalTag}` — e.g., `ProseH1` for `<h1>` tags
+2. `PascalTag` — e.g., `Alert` for `::alert` components
+3. `tag` — e.g., `alert` for `::alert` components
+
+### Custom Component Example
+
+Custom components receive AST node attributes as props and children as a Svelte `children` snippet:
+
+```svelte
+<!-- CustomHeading.svelte -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let { id, children }: { id?: string, children?: Snippet } = $props()
+</script>
+
+<h1 {id} class="custom-heading">
+  {@render children?.()}
+</h1>
+```
+
+### Alert Component Example
+
+```svelte
+<!-- CustomAlert.svelte -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    type = 'info',
+    children,
+  }: {
+    type?: 'info' | 'warning' | 'error' | 'success'
+    children?: Snippet
+  } = $props()
+
+  const icons = {
+    info: '\u2139\uFE0F',
+    warning: '\u26A0\uFE0F',
+    error: '\u274C',
+    success: '\u2705',
+  }
+</script>
+
+<div class="alert alert-{type}" role="alert">
+  <div class="alert-icon">{icons[type]}</div>
+  <div class="alert-content">{@render children?.()}</div>
+</div>
+```
+
+---
+
+## Dynamic Component Resolution
+
+Load components dynamically using `componentsManifest`:
+
+```svelte
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  const componentMap: Record<string, () => Promise<any>> = {
+    'alert': () => import('./Alert.svelte'),
+    'card': () => import('./Card.svelte'),
+    'button': () => import('./Button.svelte'),
+  }
+
+  async function loadComponent(name: string) {
+    if (componentMap[name]) {
+      const mod = await componentMap[name]()
+      return mod.default
+    }
+    throw new Error(`Component ${name} not found`)
+  }
+</script>
+
+<Comark markdown={content} componentsManifest={loadComponent} />
+```
+
+---
+
+## Props Mapping
+
+The Svelte renderer maps AST attributes to component props:
+
+### Attribute Mapping
+
+```
+// Markdown attribute → Svelte prop
+{class="foo"}           → class="foo"    (pass-through)
+{className="foo"}       → class="foo"    (mapped)
+{style="color: red"}    → style="color: red"  (pass-through as string)
+{tabindex="0"}          → tabindex="0"   (pass-through)
+{:bool="true"}          → bool={true}    (parsed from string)
+{:count="5"}            → count={5}      (parsed as number)
+{:data='{"key":"val"}'} → data={{key:"val"}} (parsed as object)
+```
+
+Svelte is closer to HTML than React, so most attributes pass through unchanged. The only mapping is `className` → `class`. Colon-prefixed attributes (`:prop="value"`) are parsed as typed values (boolean, number, JSON).
+
+### Boolean Props
+
+```
+// Markdown: ::component{:disabled="true"}
+// Svelte prop: disabled={true}
+
+// Markdown: ::component{:visible="false"}
+// Svelte prop: visible={false}
+```
+
+### Number Props
+
+```
+// Markdown: ::component{:count="5"}
+// Svelte prop: count={5}
+
+// Markdown: ::component{:max="100"}
+// Svelte prop: max={100}
+```
+
+### Object/Array Props
+
+```
+// Markdown: ::component{:config='{"theme":"dark"}'}
+// Svelte prop: config={{theme:"dark"}}
+
+// Markdown: ::component{:items='["a","b","c"]'}
+// Svelte prop: items={["a","b","c"]}
+```
+
+---
+
+## Streaming Mode
+
+Use the `Comark` component with `$state` for streaming content:
+
+```svelte
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+
+  let content = $state('')
+  let isStreaming = $state(false)
+
+  async function streamContent() {
+    isStreaming = true
+    const response = await fetch('/api/content.md')
+    const reader = response.body!.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      content += decoder.decode(value, { stream: true })
+    }
+
+    isStreaming = false
+  }
+</script>
+
+<Comark markdown={content} streaming={isStreaming} caret />
+```
+
+The `caret` prop appends a blinking cursor indicator to the last text node during streaming. Customize with a CSS class:
+
+```svelte
+<Comark markdown={content} streaming={isStreaming} caret={{ class: 'my-caret' }} />
+```
+
+`autoClose` is enabled by default — incomplete syntax like `**bold text` is automatically closed on every parse.
+
+---
+
+## Prose Components
+
+Override native HTML elements using the `Prose` prefix:
+
+```svelte
+<script lang="ts">
+  import { Comark } from '@comark/svelte'
+  import ProseH1 from './ProseH1.svelte'
+  import ProseA from './ProseA.svelte'
+  import ProsePre from './ProsePre.svelte'
+
+  const components = { ProseH1, ProseA, ProsePre }
+</script>
+
+<Comark markdown={content} {components} />
+```
+
+### Tailwind CSS Prose
+
+```svelte
+<article class="prose prose-lg dark:prose-dark max-w-none">
+  <Comark markdown={content} />
+</article>
+```
+
+---
+
+## Experimental Async
+
+The `ComarkAsync` component uses Svelte's experimental `await` in `$derived` for a declarative approach. Requires `experimental.async` in your Svelte config:
+
+```js
+// svelte.config.js
+const config = {
+  compilerOptions: {
+    experimental: { async: true },
+  },
+}
+export default config
+```
+
+Usage with `<svelte:boundary>`:
+
+```svelte
+<script lang="ts">
+  import { ComarkAsync } from '@comark/svelte/async'
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} />
+  {#snippet pending()}
+    <p>Loading...</p>
+  {/snippet}
+  {#snippet failed(error, reset)}
+    <p>Error: {error.message}</p>
+    <button onclick={reset}>Retry</button>
+  {/snippet}
+</svelte:boundary>
+```
+
+---
+
+## Custom Props Handling
+
+Access props in custom components:
+
+```svelte
+<!-- CustomAlert.svelte -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    type = 'info',
+    count,
+    data,
+    children,
+  }: {
+    type?: string       // From {type="info"}
+    count?: number      // From {:count="5"}
+    data?: object       // From {:data='{"key":"val"}'}
+    children?: Snippet
+  } = $props()
+</script>
+
+<div
+  class="alert alert-{type}"
+  data-count={count}
+  data-info={JSON.stringify(data)}
+  role="alert"
+>
+  {@render children?.()}
+</div>
+```
+
+### Working with Complex Props
+
+```svelte
+<!-- DataTable.svelte -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    columns = [],
+    sortable = false,
+    striped = false,
+    children,
+  }: {
+    columns?: string[]   // From {:columns='["Name","Age"]'}
+    sortable?: boolean   // From {:sortable="true"}
+    striped?: boolean    // From {:striped="true"}
+    children?: Snippet
+  } = $props()
+</script>
+
+<table class:table-striped={striped}>
+  {#if columns.length > 0}
+    <thead>
+      <tr>
+        {#each columns as col (col)}
+          <th>
+            {col}
+            {#if sortable}<button>↕</button>{/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+  {/if}
+  <tbody>{@render children?.()}</tbody>
+</table>
+```
+
+**Usage in Markdown:**
+
+```markdown
+::data-table{:columns='["Name", "Age", "Email"]' :sortable="true" :striped="true"}
+Table content here
+::
+```
+
+---
+
+## CSS Class
+
+Add a custom wrapper class:
+
+```svelte
+<Comark markdown={content} class="prose dark:prose-dark" />
+```
+
+### With Tailwind CSS
+
+```svelte
+<Comark
+  markdown={content}
+  class="prose prose-slate lg:prose-xl dark:prose-invert max-w-none"
+/>
+```
+
+---
+
+[← Back to Main Skills Guide](../../SKILLS.md)