feat: Svelte renderer

.gitignore

@@ -32,3 +32,6 @@ logs
 
 .vscode
 .history
+
+# Svelte
+.svelte-kit

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
 

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',
       },
     },
   },

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.

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

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