comark

comark

The Markdown engine for the modern web. One parser, every renderer: Vue, React, Svelte, Angular, HTML and ANSI, with components, plugins and streaming.

Comark (Components in Markdown) extends standard Markdown with component syntax that stays plain text. No build step: parse at runtime or build time, on the server or in the browser, and render the same content anywhere.

# 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 Vue, React, Svelte, Angular, Nuxt, HTML strings, and ANSI terminal output. Your content outlasts your framework.
• Still just Markdown: full CommonMark + GFM, 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.

Built on five years of MDC, the parser behind Nuxt Content. 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.