comark

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 supports CommonMark and GFM, then parses them into a compact, serializable document at build time, runtime, or during a stream. Use the same document across renderers, or extend the syntax with readable components and attributes when you need richer content.

# Regular Markdown

With a custom component:

::alert{type="warning"}
This is **Markdown** inside your own component.
::

Why Comark

Runtime parsing: parseMarkdown(markdown) is a pure function returning a compact, serializable Markdown document. Content from a database, CMS, or LLM is live the moment it is saved. No rebuild, no redeploy. (Comark vs MDX)
Streaming built in: auto-close completes unterminated syntax (**bold, open code fences, half-open components) so AI output renders correctly at every frame.
One parser, every renderer: the same source renders to HTML, ANSI, Vue, React, Svelte, and Angular. Your content outlasts your framework.
Still just Markdown: CommonMark + GFM (with a few differences), frontmatter, and {.class} attributes on native elements. Components are opt-in syntax, not a new language.
Plugin ecosystem: Shiki highlighting, KaTeX math, Mermaid diagrams, TOC, alerts, footnotes and more, plus compatibility with existing markdown-it plugins.
Decoupled parse & render: parse once on the server, send the serializable document (['tag', props, ...children]) to the client, render without re-parsing.
Fast: built on markdown-exit, a TypeScript rewrite of markdown-it, with full TypeScript support.

The component and attribute syntax builds on five years of production use in MDC. Read Why Comark for the full story.

Quick Start

npm install comark

import { parseMarkdown } from 'comark'

const tree = await parseMarkdown('# Hello **World**')
// { nodes: [['h1', { id: 'hello' }, 'Hello ', ['strong', {}, 'World']]], frontmatter: {}, meta: {} }

Then pick a renderer:

Vue

npm install @comark/vue katex

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

const chatMessage = ...
</script>

<template>
  <Markdown :components="{ Math }" :plugins="[math()]">{{ chatMessage }}</Markdown>
</template>

React

npm install @comark/react katex

import { Markdown } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'

function App() {
  const chatMessage = ...
  return <Markdown components={{ Math }} plugins={[math()]}>{chatMessage}</Markdown>
}

Svelte

npm install @comark/svelte katex

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

  const chatMessage = ...
</script>

<Markdown value={chatMessage} components={{ math: Math }} plugins={[math()]} />

Angular

npm install @comark/angular katex

import { Component } from '@angular/core'
import { Markdown } from '@comark/angular'
import math, { Math } from '@comark/angular/plugins/math'

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [Markdown],
  template: `<comark-markdown [value]="chatMessage" [components]="{ Math }" [plugins]="[math()]" />`,
})
export class ChatComponent {
  chatMessage = ...
}

HTML (No Framework)

npm install @comark/html

import { renderHtml } from '@comark/html'

const chatMessage = ...

const html = await renderHtml(chatMessage)

Packages

Package	Description
`comark`	Core parser, AST utilities, plugins
`@comark/vue`	Vue 3 renderer
`@comark/react`	React renderer (Next.js, Server Components)
`@comark/svelte`	Svelte 5 renderer
`@comark/angular`	Angular renderer
`@comark/nuxt`	Nuxt module with auto-imports
`@comark/html`	HTML string renderer
`@comark/ansi`	ANSI terminal renderer

Agent skill

Coding agents can install the Comark skill from the docs site:

npx skills add https://comark.dev

See Installation on comark.dev for details.

License

Made with ❤️

Published under MIT License.