# Comark

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

## Documentation Sets

- [Comark](https://comark.dev/llms-full.txt): The Markdown engine for the modern web. One parser, every renderer: Vue, React, Svelte, Angular, HTML and ANSI, with components, plugins and streaming.

## Docs

- [Introduction](https://comark.dev/raw/getting-started/introduction.md): Comark extends standard Markdown with component syntax, parses it to a compact AST at build time or runtime, and renders it with Vue, React, Svelte, Angular, HTML or ANSI.
- [Installation](https://comark.dev/raw/getting-started/installation.md): Install Comark and render your first Markdown with components in Vue, React, Svelte, Angular, or plain HTML in under 5 minutes.
- [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.
- [Comark AST](https://comark.dev/raw/syntax/comark-ast.md): Complete reference for the Comark AST (Abstract Syntax Tree) format, a lightweight array-based structure for efficient processing.
- [Render Comark to HTML](https://comark.dev/raw/rendering/html.md): Render Comark AST to HTML strings without any framework dependency.
- [Render Comark in 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.
- [Render Comark in 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.
- [Render Comark in 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.
- [Render Comark in 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.
- [Render Comark in 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 Rendering](https://comark.dev/raw/rendering/ansi.md): Render Comark content as styled terminal output using ANSI escape codes, perfect for CLIs, scripts, and developer tooling.
- [Alerts](https://comark.dev/raw/plugins/built-in/alert.md): Built-in plugin that transforms GitHub-style blockquote alerts into styled callout blocks with icons and colors.
- [Binding](https://comark.dev/raw/plugins/built-in/binding.md): Comark plugin that adds a `{{ path || default }}` inline shorthand for interpolating frontmatter, meta, or runtime data into your content.
- [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.
- [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.
- [Summary Extraction](https://comark.dev/raw/plugins/built-in/summary.md): Plugin for extracting content summaries using the <!-- more --> delimiter.
- [Syntax Highlighting](https://comark.dev/raw/plugins/built-in/syntax-highlight.md): Plugin for syntax highlighting code blocks using Shiki with multi-theme support.
- [Task List](https://comark.dev/raw/plugins/built-in/task-list.md): Plugin for rendering interactive checkboxes from GitHub-style task list syntax.
- [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 ComarkTree 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.
- [Plugins](https://comark.dev/raw/plugins.md): Extend Comark with plugins for syntax highlighting, emoji, table of contents, math, and diagrams, or reuse existing markdown-it plugins.
- [Render API](https://comark.dev/raw/api/render.md): Convert a Comark AST back to markdown, preserving frontmatter and component syntax.
- [Parse API](https://comark.dev/raw/api/parse.md): Parse Markdown with components into a compact Comark AST using parse() and createParse(), on the server, in the browser, or from a stream.
- [Streaming API](https://comark.dev/raw/api/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/api/reference.md): Quick reference for all Comark exports, types, and APIs across all packages.
- [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 terminals.
- [Comark: From Markdown to Interactive UI](https://comark.dev/raw/kb/why-comark.md): Markdown is human-readable, token-efficient, and AI-native. Comark extends it to interactive components with runtime parsing, multi-framework rendering, and first-class streaming.
- [Migrating 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.
- [Migrating 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.
- [Examples](https://comark.dev/raw/examples.md): Explore real-world Comark examples for Vue, React, Nuxt, Astro, and more.

## Landing

- [Comark](https://comark.dev/raw/index.md): The Markdown engine for the modern web. One parser, every renderer: Vue, React, Svelte, Angular, HTML and ANSI, with components, plugins and streaming.

## Examples

- [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-ui.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, ComarkAsync, 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