// Comark (Components in Markdown) parser — syntax, AST, Vue/React/Svelte renderers, plugins, and LLM streaming with auto-close.
| name | comark |
| description | Comark (Components in Markdown) parser — syntax, AST, Vue/React/Svelte renderers, plugins, and LLM streaming with auto-close. |
A high-performance markdown parser with Comark (Components in Markdown) support, built on markdown-it, offering both string-based and streaming APIs.
Comark extends standard markdown with a powerful component system while maintaining full compatibility with CommonMark and GitHub Flavored Markdown. It provides:
comarknpm install comark or pnpm add comarkcomark@comark/vue@comark/react@comark/svelte@comark/html@comark/ansi@comark/nuxtimport { parse } from 'comark'
const content = `---
title: Hello World
---
# Hello World
This is **markdown** with :icon component.
::alert{type="info"}
Important message
::
`
const result = await parse(content)
console.log(result.nodes) // Comark AST
console.log(result.frontmatter) // { title: 'Hello World' }
console.log(result.meta) // Additional metadata
<template>
<Comark :markdown="content" />
</template>
<script setup lang="ts">
import { Comark } from '@comark/vue'
const content = `# Hello World`
</script>
import { Comark } from '@comark/react'
export default function App() {
return <Comark markdown={content} />
}
<script lang="ts">
import { Comark } from '@comark/svelte'
const content = `# Hello World`
</script>
<Comark markdown={content} />
This guide is organized into focused sections covering different aspects of the package:
Learn how to write Comark documents with complete syntax reference:
::component), inline components (:component), properties, slots, nesting{...} syntax[x] and [ ] syntax→ Read Full Markdown Syntax Guide
Complete guide for parsing documents and working with AST:
parse() function with options (autoUnwrap, autoClose)parse() with Shiki syntax highlightingrenderHTML via @comark/html) or markdown (renderMarkdown via comark/render)→ Read Full Parsing & AST Guide
Comprehensive guide for rendering in Vue applications:
Comark component setupcomponentsManifest for lazy-loaded components#slot-name syntax__node and parsed properties→ Read Full Vue Rendering Guide
Comprehensive guide for rendering in React applications:
Comark component setupcomponentsManifest for lazy-loaded componentsclass → className, etc.)__node→ Read Full React Rendering Guide
Comprehensive guide for rendering in Svelte 5 applications:
Comark component setup with $statecomponentsManifest for lazy-loaded components$stateComarkAsync with <svelte:boundary>Prose prefix for overriding native HTML elements→ Read Full Svelte Rendering Guide
Guide for integrating Comark in AI agent and LLM streaming workflows:
Comark extends markdown with custom components while preserving readability:
<!-- Block Component -->
::alert{type="warning" .important}
This is a **warning** message with markdown support.
::
<!-- Inline Component -->
Check out this :icon-star{.text-yellow} component.
<!-- Component with Slots -->
::card
#header
## Title
#content
Main content
#footer
Footer
::
Lightweight array-based structure for efficient processing:
interface ComarkTree {
nodes: [
["h1", { "id": "hello" }, "Hello"],
["p", {}, "Text with ", ["strong", {}, "bold"], " word"],
["alert", { "type": "info" }, "Message"]
],
frontmatter: {},
meta: {}
}
import { parse } from 'comark'
import { renderHTML } from '@comark/html'
import highlight from '@comark/html/plugins/highlight'
async function processMarkdownFile(filePath: string) {
const content = await readFile(filePath, 'utf-8')
const tree = await parse(content, {
plugins: [
highlight({
themes: { light: 'github-dark', dark: 'github-dark' },
}),
],
})
return {
html: renderHTML(tree),
frontmatter: tree.frontmatter,
toc: tree.meta.toc
}
}
import { useState } from 'react'
import { Comark } from '@comark/react'
export default function Editor() {
const [content, setContent] = useState('# Hello')
return (
<div className="split-editor">
<textarea value={content} onChange={e => setContent(e.target.value)} />
<Comark markdown={content} />
</div>
)
}
import { readFile } from 'node:fs/promises'
import { parse } from 'comark'
async function processMultipleFiles(files: string[]) {
const results = await Promise.all(
files.map(async (file) => {
const content = await readFile(file, 'utf-8')
return await parse(content)
})
)
results.forEach((result, i) => {
console.log(`File ${files[i]}:`)
console.log(` - ${result.nodes.length} nodes`)
})
}
<template>
<article class="prose">
<Comark :markdown="markdownContent" :components="docComponents" />
</article>
</template>
<script setup lang="ts">
import { Comark } from '@comark/vue'
import { docComponents } from './components'
</script>
comark)// Asynchronous parsing
parse(source: string, options?: ParseOptions): Promise<ComarkTree>
// Auto-close unclosed syntax
autoCloseMarkdown(source: string): string
@comark/html)// Render markdown to HTML string (parse + render in one step)
render(markdown: string, options?: RenderOptions): Promise<string>
// Render a pre-parsed tree to HTML
renderHTML(tree: ComarkTree, options?: RenderOptions): Promise<string>
// Create a reusable render function with shared parser instance
createRender(options?: ParseOptions & RenderOptions): (markdown: string) => Promise<string>
@comark/vue)<Comark :markdown="markdownString" :components="customComponents" />
@comark/react)<Comark markdown={markdownString} components={customComponents} />
@comark/svelte)<Comark markdown={markdownString} components={customComponents} />
Full TypeScript definitions included:
import type {
ComarkTree,
ComarkNode,
ParseOptions,
} from 'comark'
┌─────────────────────────────────────────┐
│ Markdown Input (String) │
└────────────────┬────────────────────────┘
│
┌────────▼────────┐
│ Auto-close │ (Optional)
│ Unclosed │
│ Syntax │
└────────┬────────┘
│
┌────────▼────────┐
│ Parse │
│ Frontmatter │ (YAML)
└────────┬────────┘
│
┌────────▼────────┐
│ MarkdownIt │
│ + Plugins │ (Comark, Tasks)
└────────┬────────┘
│
┌────────▼────────┐
│ Token │
│ Processing │
└────────┬────────┘
│
┌────────▼────────┐
│ Comark │
│ AST │
└────────┬────────┘
│
┌────────▼────────┐
│ Auto-unwrap │ (Optional)
└────────┬────────┘
│
┌────────▼────────┐
│ Generate TOC │
└────────┬────────┘
│
┌────────▼────────┐
│ ComarkTree │
│ (nodes + data │
│ + meta) │
└────────┬────────┘
│
┌───────────┬───────────┴───────────┐
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Vue │ │ React │ │ Svelte │
│ Renderer│ │ Renderer│ │ Renderer│
└─────────┘ └─────────┘ └─────────┘
See the test specifications for examples of all supported syntax features.
Run tests:
pnpm test
Run specific test:
pnpm test -- tests/parse.test.ts
Comark is a comprehensive solution for parsing and rendering markdown with component support. It excels at:
Choose Comark when you need:
Next Steps:
Migrate a Nuxt project from @nuxtjs/mdc to Comark. Covers package changes, parse/render API mapping, AST format, Nuxt module config, components, slots, plugins, and Nuxt UI integration.
Comark (Components in Markdown) parser — syntax, AST, Vue/React/Svelte renderers, plugins, and LLM streaming with auto-close.