# 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.

## When to use Comark

Use Comark when:

- The same Markdown renders in more than one place: React, Vue, Svelte, Angular, HTML strings, or the terminal (ANSI).
- You render streaming LLM output. Comark closes unterminated syntax (bold, code fences, components) on every frame, in every renderer.
- Content needs components without a build step or code execution, for example `::alert{type="info"}` written by an author, a CMS, a database, or a model.
- You build an intelligent UI (generative UI): the model answers with your own interactive components, which render progressively while it streams.
- You want to parse once and keep the result: `parseMarkdown()` returns a serializable `MarkdownDocument` you can cache, store, and render later on any client.

Use something else when:

- You only convert Markdown to HTML, with no components and no streaming: marked or markdown-it are smaller.
- Your content imports and runs JavaScript (JSX expressions, ESM imports): use MDX.
- You depend on remark or rehype plugins: Comark runs markdown-it plugins, not unified plugins.
- You build a React-only chat UI and need no component syntax in the output: Streamdown also fits.

- [Choosing a Markdown library for AI chat](https://comark.dev/raw/compare/markdown-libraries-for-ai-chat.md)
- [Render streaming Markdown from an LLM](https://comark.dev/raw/use-cases/ai-chat-streaming.md)
- [Let an LLM render UI components inside Markdown](https://comark.dev/raw/use-cases/generative-ui.md)
- [Build your own intelligent UI](https://comark.dev/raw/use-cases/intelligent-ui.md)
- [Comark vs MDX](https://comark.dev/raw/compare/comark-vs-mdx.md)
- [Comark vs react-markdown](https://comark.dev/raw/compare/comark-vs-react-markdown.md)
- [Comark vs Streamdown](https://comark.dev/raw/compare/comark-vs-streamdown.md)
- [Comark vs Markdoc](https://comark.dev/raw/compare/comark-vs-markdoc.md)

## Documentation

Every page below is available as raw markdown. Fetch any URL directly.

- [Landing page](https://comark.dev/raw/index.md): Overview of Comark
- [Ecosystem](https://comark.dev/raw/ecosystem.md): Renderers, plugins, integrations and tooling built around Comark by the community and the core team.

## Documentation Sets

- [Comark Documentation](https://comark.dev/llms-full.txt): Complete Comark documentation as plain markdown — getting started, syntax, rendering, plugins, API reference, comparisons, and examples.
- [Comark core](https://comark.dev/llms-core.txt): Parse Markdown into a serializable document, the Comark syntax, and the core APIs.
- [Streaming Markdown with Comark](https://comark.dev/llms-streaming.txt): Render streaming LLM output: auto-close, AI chat in every framework, and components in model output.
- [Comark for Vue and Nuxt](https://comark.dev/llms-vue.txt): Render Markdown in Vue 3 and Nuxt, with custom components, plugins, and streaming.
- [Comark for React](https://comark.dev/llms-react.txt): Render Markdown in React and Next.js, with custom components, plugins, and streaming.
- [Comark for Svelte](https://comark.dev/llms-svelte.txt): Render Markdown in Svelte 5 and SvelteKit, with custom components, plugins, and streaming.
- [Comark for Angular](https://comark.dev/llms-angular.txt): Render Markdown in Angular 17+, with standalone components, plugins, and streaming.
- [Comark plugins](https://comark.dev/llms-plugins.txt): Every built-in plugin, and the APIs to write your own.

## Getting Started

- [Introduction](https://comark.dev/raw/getting-started/introduction.md): 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.
- [Installation](https://comark.dev/raw/getting-started/installation.md): Install Comark and choose a parser or renderer for HTML, ANSI, Vue, React, Svelte, or Angular to start working with Markdown in minutes.
- [Document](https://comark.dev/raw/getting-started/document-model.md): Understand the serializable Markdown document returned by Comark, including its nodes, frontmatter, metadata and rendering workflow.

## Syntax

- [Markdown](https://comark.dev/raw/syntax/markdown.md): Comark parses CommonMark and GitHub Flavored Markdown (GFM), including headings, formatting, lists, tables, and code blocks, with a few documented differences.
- [Components](https://comark.dev/raw/syntax/components.md): Embed custom components directly in your Markdown with block and inline syntax, props, slots, and nested children.
- [Attributes](https://comark.dev/raw/syntax/attributes.md): Add custom classes, IDs, styles, and data attributes to native Markdown elements using the curly brace syntax.
- [Frontmatter](https://comark.dev/raw/syntax/frontmatter.md): Add a leading YAML block to declare document metadata that Comark parses into tree.frontmatter.

## Rendering

- [HTML](https://comark.dev/raw/rendering/html.md): Convert Markdown to HTML strings in JavaScript without a framework, for server rendering, static sites, RSS feeds, and emails.
- [Vue](https://comark.dev/raw/rendering/vue.md): Render Markdown in Vue 3 with the Markdown component: map elements to your own components, add plugins, and stream AI output as it arrives.
- [Nuxt](https://comark.dev/raw/rendering/nuxt.md): Render Markdown in Nuxt with the @comark/nuxt module: auto-imported components, prose overrides, Nuxt UI integration, and streaming.
- [React](https://comark.dev/raw/rendering/react.md): Render Markdown in React and Next.js with custom components, plugins, React Server Components, and streaming for AI chat output.
- [Svelte](https://comark.dev/raw/rendering/svelte.md): Render Markdown in Svelte 5 with native components, custom components, plugins, and streaming for AI output, including SvelteKit SSR.
- [Angular](https://comark.dev/raw/rendering/angular.md): Render Markdown in Angular 17+ with standalone components, custom components, plugins, and streaming for AI output.
- [ANSI (Terminal)](https://comark.dev/raw/rendering/ansi.md): Render Markdown as styled ANSI output in the terminal for Node.js CLIs, scripts, and coding agents, with syntax highlighting.

## Plugins

- [Alerts](https://comark.dev/raw/plugins/defaults/alert.md): Built-in plugin that transforms GitHub-style blockquote alerts into styled callout blocks with icons and colors.
- [Attributes](https://comark.dev/raw/plugins/defaults/attributes.md): Built-in plugin that parses inline attributes into AST props.
- [Components](https://comark.dev/raw/plugins/defaults/components.md): Built-in plugin that parses block and inline Comark component syntax into AST nodes.
- [Frontmatter](https://comark.dev/raw/plugins/defaults/frontmatter.md): Built-in plugin that parses a leading YAML frontmatter block into tree.frontmatter.
- [HTML](https://comark.dev/raw/plugins/defaults/html.md): Built-in plugin that parses embedded HTML tags into Comark AST nodes.
- [Task list](https://comark.dev/raw/plugins/defaults/task-list.md): Plugin for rendering GitHub-style task list syntax as disabled checkboxes.
- [Binding](https://comark.dev/raw/plugins/built-in/binding.md): Interpolate data with `{{ path || default }}` and conditionally render content with `::if`.
- [Breaks](https://comark.dev/raw/plugins/built-in/breaks.md): Plugin for converting soft line breaks into br components.
- [Emoji](https://comark.dev/raw/plugins/built-in/emoji.md): Convert emoji shortcodes like :smile: into emoji characters.
- [Footnotes](https://comark.dev/raw/plugins/built-in/footnotes.md): Plugin for adding footnote references and definitions to your Comark documents.
- [Headings](https://comark.dev/raw/plugins/built-in/headings.md): Plugin for extracting the page title and description from document content.
- [JSON Render](https://comark.dev/raw/plugins/built-in/json-render.md): Plugin for rendering JSON Render specs as UI components in Comark. Supports both json-render and yaml-render code blocks.
- [Mathematics](https://comark.dev/raw/plugins/built-in/math.md): Plugin for rendering LaTeX math formulas in Comark using KaTeX.
- [Mermaid diagrams](https://comark.dev/raw/plugins/built-in/mermaid.md): Plugin for rendering Mermaid diagrams in Comark using code blocks.
- [Punctuation](https://comark.dev/raw/plugins/built-in/punctuation.md): Plugin for converting plain-text punctuation into typographically correct Unicode characters.
- [Rangi (Highlight)](https://comark.dev/raw/plugins/built-in/rangi.md): Lightweight syntax highlighting for code blocks and language-tagged inline code using rangi.
- [Security](https://comark.dev/raw/plugins/built-in/security.md): Sanitize the parsed AST by removing dangerous elements, blocking malicious protocols, and restricting link destinations.
- [Shiki (Highlight)](https://comark.dev/raw/plugins/built-in/shiki.md): Plugin for syntax highlighting code blocks using Shiki with multi-theme support.
- [Summary extraction](https://comark.dev/raw/plugins/built-in/summary.md): Plugin for extracting content summaries using the <!-- more --> delimiter.
- [Table of contents](https://comark.dev/raw/plugins/built-in/toc.md): Plugin for automatically generating a table of contents from document headings.
- [Plugin API](https://comark.dev/raw/plugins/custom/plugin-api.md): Type-safe API for creating Comark plugins with pre/post lifecycle hooks.
- [AST API](https://comark.dev/raw/plugins/custom/ast-api.md): Traverse and modify the MarkdownDocument AST after parsing using the visit() utility.
- [Markdown-it](https://comark.dev/raw/plugins/custom/markdown-it.md): Use existing markdown-it plugins with Comark and create new parser syntax using markdown-it rules.

## API Reference

- [Render API](https://comark.dev/raw/reference/render.md): Convert a Markdown AST back to markdown, preserving frontmatter and component syntax.
- [Parse API](https://comark.dev/raw/reference/parse.md): Parse Markdown into a compact, serializable document with parseMarkdown() or createMarkdownParser(), on the server, in the browser, or from a stream.
- [Streaming API](https://comark.dev/raw/reference/auto-close.md): Render incomplete Markdown correctly during streaming. autoCloseMarkdown() closes unterminated syntax so AI output displays at every frame.
- [Cheat Sheet](https://comark.dev/raw/reference/reference.md): Quick reference for all Comark exports, types, and APIs across all packages.

## Knowledge Base

- [Why Comark?](https://comark.dev/raw/kb/why-comark.md): Comark gives JavaScript applications one Markdown pipeline for standards-based parsing, serializable documents, multiple renderers, plugins, and streaming.
- [Migration from MDC](https://comark.dev/raw/kb/migration-from-mdc.md): Step-by-step guide for moving from @nuxtjs/mdc to Comark, covering package mapping, API changes, component registration, and renderer setup.
- [Migration from MDX](https://comark.dev/raw/kb/migration-from-mdx.md): Map every MDX concept (components, props, expressions, imports and exports) to its Comark equivalent, with a step-by-step migration checklist.
- [Twoslash](https://comark.dev/raw/kb/twoslash.md): How to add interactive TypeScript type tooltips and error annotations to code blocks using @shikijs/twoslash with Comark.
- [Custom code block](https://comark.dev/raw/kb/custom-code-block.md): How to build copy buttons, collapse thresholds, and other code-block UI when Comark does not pass a raw `code` prop.

## Examples

- [Examples](https://comark.dev/raw/examples.md): Explore Comark examples to learn how to add Comark in your projects.
- [Astro](https://comark.dev/raw/examples/frameworks/astro.md): A blog example using Comark with Astro content collections and React components.
- [Next.js](https://comark.dev/raw/examples/frameworks/nextjs.md): A blog example using Comark with Next.js App Router and React Server Components.
- [Nuxt](https://comark.dev/raw/examples/frameworks/nuxt.md): A minimal Nuxt app that renders Comark component syntax with Nuxt UI components through the @comark/nuxt module.
- [SvelteKit](https://comark.dev/raw/examples/frameworks/sveltekit.md): A SvelteKit example showing Comark with lazy components, MarkdownAsync, and SSR.
- [VitePress](https://comark.dev/raw/examples/frameworks/vitepress.md): Using Comark component syntax natively in VitePress via the comark syntax plugin.
- [Angular](https://comark.dev/raw/examples/vite/angular.md): An Angular and Vite app that renders a Markdown blog, a syntax showcase, and a live editor with Comark and a custom alert component.
- [HTML preview](https://comark.dev/raw/examples/vite/html.md): A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support.
- [React](https://comark.dev/raw/examples/vite/react.md): A React and Vite app that renders a Markdown blog, a syntax showcase, and a live editor with Comark and a custom alert component.
- [Svelte](https://comark.dev/raw/examples/vite/svelte.md): A Svelte 5 and Vite app that renders a Markdown blog, a syntax showcase, and a live editor with Comark, a custom alert, and a lazy component.
- [Vue](https://comark.dev/raw/examples/vite/vue.md): A Vue and Vite app that renders a Markdown blog, a syntax showcase, and a live editor with Comark and a custom alert component.
- [Math formulas (React)](https://comark.dev/raw/examples/plugins/react-vite-math.md): A React and Vite app that renders inline and block LaTeX math in Markdown with the Comark math plugin and KaTeX.
- [Mermaid diagrams (React)](https://comark.dev/raw/examples/plugins/react-vite-mermaid.md): A React and Vite app that turns mermaid code blocks in Markdown into diagrams with the Comark mermaid plugin.
- [Binding (frontmatter + data)](https://comark.dev/raw/examples/plugins/vue-vite-binding.md): Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.
- [Syntax highlighting](https://comark.dev/raw/examples/plugins/vue-vite-highlight.md): Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.
- [JSON Render](https://comark.dev/raw/examples/plugins/vue-vite-json-render.md): Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.
- [Math formulas (Vue)](https://comark.dev/raw/examples/plugins/vue-vite-math.md): A Vue and Vite app that renders inline and block LaTeX math in Markdown with the Comark math plugin and KaTeX.
- [Mermaid diagrams (Vue)](https://comark.dev/raw/examples/plugins/vue-vite-mermaid.md): A Vue and Vite app that turns mermaid code blocks in Markdown into diagrams with the Comark mermaid plugin.
- [Punctuation](https://comark.dev/raw/examples/plugins/vue-vite-punctuation.md): Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.
- [AI SDK](https://comark.dev/raw/examples/ai/nuxt-ai-sdk.md): A Nuxt chat app that streams Vercel AI SDK responses and renders the Markdown with Comark while each message is still arriving.

## Use cases

- [Intelligent UI](https://comark.dev/raw/use-cases/intelligent-ui.md): Let a model answer with your own interactive components, rendered progressively as it streams, in Vue, React, Svelte, or Angular. The same pattern as ChatGPT Intelligent UI.
- [AI chat streaming](https://comark.dev/raw/use-cases/ai-chat-streaming.md): Render LLM output as Markdown while it streams, with no raw asterisks or open code fences, in Vue, React, Svelte, and Angular.
- [Vue and Nuxt chat](https://comark.dev/raw/use-cases/vue-ai-chat.md): Build a Nuxt chat that streams AI SDK responses and renders each message as Markdown with Comark while it arrives.
- [Svelte chat](https://comark.dev/raw/use-cases/svelte-ai-chat.md): Build a Svelte 5 chat that streams AI SDK responses and renders each message as Markdown with Comark while it arrives.
- [Angular chat](https://comark.dev/raw/use-cases/angular-ai-chat.md): Build an Angular 17+ chat that streams AI SDK responses and renders each message as Markdown with Comark while it arrives.
- [Generative UI](https://comark.dev/raw/use-cases/generative-ui.md): Let a model write Comark component syntax such as ::flight-card and render real Vue, React, Svelte, or Angular components, with no code execution.
- [Docs and blogs](https://comark.dev/raw/use-cases/docs-and-blogs.md): Parse Markdown files with frontmatter, a table of contents, and highlighted code, then render them with your own components in Nuxt, Next.js, Astro, or SvelteKit.
- [CMS and runtime content](https://comark.dev/raw/use-cases/cms-runtime-content.md): Parse Markdown with components at runtime, store the JSON document, and render it in Vue, React, Svelte, Angular, or HTML with no build step.
- [CLIs and agents](https://comark.dev/raw/use-cases/cli-and-agents.md): Print Markdown as styled ANSI output in Node.js CLIs and coding agents, with highlighted code, tables, and alerts, using @comark/ansi.
- [Emails and RSS](https://comark.dev/raw/use-cases/email-and-rss.md): Turn Markdown with components into HTML strings for emails and RSS feeds with @comark/html, including inline-styled components and CDATA output.

## Comparisons

- [Markdown for AI chat](https://comark.dev/raw/compare/markdown-libraries-for-ai-chat.md): Compare Streamdown, Markstream, Comark, @humanspeak/svelte-markdown, markdown-to-jsx, and plain parsers for rendering streamed LLM output. See how each handles incomplete Markdown, components, security, and frameworks.
- [Comark vs MDX](https://comark.dev/raw/compare/comark-vs-mdx.md): Comark parses component syntax at runtime with no build step, while MDX compiles Markdown to JSX at build time. Compare syntax, architecture, framework support, and streaming.
- [Comark vs react-markdown](https://comark.dev/raw/compare/comark-vs-react-markdown.md): Comark adds component syntax, streaming auto-close, and multi-framework rendering that react-markdown lacks. Compare architecture, component mapping, and streaming behavior.
- [Comark vs Streamdown](https://comark.dev/raw/compare/comark-vs-streamdown.md): Streamdown streams Markdown in React. Comark streams Markdown with custom component syntax in Vue, React, Svelte, and Angular, with a decoupled parser and serializable AST.
- [Comark vs Markdoc](https://comark.dev/raw/compare/comark-vs-markdoc.md): Comark and Markdoc both treat Markdown as data with runtime parsing. Comark adds streaming auto-close, a more compact AST, and renderers for Vue, Svelte, Angular, and ANSI.
- [Comark vs Markstream](https://comark.dev/raw/compare/comark-vs-markstream.md): Markstream and Comark both stream AI Markdown in several frameworks. Compare incomplete-syntax handling, components in content, string renderers, security defaults, and renderer maturity.
- [Comark vs marked](https://comark.dev/raw/compare/comark-vs-marked.md): marked compiles Markdown to an HTML string with zero dependencies. Comark parses Markdown into a serializable document with components and streaming, then renders it to HTML, frameworks, or the terminal.
- [Comark vs markdown-it](https://comark.dev/raw/compare/comark-vs-markdown-it.md): Comark is built on markdown-exit, a TypeScript rewrite of markdown-it. Compare their output, plugin compatibility, defaults, streaming, and framework rendering.
- [Comark vs remark](https://comark.dev/raw/compare/comark-vs-remark.md): remark and unified transform Markdown through mdast and hast syntax trees with a large plugin ecosystem. Comark parses into a compact document with component syntax, streaming, and multi-framework renderers.
- [Comark vs markdown-to-jsx](https://comark.dev/raw/compare/comark-vs-markdown-to-jsx.md): markdown-to-jsx renders JSX tags in Markdown with zero dependencies and many output targets. Comark adds a component syntax with YAML props and named slots, streaming auto-close, and Svelte, Angular, and terminal renderers.
- [Comark vs svelte-markdown](https://comark.dev/raw/compare/comark-vs-svelte-markdown.md): Compare Comark with svelte-markdown and its Svelte 5 successor @humanspeak/svelte-markdown. See how each handles custom renderers, components in content, LLM streaming, and SvelteKit SSR.
- [Comark vs vue-markdown-render](https://comark.dev/raw/compare/comark-vs-vue-markdown-render.md): Compare Comark with vue-markdown-render and @crazydos/vue-markdown for Vue 3. See how each renders Markdown, maps elements to Vue components, handles raw HTML, and streams AI output.

## MCP Server

This site exposes a Model Context Protocol (MCP) server over streamable HTTP at https://comark.dev/mcp.

- [Comark Docs](https://comark.dev/mcp): Streamable HTTP endpoint — connect an MCP client to this URL to call the tools, resources and prompts exposed by this site.