comark

What it is

• A TypeScript‑written Markdown parser that turns CommonMark/GFM (plus a small component/attribute extension) into a compact, serialisable AST.
• The AST can be generated at build‑time, runtime, or while streaming text (e.g., from an LLM), and then rendered by a variety‑specific renderer.

Key capabilities

• Pure‑function parsing – parseMarkdown(md) returns a plain JavaScript structure (['tag', props, …children]). No side‑effects, so you can parse content from a DB, CMS, or live LLM output without rebuilding.
• Streaming‑ready – The parser auto‑closes unfinished syntax (bold, code fences, components) so partial AI‑generated output can be displayed frame‑by‑frame.
• One AST, many renderers – Same AST can be fed to renderers for React, Vue, Svelte, Angular, plain HTML, or ANSI terminal output.
• Component syntax – Inline custom components can be written in Markdown using ::component{…} … :: (e.g., alerts, math). Attributes on native elements are supported via {.class}.
• Plugin ecosystem – Built‑in plugins for Shiki syntax highlighting, KaTeX math, Mermaid diagrams, TOC, alerts, footnotes, plus compatibility with existing markdown-it plugins.
• Performance – Built on markdown-exit, a TypeScript rewrite of markdown-it.

How you use it

1. Install the core package:

   npm install comark
   

2. Parse Markdown to an AST:

   import { parseMarkdown } from 'comark'
   const tree = await parseMarkdown('# Hello **World**')
   // → { nodes: [['h1', { id: 'hello' }, 'Hello ', ['strong', {}, 'World']]], … }
   

3. Choose a renderer package that matches your UI stack and feed it the same AST or raw Markdown string.
   • Vue – @comark/vue
   • React – @comark/react
   • Svelte – @comark/svelte
   • Angular – @comark/angular
   • HTML – @comark/html
   • ANSI (terminal) – @comark/ansi
4. Optionally add plugins (e.g., KaTeX math) and custom components when rendering.

Why it matters for AI‑generated content

• LLMs often stream partial Markdown; Comark’s auto‑closing logic keeps the UI stable while the model is still typing.
• The serialisable AST lets you store or transmit the parsed representation, avoiding repeated parsing on the client.
• Because the parser is framework‑agnostic, the same AI‑generated Markdown can be displayed in web apps, native‑like frameworks, or terminal tools without rewriting the content.

Packaging

Package	Purpose
comark	Core parser, AST utilities, plugin system
@comark/vue	Vue 3 renderer
@comark/react	React renderer (incl. Next.js Server Components)
@comark/svelte	Svelte 5 renderer
@comark/angular	Angular renderer
@comark/nuxt	Nuxt module with auto‑imports
@comark/html	Render to plain HTML string
@comark/ansi	Render to ANSI for terminals

License

• MIT, with a friendly “Made with ❤️” note.

Bottom line Comark is a modern, streaming‑aware Markdown parser and multi‑framework renderer, aimed at developers who need to display live or AI‑generated Markdown across many front‑ends while keeping parsing fast and consistent.