Getting Started
Introduction
Comark extends standard Markdown with component syntax, parses it to a compact AST at build time or runtime, and renders it with Vue, React, Svelte, Angular, HTML or ANSI.
What is Comark?
Comark stands for Components in Markdown. It's an extension of the Markdown syntax that lets you use components directly inside your Markdown content:
# Welcome to my blog
This is regular **markdown** with a custom component:
::alert{type="warning"}
This is an important message!
::The ::alert is a block component that supports properties and children (also known as slots).
Learn why we created Comark and the principles behind its design in Why Comark.
Comark parses this into an AST that can be rendered to HTML. It also supports rendering to Vue, Nuxt, React, Svelte, and Angular, turning your Markdown into fully interactive content.
<template>
<Comark :components="{ Alert }">{{ content }}</Comark>
</template>
<script setup lang="ts">
import Alert from './Alert.vue'
const content = `
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`
</script><script setup lang="ts">
import { Comark } from '@comark/vue'
import Alert from './Alert.vue'
const content = `
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`
</script>
<template>
<Comark :components="{ Alert }">{{ content }}</Comark>
</template>import { Comark } from '@comark/react'
import Alert from './Alert.tsx'
const content = `
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`
export default function App() {
return <Comark components={{ Alert }}>{content}</Comark>
}<script lang="ts">
import { Comark } from '@comark/svelte'
import Alert from './Alert.svelte'
const content = `
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`
</script>
<Comark markdown={content} components={{ alert: Alert }} />import { Component } from '@angular/core'
import { ComarkComponent } from '@comark/angular'
import { AlertComponent } from './alert.component'
@Component({
selector: 'app-root',
standalone: true,
imports: [ComarkComponent],
template: `<comark [markdown]="content" [components]="components" />`,
})
export class AppComponent {
components = { alert: AlertComponent }
content = `
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`
}import { parse } from 'comark'
import { renderHTML } from '@comark/html'
const tree = await parse(`
# Hello World
::alert{type="info"}
Welcome to Comark!
::
`)
const html = await renderHTML(tree, {
components: {
alert: async ([_tag, attrs, ...children], { render }) => {
return `<div class="alert alert-${attrs.type}" role="alert">${await render(children)}</div>`
}
}
})
/*
<h1>Hello World</h1>
<div class="alert alert-info" role="alert"><p>Welcome to Comark!</p></div>
*/When to Use Comark
Comark is ideal for:
- Documentation sites - Write docs in Markdown with interactive examples
- Blog platforms - Rich content with custom components for callouts, embeds, and more
- AI chat interfaces - Stream and render Markdown responses in real-time
- CMS integrations - Let content editors use components without touching code
- Technical writing - Combine prose with live code examples and diagrams
Comparison with Other Tools
For detailed, honest comparisons, see Comark vs MDX, Comark vs react-markdown, Comark vs Streamdown, and Comark vs Markdoc.
| Feature | Comark | Streamdown | MDX | Markdoc |
|---|---|---|---|---|
| Streaming support | ||||
| Component syntax | ||||
| Vue support | ||||
| React support | ||||
| Svelte support | ||||
| Angular support | ||||
| No build step | ||||
| Parse to AST | ||||
| Compact AST | ||||
| Auto-close for streams | ||||
| Decoupled parsing & rendering |
Key Features
FAQ
MDX compiles Markdown to JSX at build time, tying content to a bundler and to React. Comark parses component syntax at runtime, so content can come from a database, CMS, or AI stream and render to any framework. See Comark vs MDX.
Yes. Comark is built on markdown-exit, a TypeScript rewrite of markdown-it, so existing markdown-it plugins work alongside Comark plugins. See using markdown-it plugins.
The auto-close parser completes unterminated syntax (bold, code fences, components) so every incomplete frame renders correctly. Framework renderers expose this as a
streaming prop.No. Comark is a superset of CommonMark and GFM, so plain Markdown parses unchanged. Components and attributes are opt-in syntax.
How It Works
- Parse - Comark parses Markdown into a compact Comark AST
- Transform - The AST can be manipulated, cached, or serialized
- Render - Framework-specific renderers convert the AST to Vue, React, Svelte or Angular components, or render to string in Markdown, HTML or ANSI.