Introduction

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. 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, 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:

import { renderHtml } from '@comark/html'

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

import { renderAnsi } from '@comark/ansi'

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

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

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

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

import { Markdown } from '@comark/react'

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

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

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

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

<Markdown value={content} />

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

How It Works

1. Parse - Comark parses Markdown into a compact MarkdownDocument
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:

# 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 and Attributes.

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, Comark vs react-markdown, Comark vs Streamdown, and Comark vs Markdoc.

Core Capabilities

FAQ