# Comark

> Parse and render Markdown anywhere with one JavaScript library for HTML, ANSI, Vue, React, Svelte and Angular, plus plugins and streaming.

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

## Getting Started

- [Introduction](https://comark.dev/raw/getting-started/introduction.md): Parse and render CommonMark and GFM anywhere with Comark, a JavaScript library for HTML, ANSI, Vue, React, Svelte, Angular, plugins, and streaming.
- [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 supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more.
- [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): Parse Markdown or render existing documents as HTML strings without any framework dependency.
- [Vue](https://comark.dev/raw/rendering/vue.md): Learn how to render Comark in a Vue.js application with custom components, plugins, and streaming support.
- [Nuxt](https://comark.dev/raw/rendering/nuxt.md): Learn how to use Comark in a Nuxt application with auto-imported components and Nuxt UI integration.
- [React](https://comark.dev/raw/rendering/react.md): Learn how to render Comark in a React application with custom components, plugins, and Next.js support.
- [Svelte](https://comark.dev/raw/rendering/svelte.md): Learn how to render Comark in a Svelte 5 application with custom components, plugins, and streaming support.
- [Angular](https://comark.dev/raw/rendering/angular.md): Learn how to render Comark in an Angular 17+ application with standalone components, custom components, plugins, and streaming support.
- [ANSI (Terminal)](https://comark.dev/raw/rendering/ansi.md): Render Markdown as styled terminal output using ANSI escape codes, perfect for CLIs, scripts, and developer tooling.

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

## Comparisons

- [Comark vs MDX](https://comark.dev/compare/comark-vs-mdx): 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/compare/comark-vs-react-markdown): 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/compare/comark-vs-streamdown): 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/compare/comark-vs-markdoc): 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.

## 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)
- [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 example showing how to use Comark Syntax with Nuxt UI.
- [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): A minimal example showing how to use Comark with Angular and Vite.
- [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 minimal example showing how to use Comark with React and Vite.
- [Svelte](https://comark.dev/raw/examples/vite/svelte.md): A minimal example showing how to use Comark with Svelte and Vite.
- [Vue](https://comark.dev/raw/examples/vite/vue.md): A minimal example showing how to use Comark with Vue and Vite.
- [Math formulas](https://comark.dev/raw/examples/plugins/react-vite-math.md): Example showing how to use Comark with LaTeX math formulas in React and Vite.
- [Mermaid diagrams](https://comark.dev/raw/examples/plugins/react-vite-mermaid.md): Example showing how to use Comark with Mermaid diagrams in React and Vite.
- [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](https://comark.dev/raw/examples/plugins/vue-vite-math.md): Example showing how to use Comark with LaTeX math formulas in Vue and Vite.
- [Mermaid diagrams](https://comark.dev/raw/examples/plugins/vue-vite-mermaid.md): Example showing how to use Comark with Mermaid diagrams in Vue and Vite.
- [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): Streaming AI chat with live Comark rendering

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