---
title: "Installation"
description: "Install Comark and choose a parser or renderer for HTML, ANSI, Vue, React, Svelte, or Angular to start working with Markdown in minutes."
canonical_url: "https://comark.dev/getting-started/installation"
---
# Installation
> Install Comark and choose a parser or renderer for HTML, ANSI, Vue, React, Svelte, or Angular to start working with Markdown in minutes.
## Quick start
Choose the output you need and render your first Markdown document in minutes.
Server-side rendering and static generation without a framework.
Use Comark in Vue 3 applications with full async component support and streaming.
Zero-config Nuxt module with auto-imported components and Nuxt UI integration.
Use Comark in React and Next.js applications.
Use Comark in Svelte 5 applications with snippets and streaming.
Use Comark in Angular 17+ applications with standalone components and streaming.
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:
```bash [Terminal]
npx skills add https://comark.dev
```
## IDE extension
Install the [Comark extension](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc) in **VS Code** or **Cursor** for syntax highlighting, bracket matching, document folding, and auto-completion in `.md` files using Comark syntax.
Or within your editor, open Quick Open (`Ctrl+P` / `Cmd+P`) and run:
```bash
ext install Nuxt.mdc
```
## Browser extension
Install **Comark for GitHub** to better visualize Markdown files that use Comark components and attributes syntax on GitHub.
## Packages
Comark packages share one pipeline. The core parser produces a serializable `MarkdownDocument`, while string and UI renderers consume that document. Install the package that matches your output:
### UI frameworks
Use these when you need to render Markdown as an interactive document in Vue, React, Nuxt, Svelte, or Angular.
```bash [pnpm]
pnpm add @comark/vue
```
```bash [npm]
npm install @comark/vue
```
```bash [yarn]
yarn add @comark/vue
```
```bash [bun]
bun add @comark/vue
```
```bash [pnpm]
pnpm add @comark/react
```
```bash [npm]
npm install @comark/react
```
```bash [yarn]
yarn add @comark/react
```
```bash [bun]
bun add @comark/react
```
```bash [Terminal]
npx nuxt add comark
```
```bash [pnpm]
pnpm add @comark/svelte
```
```bash [npm]
npm install @comark/svelte
```
```bash [yarn]
yarn add @comark/svelte
```
```bash [bun]
bun add @comark/svelte
```
```bash [pnpm]
pnpm add @comark/angular
```
```bash [npm]
npm install @comark/angular
```
```bash [yarn]
yarn add @comark/angular
```
```bash [bun]
bun add @comark/angular
```
### 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.
```bash [pnpm]
pnpm add @comark/html
```
```bash [npm]
npm install @comark/html
```
```bash [yarn]
yarn add @comark/html
```
```bash [bun]
bun add @comark/html
```
```bash [pnpm]
pnpm add @comark/ansi
```
```bash [npm]
npm install @comark/ansi
```
```bash [yarn]
yarn add @comark/ansi
```
```bash [bun]
bun add @comark/ansi
```
### Core
`comark` is the parser and document foundation used by every renderer. Use it directly to parse Markdown, inspect or transform the AST, cache or serialize documents, and render them 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.
```bash [pnpm]
pnpm add comark
```
```bash [npm]
npm install comark
```
```bash [yarn]
yarn add comark
```
```bash [bun]
bun add comark
```
```typescript
import { parseMarkdown, createMarkdownParser } from 'comark'
import { renderMarkdown } from 'comark/render'
// Parse to AST
const document = await parseMarkdown(source)
// Transform nodes, then serialize back to Markdown
const output = await renderMarkdown(document)
// Reusable parser: initializes plugins once, faster for batch processing
const parseDoc = createMarkdownParser({ plugins: [shiki(), toc()] })
```
See the [Parse API](https://comark.dev/reference/parse) and [Render API](https://comark.dev/reference/render) for full options.
## Learn more
Learn more about Comark features and syntax:
Learn the standard Markdown syntax and how to use it with Comark.
Learn the component syntax for blocks, inline elements, props, and slots
Add classes, IDs, and custom attributes to Markdown elements
Add syntax highlighting, math, mermaid diagrams, and more
---
- [Comark Syntax](https://comark.dev/syntax/components)
- [Plugins](https://comark.dev/plugins)
## Sitemap
See the full [sitemap](https://comark.dev/sitemap.md) for all pages.