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

::card-group{cols="2"}
  :::card{icon="i-vscode-icons-file-type-html" title="HTML" to="https://comark.dev/rendering/html"}
  Server-side rendering and static generation without a framework.
  :::

  :::card{icon="i-logos-vue" title="Vue" to="https://comark.dev/rendering/vue"}
  Use Comark in Vue 3 applications with full async component support and streaming.
  :::

  :::card{icon="i-logos-nuxt-icon" title="Nuxt" to="https://comark.dev/rendering/nuxt"}
  Zero-config Nuxt module with auto-imported components and Nuxt UI integration.
  :::

  :::card{icon="i-logos-react" title="React" to="https://comark.dev/rendering/react"}
  Use Comark in React and Next.js applications.
  :::

  :::card{icon="i-logos-svelte-icon" title="Svelte" to="https://comark.dev/rendering/svelte"}
  Use Comark in Svelte 5 applications with snippets and streaming.
  :::

  :::card{icon="i-logos-angular-icon" title="Angular" to="https://comark.dev/rendering/angular"}
  Use Comark in Angular 17+ applications with standalone components and streaming.
  :::

  :::card{icon="i-lucide-terminal" title="ANSI" to="https://comark.dev/rendering/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:

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

::card-group
  :::card
  ```yaml [props]
  title: Comark Extension
  icon: i-logos-visual-studio-code
  color: neutral
  variant: subtle
  to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
  target: _blank
  ```
  :::
::

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.

::card-group
  :::card
  ```yaml [props]
  title: Chrome Web Store
  icon: i-logos-chrome
  color: neutral
  variant: subtle
  to: https://chromewebstore.google.com/detail/comark-for-github/mbbnjnblfplfjkakjfjkhhefhcdnhcin
  target: _blank
  ```
  :::

  :::card
  ```yaml [props]
  title: Firefox Add-ons
  icon: i-logos-firefox
  color: neutral
  variant: subtle
  to: https://addons.mozilla.org/en-US/firefox/addon/comark-for-github-gitlab/
  target: _blank
  ```
  :::

  :::card
  ```yaml [props]
  title: View Source / Manual Install
  icon: i-simple-icons-github
  color: neutral
  variant: subtle
  to: https://github.com/comarkdown/comark-webext
  target: _blank
  ```
  :::
::

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

::tabs{.gap-0}
  :::tab-item{label="Vue" icon="i-logos-vue"}
    ::::code-group
    ```bash [pnpm]
    pnpm add @comark/vue
    ```

    ```bash [npm]
    npm install @comark/vue
    ```

    ```bash [yarn]
    yarn add @comark/vue
    ```

    ```bash [bun]
    bun add @comark/vue
    ```
    ::::
  :::

  :::tab-item{label="React" icon="i-logos-react"}
    ::::code-group
    ```bash [pnpm]
    pnpm add @comark/react
    ```

    ```bash [npm]
    npm install @comark/react
    ```

    ```bash [yarn]
    yarn add @comark/react
    ```

    ```bash [bun]
    bun add @comark/react
    ```
    ::::
  :::

  :::tab-item{label="Nuxt" icon="i-logos-nuxt-icon"}
  ```bash [Terminal]
  npx nuxt add comark
  ```
  :::

  :::tab-item{label="Svelte" icon="i-logos-svelte-icon"}
    ::::code-group
    ```bash [pnpm]
    pnpm add @comark/svelte
    ```

    ```bash [npm]
    npm install @comark/svelte
    ```

    ```bash [yarn]
    yarn add @comark/svelte
    ```

    ```bash [bun]
    bun add @comark/svelte
    ```
    ::::
  :::

  :::tab-item{label="Angular" icon="i-logos-angular-icon"}
    ::::code-group
    ```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.

::tabs{.gap-0}
  :::tab-item{label="HTML" icon="i-vscode-icons-file-type-html"}
    ::::code-group
    ```bash [pnpm]
    pnpm add @comark/html
    ```

    ```bash [npm]
    npm install @comark/html
    ```

    ```bash [yarn]
    yarn add @comark/html
    ```

    ```bash [bun]
    bun add @comark/html
    ```
    ::::
  :::

  :::tab-item{label="ANSI" icon="i-lucide-terminal"}
    ::::code-group
    ```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.

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

::code-group
```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:

::card-group{cols="2"}
  :::card{icon="i-lucide-code" title="Markdown Syntax" to="https://comark.dev/syntax/markdown"}
  Learn the standard Markdown syntax and how to use it with Comark.
  :::

  :::card{icon="i-lucide-component" title="Components" to="https://comark.dev/syntax/components"}
  Learn the component syntax for blocks, inline elements, props, and slots
  :::

  :::card{icon="i-lucide-tag" title="Attributes" to="https://comark.dev/syntax/attributes"}
  Add classes, IDs, and custom attributes to Markdown elements
  :::

  :::card{icon="i-lucide-plug" title="Plugins" to="https://comark.dev/plugins"}
  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.