close

comark

compare this package

The Markdown engine for the modern web. Parse Markdown with components, attributes and plugins to a compact AST, at build time or runtime, and render with Vue, React, Svelte, Angular, HTML or ANSI. Streaming-ready for AI output.

  • Types
  • ESM
License
MIT
Deps
4(-)
View dependency graphInspect dependency tree
Install Size
509.2 kB(3.2 MB)
Vulns
0
Published

Get started

$npm install comark

Weekly DownloadsAcross all versions

Versions

0.6.2
latest

Dependencies (4)

Peer Dependency (4)

Keywords

Maintainers

Readme

Comark banner

comark

npm version npm downloads CI Documentation license

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.