---
title: "Introduction"
description: "Parse and render CommonMark and GFM anywhere with Comark, a JavaScript library for HTML, ANSI, Vue, React, Svelte, Angular, plugins, and streaming."
canonical_url: "https://comark.dev/getting-started/introduction"
---
# Introduction
> Parse and render CommonMark and GFM anywhere with Comark, a JavaScript library for HTML, ANSI, Vue, React, Svelte, Angular, plugins, and streaming.
## What is Comark?
**Comark** is a JavaScript library for parsing and rendering Markdown anywhere. Give it standard CommonMark or GitHub Flavored Markdown (GFM), then render the same source to HTML, ANSI, Vue, React, Svelte, or Angular.
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:
```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]
{{ content }}
```
```tsx [React]
import { Markdown } from '@comark/react'
const content = '# Hello **World**'
export default function App() {
return {content}
}
```
```svelte [Svelte]
```
```typescript [Angular]
import { Component } from '@angular/core'
import { Markdown } from '@comark/angular'
@Component({
selector: 'app-root',
standalone: true,
imports: [Markdown],
template: ``,
})
export class AppComponent {
content = '# Hello **World**'
}
```
Learn why we created Comark and the principles behind its design in [Why Comark](https://comark.dev/kb/why-comark).
## How it works
```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 | | | | |
| 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 | | | | |
## Core capabilities
Parse familiar Markdown syntax, including tables, task lists, code blocks, and more.
Produce a compact document you can inspect, cache, serialize, and render to every supported target.
Real-time incremental parsing for AI chat interfaces and live content.
Extend parsing with Comark plugins or reuse plugins written for markdown-it.
Add props, slots, and nested UI while keeping content as readable plain text.
Render to HTML, ANSI, Vue, React, Svelte, and Angular without changing the source.
## FAQ
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).
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).
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).
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.
No. Comark is a superset of CommonMark and GFM, so plain Markdown parses unchanged. 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.