---
title: "What Is Comark? Markdown Parser and Renderer"
description: "Comark is an open-source Markdown parser and renderer with components, attributes and plugins. It streams AI output to React, Vue, Svelte, Angular, HTML and the terminal."
canonical_url: "https://comark.dev/getting-started/introduction"
---
# What Is Comark? Markdown Parser and Renderer

> Comark is an open-source Markdown parser and renderer with components, attributes and plugins. It streams AI output to React, Vue, Svelte, Angular, HTML and the terminal.

**Comark** is an open-source Markdown parser and renderer with components, attributes and plugins. It streams AI output to React, Vue, Svelte, Angular, HTML and the terminal. Give it standard CommonMark or GitHub Flavored Markdown (GFM), and render the same source to any of these targets.

Parsing and rendering are decoupled through a compact, serializable [`MarkdownDocument`](https://comark.dev/getting-started/document-model). Parse on the server, in the browser, in a worker, during a build, or as content streams in. You can then inspect, transform, cache, serialize, or render the document without tying your content to one output target.

Comark is built on [markdown-exit](https://github.com/serkodev/markdown-exit), a TypeScript rewrite of markdown-it that preserves its plugin API. It combines that foundation with streaming support, an extensible plugin system, and optional component and attribute syntax for richer content.

Start with the renderer that matches your output:

::code-group
```ts [HTML]
import { renderHtml } from '@comark/html'

const content = '# Hello **World**'
const html = await renderHtml(content)
```

```ts [ANSI]
import { renderAnsi } from '@comark/ansi'

const content = '# Hello **World**'
const output = await renderAnsi(content)
```

```vue [Vue]
<script setup lang="ts">
import { Markdown } from '@comark/vue'

const content = '# Hello **World**'
</script>

<template>
  <Suspense>
    <Markdown>{{ content }}</Markdown>
  </Suspense>
</template>
```

```tsx [React]
import { Markdown } from '@comark/react'

const content = '# Hello **World**'

export default function App() {
  return <Markdown>{content}</Markdown>
}
```

```svelte [Svelte]
<script lang="ts">
  import { Markdown } from '@comark/svelte'

  const content = '# Hello **World**'
</script>

<Markdown value={content} />
```

```typescript [Angular]
import { Component } from '@angular/core'
import { Markdown } from '@comark/angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Markdown],
  template: `<comark-markdown [value]="content" />`,
})
export class AppComponent {
  content = '# Hello **World**'
}
```
::

::callout{to="https://comark.dev/kb/why-comark" icon="i-lucide-lightbulb"}
Learn why we created Comark and the principles behind its design in [Why Comark](https://comark.dev/kb/why-comark).
::

## How it works

::div{.border.border-default.rounded.bg-muted.p-4}
```mermaid {theme="zinc-light" theme-dark="zinc-dark"}
graph LR
    A[Markdown] --> B[Parser]
    B --> C[MarkdownDocument]
    C --> D{Renderer}
    D --> I[ANSI]
    D --> H[HTML]
    D --> J[Markdown]
    D --> F[React]
    D --> G[Svelte]
    D --> E[Vue]
    D --> K[Angular]
```
::

1. **Parse** - Comark parses Markdown into a compact [`MarkdownDocument`](https://comark.dev/getting-started/document-model)
2. **Transform** - Inspect, transform, cache, or serialize the document
3. **Render** - Convert the document to HTML, ANSI, Markdown, Vue, React, Svelte, or Angular

## Extend Markdown when needed

Plain Markdown works without any component syntax. When your content needs richer structure, Comark adds readable components and attributes without embedding verbose HTML or executable framework code:

```mdc
# Welcome to my blog

This is regular **Markdown** with a custom component:

::alert{type="warning"}
This is an important message!
::
```

The `::alert` block supports properties, children, and named slots. The renderer only uses components you explicitly register, so the source remains portable data rather than framework-specific code. Learn more in [Component Syntax](https://comark.dev/syntax/components) and [Attributes](https://comark.dev/syntax/attributes).

Editor and browser tooling when working with Comark components:

- [Comark for VS Code extension](https://comark.dev/getting-started/installation#ide-extension) for components and attributes syntax highlighting and autocomplete
- [Comark for GitHub browser extension](https://comark.dev/getting-started/installation#browser-extension) to visualize Comark syntax directly on GitHub Markdown pages

## When to use Comark

Comark is ideal for:

- **Content platforms** - Parse Markdown from files, databases, APIs, or a CMS at build time or runtime
- **Multi-target publishing** - Reuse one source for applications, static HTML, RSS, email, and terminal output
- **AI chat interfaces** - Stream and render incomplete Markdown responses in real time
- **Documentation and blogs** - Combine standard Markdown with callouts, embeds, diagrams, and interactive UI
- **Content pipelines** - Inspect, transform, cache, or serialize a compact document before rendering

## Comparison with other tools

For detailed, honest comparisons, see [Comark vs MDX](https://comark.dev/compare/comark-vs-mdx), [Comark vs react-markdown](https://comark.dev/compare/comark-vs-react-markdown), [Comark vs Streamdown](https://comark.dev/compare/comark-vs-streamdown), and [Comark vs Markdoc](https://comark.dev/compare/comark-vs-markdoc).

| Feature                       | Comark                                             | Streamdown                                         | MDX                                                | Markdoc                                            |
| ----------------------------- | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- |
| Streaming support             | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       |
| Component syntax              | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: |
| Vue support                   | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-check" .text-green-500}   :: |
| React support                 | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: |
| Svelte support                | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       |
| Angular support               | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       |
| No build step                 | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-check" .text-green-500}   :: |
| Parse to AST                  | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-check" .text-green-500}   :: |
| Compact AST                   | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       |
| Auto-close for streams        | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       |
| Decoupled parsing & rendering | ::icon{name="i-lucide-check" .text-green-500}   :: | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-x" .text-red-500}   ::       | ::icon{name="i-lucide-check" .text-green-500}   :: |

## Core capabilities

::card-group
  :::card{icon="i-lucide-file-text" title="CommonMark and GFM" to="https://comark.dev/syntax/markdown"}
  Parse familiar Markdown syntax, including tables, task lists, code blocks, and more.
  :::

  :::card{icon="i-lucide-layers" title="Parse Once, Render Anywhere" to="https://comark.dev/getting-started/document-model"}
  Produce a compact document you can inspect, cache, serialize, and render to every supported target.
  :::

  :::card{icon="i-lucide-radio" title="Streaming Support" to="https://comark.dev/rendering/vue#streaming"}
  Real-time incremental parsing for AI chat interfaces and live content.
  :::

  :::card{icon="i-lucide-puzzle" title="Plugin Ecosystem" to="https://comark.dev/plugins"}
  Extend parsing with Comark plugins or reuse plugins written for markdown-it.
  :::

  :::card{icon="i-lucide-component" title="Component Syntax" to="https://comark.dev/syntax/components"}
  Add props, slots, and nested UI while keeping content as readable plain text.
  :::

  :::card{icon="i-lucide-code" title="Dedicated Renderers" to="https://comark.dev/getting-started/installation"}
  Render to HTML, ANSI, Vue, React, Svelte, and Angular without changing the source.
  :::
::

## FAQ

::accordion
  :::accordion-item{label="How is Comark different from MDX?"}
  MDX compiles Markdown to JSX at build time, tying content to a bundler and to React. Comark parses Markdown into serializable data at build time or runtime, then renders it to multiple targets. See [Comark vs MDX](https://comark.dev/compare/comark-vs-mdx).
  :::

  :::accordion-item{label="Does Comark require a specific framework?"}
  No. The core parser is framework-free. Renderers exist for [Vue](https://comark.dev/rendering/vue), [React](https://comark.dev/rendering/react), [Svelte](https://comark.dev/rendering/svelte), and [Angular](https://comark.dev/rendering/angular), plus string output as [HTML](https://comark.dev/rendering/html) and [ANSI](https://comark.dev/rendering/ansi).
  :::

  :::accordion-item{label="Can I use markdown-it plugins with Comark?"}
  Yes. Comark is built on markdown-exit, a TypeScript rewrite of markdown-it that preserves its plugin API. Existing markdown-it plugins work alongside [Comark plugins](https://comark.dev/plugins). See [using markdown-it plugins](https://comark.dev/plugins/custom/markdown-it).
  :::

  :::accordion-item{label="How does Comark handle streaming AI output?"}
  The [auto-close](https://comark.dev/reference/auto-close) parser completes unterminated syntax (bold, code fences, components) so every incomplete frame renders correctly. Framework renderers expose this as a `streaming` prop.
  :::

  :::accordion-item{label="Do I have to use components?"}
  No. Plain CommonMark and GFM parse as standard Markdown, with a few [documented differences](https://comark.dev/syntax/markdown#differences-from-commonmark-and-gfm). Components and [attributes](https://comark.dev/syntax/attributes) are opt-in syntax.
  :::
::

---

- [Installation](https://comark.dev/getting-started/installation)
- [GitHub](https://github.com/comarkdown/comark)


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.