Getting Started

Installation

Install Comark and render your first Markdown with components in Vue, React, or plain HTML in under 5 minutes.

Packages

Comark has three layers. Pick the one that matches what you're building:

	Framework Renderers	String Renderers	Core
Package	`@comark/vue` `@comark/react` `@comark/nuxt` `@comark/svelte`	`@comark/html` `@comark/ansi`	`comark`
Provides	`<Comark>`, `<ComarkRenderer>` — internal parsing and rendering components	`renderANSI()`, `renderHTML()` — not framework related	`parse()`, `renderMarkdown()` — programmatic parsing and rendering
Output	Rendered Markdown document with interactive components	HTML string / ANSI terminal	AST or Markdown string
Choose when	Rendering Markdown with interactive UI components	HTML generation or CLI tooling	Transforms, round-tripping, or custom pipelines

Framework Renderers

Use these when you need to render Markdown as an interactive document in Vue, React, Nuxt, or Svelte.

pnpm add @comark/vue

npm install @comark/vue

yarn add @comark/vue

bun add @comark/vue

pnpm add @comark/react

npm install @comark/react

yarn add @comark/react

bun add @comark/react

pnpm add @comark/nuxt

npm install @comark/nuxt

yarn add @comark/nuxt

bun add @comark/nuxt

Then register the module in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@comark/nuxt']
})

pnpm add @comark/svelte

npm install @comark/svelte

yarn add @comark/svelte

bun add @comark/svelte

String Renderers

Use these when you need a string output with no UI framework involved like server-side HTML generation, static site builds, or CLI tooling.

pnpm add @comark/html

npm install @comark/html

yarn add @comark/html

bun add @comark/html

pnpm add @comark/ansi

npm install @comark/ansi

yarn add @comark/ansi

bun add @comark/ansi

Core

comark is the foundation all other packages build on. Use it when you need to work with the AST itself and serialize back to Markdown.

All framework packages re-export its types, so you only need to install comark separately if you're not using a framework renderer.

pnpm add comark

npm install comark

yarn add comark

bun add comark

import { parse, createParse } from 'comark'
import { renderMarkdown } from 'comark/render'

// Parse to AST
const tree = await parse(source)

// Transform nodes, then serialize back to Markdown
const output = await renderMarkdown(tree)

// Reusable parser — initializes plugins once, faster for batch processing
const parseDoc = createParse({ plugins: [highlight(), toc()] })

See the Parse API and Render API for full options.

Quick Start

Pick your framework and get rendering in seconds.

Vue

Use Comark in Vue 3 applications with full async component support and streaming.

React

Use Comark in React and Next.js applications.

Nuxt

Zero-config Nuxt module with auto-imported components and Nuxt UI integration.

Svelte

Use Comark in Svelte 5 applications with snippets and streaming.

HTML

Server-side rendering and static generation without a framework.

ANSI

Render Comark as styled terminal output for CLIs and developer tooling.

Agent Skill

To give coding agents the Comark skill (syntax, AST, renderers, streaming), install it from production:

Terminal

npx skills add https://comark.dev

Learn More

Learn more about Comark features and syntax:

Markdown Syntax

Learn the standard Markdown syntax and how to use it with Comark.

Components

Learn the component syntax for blocks, inline elements, props, and slots

Attributes

Add classes, IDs, and custom attributes to Markdown elements

Plugins

Add syntax highlighting, math, mermaid diagrams, and more

Edit this pageorReport an issue

Introduction

Comark is a powerful Markdown parser that extends standard Markdown with component syntax, enabling rich, interactive content in Vue and React applications.

Markdown

Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more.