The Markdown engine for the modern web

One parser, every renderer. Component syntax, attributes, plugins, and streaming, with decoupled parsing you can run on the server, the client, or mid-stream.

Get Started GitHub

comark

Open in playground

source.md

# Hello World

A **high-performance** markdown parser with _streaming_ support.

## Features

- Parse markdown in real-time
- Vue, React, Svelte, and Angular components
- Auto-close incomplete syntax

::callout{color="info" icon="i-lucide-info"}
Comark handles **components in markdown** natively.
::

> Built for modern web applications.

```ts [example.ts]
import { parse } from 'comark'

const tree = await parse('# Hello **World**')

rendered output

Hello World

A high-performance markdown parser with streaming support.

Features

Parse markdown in real-time
Vue, React, Svelte, and Angular components
Auto-close incomplete syntax

Comark handles components in markdown natively.

Built for modern web applications.

example.ts

import { parse } from 'comark'

const tree = await parse('# Hello **World**')

Why Comark

Markdown as data, not code

Component syntax stays in plain text. Parsing happens at build time or runtime, your choice, and works across any renderer. Built on five years of MDC, the parser behind Nuxt Content.

Runtime parsing

No build step. Parse Markdown with components on the server, in the browser, or in a worker. Content is live the moment it is saved.

Streaming built in

Auto-close renders incomplete Markdown correctly at every frame. Pipe AI output straight into your component tree.

One parser, every renderer

The same source renders to Vue, React, Svelte, Angular, Nuxt, HTML and ANSI. Your content outlasts your framework.

Still just Markdown

CommonMark and GFM by default. Attributes and components are opt-in syntax, not a new language.

Plugin ecosystem

Compatible with markdown-it plugins. Shiki highlighting, KaTeX math, Mermaid diagrams, table of contents and more.

Compact AST

Parse to plain arrays that are easy to traverse, cache, serialize, and send over the wire.

Streaming

Real-time streaming

Parse content as it arrives. Built for AI chat interfaces and progressive loading.

Learn more

Frameworks

Vue, React, Svelte & Angular

Embed custom components in your Markdown and render them natively in Vue, React, Svelte and Angular.

import { Comark } from '@comark/react'
import { Alert } from './components/Alert'

const markdown = `
# Hello **World**

::alert{type="info"}
This is a Comark component!
::
`

export default function App() {
  return (
    <Comark components={{ Alert }}>
      {markdown}
    </Comark>
  )
}

<script lang="ts">
  import { Comark } from '@comark/svelte'
  import Alert from './components/Alert.svelte'

  const markdown = `
# Hello **World**

::alert{type="info"}
This is a Comark component!
::`
</script>

<Comark markdown={markdown} components={{ Alert }} />

<script setup lang="ts">
import { Comark } from '@comark/vue'
import Alert from './components/Alert.vue'

const md = `
# Hello **World**

::alert{type="info"}
This is a Comark component!
::
`
</script>

<template>
  <Suspense>
    <Comark :components="{ Alert }">
      {{ md }}
    </Comark>
  </Suspense>
</template>

import { Component } from '@angular/core'
import { ComarkComponent } from '@comark/angular'
import { AlertComponent } from './components/alert.component'

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

::alert{type="info"}
This is a Comark component!
::`
}